From 258b0c57a71138c30269cb4e2f6abaef9b51dc9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 26 Nov 2024 17:17:45 +0100
Subject: [PATCH 01/28] only care about the composedPath when selectableTarget
 is this.

---
 packages/uui-base/lib/mixins/SelectableMixin.ts  | 16 +++++++++++-----
 .../lib/uui-color-swatch.element.ts              |  6 ++++++
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/uui-base/lib/mixins/SelectableMixin.ts b/packages/uui-base/lib/mixins/SelectableMixin.ts
index af40771f9..4f515ab98 100644
--- a/packages/uui-base/lib/mixins/SelectableMixin.ts
+++ b/packages/uui-base/lib/mixins/SelectableMixin.ts
@@ -94,11 +94,17 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
     };
 
     readonly #onClick = (e: Event) => {
-      const composePath = e.composedPath();
-      if (
-        (this._selectable || (this.deselectable && this.selected)) &&
-        composePath.indexOf(this.selectableTarget) === 0
-      ) {
+      const isSelectable =
+        this._selectable || (this.deselectable && this.selected);
+
+      if (isSelectable === false) return;
+
+      if (this.selectableTarget === this) {
+        // If target is this, then only allow selection if the click is on the element itself.
+        if (e.composedPath().indexOf(this.selectableTarget) === 0) {
+          this.#toggleSelect();
+        }
+      } else {
         this.#toggleSelect();
       }
     };
diff --git a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
index 233cba458..44dc55ef1 100644
--- a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
+++ b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
@@ -1,6 +1,7 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { property } from 'lit/decorators.js';
 import { css, html, LitElement, nothing } from 'lit';
+import { ref } from 'lit/directives/ref.js';
 import { iconCheck } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
 import {
   ActiveMixin,
@@ -109,10 +110,15 @@ export class UUIColorSwatchElement extends LabelMixin(
     }
   }
 
+  #selectButtonChanged(button?: Element | undefined) {
+    this.selectableTarget = button || this;
+  }
+
   render() {
     return html`
       <button
         id="swatch"
+        ${ref(this.#selectButtonChanged)}
         aria-label=${this.label}
         ?disabled="${this.disabled}"
         title="${this.label}">

From b9609f6ee4d80da9f6677f4ce4866556650fd332 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 26 Nov 2024 19:32:43 +0100
Subject: [PATCH 02/28] correct none this select target logic

---
 packages/uui-base/lib/mixins/SelectableMixin.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/uui-base/lib/mixins/SelectableMixin.ts b/packages/uui-base/lib/mixins/SelectableMixin.ts
index 4f515ab98..86f4c6379 100644
--- a/packages/uui-base/lib/mixins/SelectableMixin.ts
+++ b/packages/uui-base/lib/mixins/SelectableMixin.ts
@@ -104,7 +104,7 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
         if (e.composedPath().indexOf(this.selectableTarget) === 0) {
           this.#toggleSelect();
         }
-      } else {
+      } else if (e.composedPath().indexOf(this.selectableTarget) !== -1) {
         this.#toggleSelect();
       }
     };

From 976b5688e7ed649d3222cba1b0e6751f0b40a2de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 26 Nov 2024 19:32:58 +0100
Subject: [PATCH 03/28] align table row selection

---
 .../uui-table/lib/uui-table-row.element.ts    | 135 ++++++++++++++++--
 1 file changed, 120 insertions(+), 15 deletions(-)

diff --git a/packages/uui-table/lib/uui-table-row.element.ts b/packages/uui-table/lib/uui-table-row.element.ts
index 0c34a530f..20af1747f 100644
--- a/packages/uui-table/lib/uui-table-row.element.ts
+++ b/packages/uui-table/lib/uui-table-row.element.ts
@@ -4,6 +4,7 @@ import {
 } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement } from 'lit';
+import { ref } from 'lit/directives/ref.js';
 import { queryAssignedElements } from 'lit/decorators.js';
 
 import { UUITableCellElement } from './uui-table-cell.element';
@@ -54,21 +55,30 @@ export class UUITableRowElement extends SelectOnlyMixin(
   }
 
   private updateChildSelectOnly() {
-    if (this.slotCellNodes) {
-      this.slotCellNodes.forEach(el => {
-        if (this.elementIsTableCell(el)) {
+    const slotCellNodes = this.slotCellNodes;
+    if (slotCellNodes) {
+      slotCellNodes.forEach(el => {
+        if (el instanceof UUITableCellElement) {
           el.disableChildInteraction = this.selectOnly;
         }
       });
     }
   }
 
-  private elementIsTableCell(element: unknown): element is UUITableCellElement {
-    return element instanceof UUITableCellElement;
+  #selectAreaChanged(selectArea?: Element | undefined) {
+    this.selectableTarget = selectArea || this;
   }
 
   render() {
-    return html` <slot @slotchanged=${this.updateChildSelectOnly}></slot> `;
+    return html`
+      <slot @slotchanged=${this.updateChildSelectOnly}></slot>
+      <div id="select-border" ${ref(this.#selectAreaChanged)}>
+        <div id="select-top"></div>
+        <div id="select-right"></div>
+        <div id="select-bottom"></div>
+        <div id="select-left"></div>
+      </div>
+    `;
   }
 
   static styles = [
@@ -79,20 +89,115 @@ export class UUITableRowElement extends SelectOnlyMixin(
         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));
+
+      :host([selectable]) #select-border {
+        position: absolute;
+        top: -1px;
+        left: -1px;
+        right: -1px;
+        bottom: -1px;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 120ms;
+      }
+      :host([selectable]) #select-border::after {
+        content: '';
+        position: absolute;
+        z-index: 20;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        border: 2px solid var(--uui-color-selected);
+        border-radius: calc(var(--uui-border-radius) + 2px);
+        pointer-events: none;
+        box-shadow:
+          0 0 4px 0 var(--uui-color-selected),
+          inset 0 0 2px 0 var(--uui-color-selected);
+      }
+
+      :host([selectable]) #select-border #select-top,
+      :host([selectable]) #select-border #select-right,
+      :host([selectable]) #select-border #select-bottom,
+      :host([selectable]) #select-border #select-left {
+        position: absolute;
+        z-index: 2;
+        top: 1px;
+        left: 1px;
+        right: 1px;
+        bottom: 1px;
+        cursor: pointer;
+        pointer-events: auto;
+      }
+      :host([selectable]) #select-border #select-top {
+        height: var(--uui-size-space-3);
+        bottom: unset;
+      }
+      :host([selectable]) #select-border #select-right {
+        width: var(--uui-size-space-3);
+        left: unset;
+      }
+      :host([selectable]) #select-border #select-bottom {
+        height: var(--uui-size-space-3);
+        top: unset;
+      }
+      :host([selectable]) #select-border #select-left {
+        width: var(--uui-size-space-3);
+        right: unset;
+      }
+
+      :host([selected]) #select-border {
+        opacity: 1;
+      }
+      :host([selectable]:not([selected]):hover) #select-border {
+        opacity: 0.33;
+      }
+      :host([selectable][selected]:hover) #select-border {
+        opacity: 0.8;
       }
-      :host([selected]:focus) {
-        outline-color: var(--uui-color-focus);
+
+      :host([selectable]:not([selected])) #open-part:hover + #select-border {
+        opacity: 0;
+      }
+      :host([selectable][selected]) #open-part:hover + #select-border {
+        opacity: 1;
+      }
+
+      :host([selectable]:not([selected]):hover) #select-border::after {
+        animation: not-selected--hover 1.2s infinite;
+      }
+      @keyframes not-selected--hover {
+        0%,
+        100% {
+          opacity: 0.66;
+        }
+        50% {
+          opacity: 1;
+        }
+      }
+
+      :host([selectable][selected]:hover) #select-border::after {
+        animation: selected--hover 1.4s infinite;
+      }
+      @keyframes selected--hover {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.66;
+        }
+      }
+      :host([selectable]) #open-part:hover + #select-border::after {
+        animation: none;
+      }
+
+      :host([select-only]) *,
+      :host([select-only]) ::slotted(*) {
+        pointer-events: none;
       }
     `,
   ];

From f905d4d814861bcaadf9071f405c61684147e919 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 26 Nov 2024 20:00:40 +0100
Subject: [PATCH 04/28] correction of selectableMixin for keyboard navigation

---
 .../uui-base/lib/mixins/SelectableMixin.ts    | 58 +++++++++++++------
 1 file changed, 39 insertions(+), 19 deletions(-)

diff --git a/packages/uui-base/lib/mixins/SelectableMixin.ts b/packages/uui-base/lib/mixins/SelectableMixin.ts
index 86f4c6379..6903e63a4 100644
--- a/packages/uui-base/lib/mixins/SelectableMixin.ts
+++ b/packages/uui-base/lib/mixins/SelectableMixin.ts
@@ -52,12 +52,14 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
     }
     set selectable(newVal) {
       const oldVal = this._selectable;
+      if (oldVal === newVal) return;
       this._selectable = newVal;
+
       // Potentially problematic as a component might need focus for another feature when not selectable:
-      if (this.selectableTarget === this) {
-        // If the selectable target, then make it self selectable. (A different selectable target should be made focusable by the component itself)
-        this.setAttribute('tabindex', `${newVal ? '0' : '-1'}`);
-      }
+      //if (this.#selectableTarget === this) {
+      // If the selectable target, then make it self selectable. (A different selectable target should be made focusable by the component itself)
+      this.#selectableTarget.setAttribute('tabindex', `${newVal ? '0' : '-1'}`);
+      //}
       this.requestUpdate('selectable', oldVal);
     }
 
@@ -71,7 +73,28 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
     @property({ type: Boolean, reflect: true })
     public selected = false;
 
-    protected selectableTarget: EventTarget = this;
+    #selectableTarget: Element = this;
+    protected get selectableTarget(): EventTarget {
+      return this.#selectableTarget;
+    }
+    protected set selectableTarget(target: EventTarget) {
+      const oldTarget = this.#selectableTarget;
+
+      oldTarget.removeAttribute('tabindex');
+      oldTarget.removeEventListener('click', this.#onClick);
+      oldTarget.removeEventListener(
+        'keydown',
+        this.#onKeydown as EventListener,
+      );
+
+      this.#selectableTarget = target as Element;
+      this.#selectableTarget.setAttribute(
+        'tabindex',
+        this._selectable ? '0' : '-1',
+      );
+      target.addEventListener('click', this.#onClick);
+      target.addEventListener('keydown', this.#onKeydown as EventListener);
+    }
 
     constructor(...args: any[]) {
       super(...args);
@@ -80,17 +103,8 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
     }
 
     readonly #onKeydown = (e: KeyboardEvent) => {
-      const composePath = e.composedPath();
-      if (
-        (this._selectable || (this.deselectable && this.selected)) &&
-        composePath.indexOf(this.selectableTarget) === 0
-      ) {
-        if (this.selectableTarget === this) {
-          if (e.code !== 'Space' && e.code !== 'Enter') return;
-          this.#toggleSelect();
-          e.preventDefault();
-        }
-      }
+      if (e.code !== 'Space' && e.code !== 'Enter') return;
+      this.#onClick(e);
     };
 
     readonly #onClick = (e: Event) => {
@@ -99,12 +113,18 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
 
       if (isSelectable === false) return;
 
-      if (this.selectableTarget === this) {
+      if (this.#selectableTarget === this) {
         // If target is this, then only allow selection if the click is on the element itself.
-        if (e.composedPath().indexOf(this.selectableTarget) === 0) {
+        if (e.composedPath().indexOf(this.#selectableTarget) === 0) {
+          if (e.type === 'keydown') {
+            e.preventDefault(); // Do not want the space key to trigger a page scroll.
+          }
           this.#toggleSelect();
         }
-      } else if (e.composedPath().indexOf(this.selectableTarget) !== -1) {
+      } else if (e.composedPath().indexOf(this.#selectableTarget) !== -1) {
+        if (e.type === 'keydown') {
+          e.preventDefault(); // Do not want the space key to trigger a page scroll.
+        }
         this.#toggleSelect();
       }
     };

From 325115aa2b9684a64db080ff56a1b02ac075401d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 26 Nov 2024 20:00:50 +0100
Subject: [PATCH 05/28] adjust table row

---
 packages/uui-table/lib/uui-table-row.element.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/uui-table/lib/uui-table-row.element.ts b/packages/uui-table/lib/uui-table-row.element.ts
index 20af1747f..770f1c307 100644
--- a/packages/uui-table/lib/uui-table-row.element.ts
+++ b/packages/uui-table/lib/uui-table-row.element.ts
@@ -71,7 +71,7 @@ export class UUITableRowElement extends SelectOnlyMixin(
 
   render() {
     return html`
-      <slot @slotchanged=${this.updateChildSelectOnly}></slot>
+      <slot id="open-part" @slotchanged=${this.updateChildSelectOnly}></slot>
       <div id="select-border" ${ref(this.#selectAreaChanged)}>
         <div id="select-top"></div>
         <div id="select-right"></div>
@@ -133,19 +133,19 @@ export class UUITableRowElement extends SelectOnlyMixin(
         pointer-events: auto;
       }
       :host([selectable]) #select-border #select-top {
-        height: var(--uui-size-space-3);
+        height: var(--uui-size-space-4);
         bottom: unset;
       }
       :host([selectable]) #select-border #select-right {
-        width: var(--uui-size-space-3);
+        width: var(--uui-size-space-4);
         left: unset;
       }
       :host([selectable]) #select-border #select-bottom {
-        height: var(--uui-size-space-3);
+        height: var(--uui-size-space-4);
         top: unset;
       }
       :host([selectable]) #select-border #select-left {
-        width: var(--uui-size-space-3);
+        width: var(--uui-size-space-4);
         right: unset;
       }
 

From 6726c19cda74a384c4413685da4d89c486da08fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 26 Nov 2024 21:01:33 +0100
Subject: [PATCH 06/28] add checkbox import

---
 packages/uui-table/lib/uui-table-advanced-example.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/uui-table/lib/uui-table-advanced-example.ts b/packages/uui-table/lib/uui-table-advanced-example.ts
index b48336efb..a53442e68 100644
--- a/packages/uui-table/lib/uui-table-advanced-example.ts
+++ b/packages/uui-table/lib/uui-table-advanced-example.ts
@@ -2,6 +2,7 @@ import '.';
 import '@umbraco-ui/uui-avatar/lib';
 import '@umbraco-ui/uui-box/lib';
 import '@umbraco-ui/uui-button/lib';
+import '@umbraco-ui/uui-checkbox/lib';
 import '@umbraco-ui/uui-icon/lib';
 import '@umbraco-ui/uui-progress-bar/lib';
 import '@umbraco-ui/uui-tag/lib';

From 29a376cbc8ad427d6d081ae6a2b7e2ef70c886b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 26 Nov 2024 21:14:16 +0100
Subject: [PATCH 07/28] Revert "align table row selection"

This reverts commit 976b5688e7ed649d3222cba1b0e6751f0b40a2de.

# Conflicts:
#	packages/uui-table/lib/uui-table-row.element.ts
---
 .../uui-table/lib/uui-table-row.element.ts    | 135 ++----------------
 1 file changed, 15 insertions(+), 120 deletions(-)

diff --git a/packages/uui-table/lib/uui-table-row.element.ts b/packages/uui-table/lib/uui-table-row.element.ts
index 770f1c307..0c34a530f 100644
--- a/packages/uui-table/lib/uui-table-row.element.ts
+++ b/packages/uui-table/lib/uui-table-row.element.ts
@@ -4,7 +4,6 @@ import {
 } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement } from 'lit';
-import { ref } from 'lit/directives/ref.js';
 import { queryAssignedElements } from 'lit/decorators.js';
 
 import { UUITableCellElement } from './uui-table-cell.element';
@@ -55,30 +54,21 @@ export class UUITableRowElement extends SelectOnlyMixin(
   }
 
   private updateChildSelectOnly() {
-    const slotCellNodes = this.slotCellNodes;
-    if (slotCellNodes) {
-      slotCellNodes.forEach(el => {
-        if (el instanceof UUITableCellElement) {
+    if (this.slotCellNodes) {
+      this.slotCellNodes.forEach(el => {
+        if (this.elementIsTableCell(el)) {
           el.disableChildInteraction = this.selectOnly;
         }
       });
     }
   }
 
-  #selectAreaChanged(selectArea?: Element | undefined) {
-    this.selectableTarget = selectArea || this;
+  private elementIsTableCell(element: unknown): element is UUITableCellElement {
+    return element instanceof UUITableCellElement;
   }
 
   render() {
-    return html`
-      <slot id="open-part" @slotchanged=${this.updateChildSelectOnly}></slot>
-      <div id="select-border" ${ref(this.#selectAreaChanged)}>
-        <div id="select-top"></div>
-        <div id="select-right"></div>
-        <div id="select-bottom"></div>
-        <div id="select-left"></div>
-      </div>
-    `;
+    return html` <slot @slotchanged=${this.updateChildSelectOnly}></slot> `;
   }
 
   static styles = [
@@ -89,115 +79,20 @@ export class UUITableRowElement extends SelectOnlyMixin(
         outline-offset: -3px;
       }
 
-      :host(:focus) {
-        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
-          var(--uui-color-focus);
-      }
-
-      :host([selectable]) #select-border {
-        position: absolute;
-        top: -1px;
-        left: -1px;
-        right: -1px;
-        bottom: -1px;
-        pointer-events: none;
-        opacity: 0;
-        transition: opacity 120ms;
-      }
-      :host([selectable]) #select-border::after {
-        content: '';
-        position: absolute;
-        z-index: 20;
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        border: 2px solid var(--uui-color-selected);
-        border-radius: calc(var(--uui-border-radius) + 2px);
-        pointer-events: none;
-        box-shadow:
-          0 0 4px 0 var(--uui-color-selected),
-          inset 0 0 2px 0 var(--uui-color-selected);
-      }
-
-      :host([selectable]) #select-border #select-top,
-      :host([selectable]) #select-border #select-right,
-      :host([selectable]) #select-border #select-bottom,
-      :host([selectable]) #select-border #select-left {
-        position: absolute;
-        z-index: 2;
-        top: 1px;
-        left: 1px;
-        right: 1px;
-        bottom: 1px;
+      :host([selectable]) {
         cursor: pointer;
-        pointer-events: auto;
-      }
-      :host([selectable]) #select-border #select-top {
-        height: var(--uui-size-space-4);
-        bottom: unset;
-      }
-      :host([selectable]) #select-border #select-right {
-        width: var(--uui-size-space-4);
-        left: unset;
-      }
-      :host([selectable]) #select-border #select-bottom {
-        height: var(--uui-size-space-4);
-        top: unset;
-      }
-      :host([selectable]) #select-border #select-left {
-        width: var(--uui-size-space-4);
-        right: unset;
-      }
-
-      :host([selected]) #select-border {
-        opacity: 1;
-      }
-      :host([selectable]:not([selected]):hover) #select-border {
-        opacity: 0.33;
-      }
-      :host([selectable][selected]:hover) #select-border {
-        opacity: 0.8;
       }
 
-      :host([selectable]:not([selected])) #open-part:hover + #select-border {
-        opacity: 0;
-      }
-      :host([selectable][selected]) #open-part:hover + #select-border {
-        opacity: 1;
-      }
-
-      :host([selectable]:not([selected]):hover) #select-border::after {
-        animation: not-selected--hover 1.2s infinite;
-      }
-      @keyframes not-selected--hover {
-        0%,
-        100% {
-          opacity: 0.66;
-        }
-        50% {
-          opacity: 1;
-        }
-      }
-
-      :host([selectable][selected]:hover) #select-border::after {
-        animation: selected--hover 1.4s infinite;
-      }
-      @keyframes selected--hover {
-        0%,
-        100% {
-          opacity: 1;
-        }
-        50% {
-          opacity: 0.66;
-        }
+      :host(:focus) {
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus);
       }
-      :host([selectable]) #open-part:hover + #select-border::after {
-        animation: none;
+      :host([selected]) {
+        outline: 2px solid
+          var(--uui-table-row-color-selected, var(--uui-color-selected));
       }
-
-      :host([select-only]) *,
-      :host([select-only]) ::slotted(*) {
-        pointer-events: none;
+      :host([selected]:focus) {
+        outline-color: var(--uui-color-focus);
       }
     `,
   ];

From 2bb4b11ddf6be4c272139696e8bdb2bc93178c5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 26 Nov 2024 21:15:18 +0100
Subject: [PATCH 08/28] optimize code

---
 packages/uui-table/lib/uui-table-row.element.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/uui-table/lib/uui-table-row.element.ts b/packages/uui-table/lib/uui-table-row.element.ts
index 0c34a530f..aa188a3c5 100644
--- a/packages/uui-table/lib/uui-table-row.element.ts
+++ b/packages/uui-table/lib/uui-table-row.element.ts
@@ -56,17 +56,13 @@ export class UUITableRowElement extends SelectOnlyMixin(
   private updateChildSelectOnly() {
     if (this.slotCellNodes) {
       this.slotCellNodes.forEach(el => {
-        if (this.elementIsTableCell(el)) {
+        if (el instanceof UUITableCellElement) {
           el.disableChildInteraction = this.selectOnly;
         }
       });
     }
   }
 
-  private elementIsTableCell(element: unknown): element is UUITableCellElement {
-    return element instanceof UUITableCellElement;
-  }
-
   render() {
     return html` <slot @slotchanged=${this.updateChildSelectOnly}></slot> `;
   }

From ef1cbae9f0a4b91f575d334e5e02367e1dae9c70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 26 Nov 2024 21:16:52 +0100
Subject: [PATCH 09/28] revert to none preventing approach

---
 packages/uui-base/lib/mixins/SelectableMixin.ts | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/uui-base/lib/mixins/SelectableMixin.ts b/packages/uui-base/lib/mixins/SelectableMixin.ts
index 6903e63a4..9cb583ecc 100644
--- a/packages/uui-base/lib/mixins/SelectableMixin.ts
+++ b/packages/uui-base/lib/mixins/SelectableMixin.ts
@@ -113,15 +113,7 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
 
       if (isSelectable === false) return;
 
-      if (this.#selectableTarget === this) {
-        // If target is this, then only allow selection if the click is on the element itself.
-        if (e.composedPath().indexOf(this.#selectableTarget) === 0) {
-          if (e.type === 'keydown') {
-            e.preventDefault(); // Do not want the space key to trigger a page scroll.
-          }
-          this.#toggleSelect();
-        }
-      } else if (e.composedPath().indexOf(this.#selectableTarget) !== -1) {
+      if (e.composedPath().indexOf(this.#selectableTarget) !== -1) {
         if (e.type === 'keydown') {
           e.preventDefault(); // Do not want the space key to trigger a page scroll.
         }

From 2adab35df7e9888db9a44a387b91ffc6db5f9dd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 26 Nov 2024 21:21:14 +0100
Subject: [PATCH 10/28] media card selectable solution

---
 packages/uui-base/lib/mixins/SelectableMixin.ts    |  4 +++-
 .../uui-card-media/lib/uui-card-media.element.ts   |  7 +++++--
 .../uui-card-media/lib/uui-card-media.story.ts     | 14 ++++++++++++++
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/uui-base/lib/mixins/SelectableMixin.ts b/packages/uui-base/lib/mixins/SelectableMixin.ts
index 9cb583ecc..777c8aa99 100644
--- a/packages/uui-base/lib/mixins/SelectableMixin.ts
+++ b/packages/uui-base/lib/mixins/SelectableMixin.ts
@@ -104,7 +104,9 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
 
     readonly #onKeydown = (e: KeyboardEvent) => {
       if (e.code !== 'Space' && e.code !== 'Enter') return;
-      this.#onClick(e);
+      if (e.composedPath().indexOf(this.#selectableTarget) === 0) {
+        this.#onClick(e);
+      }
     };
 
     readonly #onClick = (e: Event) => {
diff --git a/packages/uui-card-media/lib/uui-card-media.element.ts b/packages/uui-card-media/lib/uui-card-media.element.ts
index b35a035ef..5ce0dc6ff 100644
--- a/packages/uui-card-media/lib/uui-card-media.element.ts
+++ b/packages/uui-card-media/lib/uui-card-media.element.ts
@@ -94,7 +94,8 @@ export class UUICardMediaElement extends UUICardElement {
             ifDefined(
               this.target === '_blank' ? 'noopener noreferrer' : undefined,
             ),
-        )}>
+        )}
+        @click=${(e: MouseEvent) => e.stopPropagation()}>
         ${this.#renderContent()}
       </a>
     `;
@@ -120,7 +121,9 @@ export class UUICardMediaElement extends UUICardElement {
       <div id="select-border"></div>
 
       <slot name="tag"></slot>
-      <slot name="actions"></slot>`;
+      <slot
+        name="actions"
+        @click=${(e: MouseEvent) => e.stopPropagation()}></slot>`;
   }
 
   static styles = [
diff --git a/packages/uui-card-media/lib/uui-card-media.story.ts b/packages/uui-card-media/lib/uui-card-media.story.ts
index b4b3b4160..6da715196 100644
--- a/packages/uui-card-media/lib/uui-card-media.story.ts
+++ b/packages/uui-card-media/lib/uui-card-media.story.ts
@@ -64,6 +64,20 @@ export const Actions: Story = {
   },
 };
 
+export const Href: Story = {
+  args: {
+    'actions slot': html`<uui-button
+      slot="actions"
+      look="secondary"
+      label="Remove"
+      >Remove</uui-button
+    >`,
+    selectable: true,
+    href: 'https://umbraco.com',
+    target: '_blank',
+  },
+};
+
 export const Image: Story = {
   args: {
     slot: html`<img src="https://placedog.net/1447/?random" alt="" />`,

From 04206382a8aab9d19f5ddb2520250d22d5a472ad Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 27 Nov 2024 11:32:00 +0100
Subject: [PATCH 11/28] install dependency

---
 package-lock.json | 1 +
 package.json      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 6e2f015f0..c5ac566e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,7 @@
         "@types/mocha": "^10.0.7",
         "@web/dev-server-esbuild": "0.4.3",
         "@web/test-runner": "0.18.2",
+        "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "0.11.0",
         "autoprefixer": "10.4.17",
         "babel-loader": "9.1.3",
diff --git a/package.json b/package.json
index 036901162..146bdf3b6 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
     "@types/mocha": "^10.0.7",
     "@web/dev-server-esbuild": "0.4.3",
     "@web/test-runner": "0.18.2",
+    "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "0.11.0",
     "autoprefixer": "10.4.17",
     "babel-loader": "9.1.3",

From 9f525e131717555c85639bd468a2c3be67d511d1 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 27 Nov 2024 11:32:46 +0100
Subject: [PATCH 12/28] add tests for uui-color-swatch selectable

---
 .../lib/uui-color-swatch.test.ts              | 41 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/packages/uui-color-swatch/lib/uui-color-swatch.test.ts b/packages/uui-color-swatch/lib/uui-color-swatch.test.ts
index 14a1710e7..fbb512d48 100644
--- a/packages/uui-color-swatch/lib/uui-color-swatch.test.ts
+++ b/packages/uui-color-swatch/lib/uui-color-swatch.test.ts
@@ -1,5 +1,6 @@
-import { html, fixture, expect } from '@open-wc/testing';
+import { html, fixture, expect, elementUpdated } from '@open-wc/testing';
 import { UUIColorSwatchElement } from './uui-color-swatch.element';
+import { sendMouse } from '@web/test-runner-commands';
 
 describe('UUIColorSwatchElement', () => {
   let element: UUIColorSwatchElement;
@@ -17,4 +18,42 @@ describe('UUIColorSwatchElement', () => {
   it('passes the a11y audit', async () => {
     await expect(element).shadowDom.to.be.accessible();
   });
+
+  describe('selectable', () => {
+    beforeEach(async () => {
+      element.selectable = true;
+    });
+
+    it('can be selected when selectable', async () => {
+      await elementUpdated(element);
+      await sendMouse({
+        type: 'click',
+        position: [15, 15],
+        button: 'left',
+      });
+      expect(element.selected).to.be.true;
+    });
+
+    it('can not be selected when not selectable', async () => {
+      element.selectable = false;
+      await elementUpdated(element);
+      await sendMouse({
+        type: 'click',
+        position: [15, 15],
+        button: 'left',
+      });
+      expect(element.selected).to.be.false;
+    });
+
+    it('cant be selected when disabled', async () => {
+      element.disabled = true;
+      await elementUpdated(element);
+      await sendMouse({
+        type: 'click',
+        position: [15, 15],
+        button: 'left',
+      });
+      expect(element.selected).to.be.false;
+    });
+  });
 });

From a1084724be21727de15cd7cde7a0c5e785e625d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 27 Nov 2024 11:40:34 +0100
Subject: [PATCH 13/28] expand stories

---
 packages/uui-ref-node/lib/uui-ref-node.story.ts | 8 +++++++-
 packages/uui-table/lib/uui-table-row.story.ts   | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/uui-ref-node/lib/uui-ref-node.story.ts b/packages/uui-ref-node/lib/uui-ref-node.story.ts
index ab9cf2d9c..fa0d7674a 100644
--- a/packages/uui-ref-node/lib/uui-ref-node.story.ts
+++ b/packages/uui-ref-node/lib/uui-ref-node.story.ts
@@ -16,7 +16,6 @@ const meta: Meta = {
   args: {
     name: 'Rabbit Suit Product Page',
     detail: 'path/to/nowhere',
-    href: 'umbraco.com',
   },
   render: args =>
     html`<uui-ref-node ${spread(args)}>${renderSlots(args)}</uui-ref-node>`,
@@ -56,6 +55,13 @@ export const Standalone: Story = {
   },
 };
 
+export const Href: Story = {
+  args: {
+    href: 'https://umbraco.com',
+    target: '_blank',
+  },
+};
+
 export const Selectable: Story = {
   args: {
     selectable: true,
diff --git a/packages/uui-table/lib/uui-table-row.story.ts b/packages/uui-table/lib/uui-table-row.story.ts
index 96b9b26bf..fe0ae9e65 100644
--- a/packages/uui-table/lib/uui-table-row.story.ts
+++ b/packages/uui-table/lib/uui-table-row.story.ts
@@ -23,7 +23,13 @@ const meta: Meta = {
         <uui-table-cell>
           <uui-input placeholder="Type your own thing"></uui-input>
         </uui-table-cell>
-        ${ArrayOfUmbracoWords(5).map(
+        <uui-table-cell>
+          <uui-button label="some button"></uui-button>
+        </uui-table-cell>
+        <uui-table-cell>
+          <a href="http://www.umbraco.com" target="_blank">Link</a>
+        </uui-table-cell>
+        ${ArrayOfUmbracoWords(3).map(
           el => html`<uui-table-cell>${el}</uui-table-cell>`,
         )}
       </uui-table-row>

From 582bb93cb3789b678c0e1cf36708b840f4d2f682 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 27 Nov 2024 11:58:20 +0100
Subject: [PATCH 14/28] selection mixing is selective about targets when
 selectable target is not changed

---
 .../uui-base/lib/mixins/SelectableMixin.ts    | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/uui-base/lib/mixins/SelectableMixin.ts b/packages/uui-base/lib/mixins/SelectableMixin.ts
index 777c8aa99..a14c5d13f 100644
--- a/packages/uui-base/lib/mixins/SelectableMixin.ts
+++ b/packages/uui-base/lib/mixins/SelectableMixin.ts
@@ -115,7 +115,26 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
 
       if (isSelectable === false) return;
 
-      if (e.composedPath().indexOf(this.#selectableTarget) !== -1) {
+      const composePath = e.composedPath();
+
+      if (this.#selectableTarget === this) {
+        // the selectableTarget is not specified which means we need to be selective about what we accept events from.
+        const isActionTag = composePath.some(el => {
+          const elementTagName = (el as HTMLElement).tagName;
+          return (
+            elementTagName === 'A' ||
+            elementTagName === 'BUTTON' ||
+            elementTagName === 'INPUT' ||
+            elementTagName === 'TEXTAREA' ||
+            elementTagName === 'SELECT'
+          );
+        });
+
+        // never select when clicking on a link or button
+        if (isActionTag) return;
+      }
+
+      if (composePath.indexOf(this.#selectableTarget) !== -1) {
         if (e.type === 'keydown') {
           e.preventDefault(); // Do not want the space key to trigger a page scroll.
         }

From 8adfe875b87b0a9a06fbb1ef566c953be091cf7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 27 Nov 2024 12:03:58 +0100
Subject: [PATCH 15/28] clean up

---
 packages/uui-card-media/lib/uui-card-media.element.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/uui-card-media/lib/uui-card-media.element.ts b/packages/uui-card-media/lib/uui-card-media.element.ts
index 5ce0dc6ff..b35a035ef 100644
--- a/packages/uui-card-media/lib/uui-card-media.element.ts
+++ b/packages/uui-card-media/lib/uui-card-media.element.ts
@@ -94,8 +94,7 @@ export class UUICardMediaElement extends UUICardElement {
             ifDefined(
               this.target === '_blank' ? 'noopener noreferrer' : undefined,
             ),
-        )}
-        @click=${(e: MouseEvent) => e.stopPropagation()}>
+        )}>
         ${this.#renderContent()}
       </a>
     `;
@@ -121,9 +120,7 @@ export class UUICardMediaElement extends UUICardElement {
       <div id="select-border"></div>
 
       <slot name="tag"></slot>
-      <slot
-        name="actions"
-        @click=${(e: MouseEvent) => e.stopPropagation()}></slot>`;
+      <slot name="actions"></slot>`;
   }
 
   static styles = [

From d61f99a421b8f212ac72a78d1e54d1eabe5e27b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 27 Nov 2024 12:06:31 +0100
Subject: [PATCH 16/28] fix

---
 packages/uui-table/lib/uui-table-row.element.ts | 10 +++++-----
 packages/uui-table/lib/uui-table-row.story.ts   |  8 ++++++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/uui-table/lib/uui-table-row.element.ts b/packages/uui-table/lib/uui-table-row.element.ts
index aa188a3c5..40458296d 100644
--- a/packages/uui-table/lib/uui-table-row.element.ts
+++ b/packages/uui-table/lib/uui-table-row.element.ts
@@ -6,8 +6,6 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement } from 'lit';
 import { queryAssignedElements } from 'lit/decorators.js';
 
-import { UUITableCellElement } from './uui-table-cell.element';
-
 /**
  *  Table row element with option to set is as selectable. Parent for uui-table-cell. Must be a child of uui-table.
  *  @element uui-table-row
@@ -50,13 +48,15 @@ export class UUITableRowElement extends SelectOnlyMixin(
   private slotCellNodes?: unknown[];
 
   protected updated(changedProperties: Map<string | number | symbol, unknown>) {
-    if (changedProperties.has('selectOnly')) this.updateChildSelectOnly();
+    if (changedProperties.has('selectOnly')) {
+      this.updateChildSelectOnly();
+    }
   }
 
   private updateChildSelectOnly() {
     if (this.slotCellNodes) {
-      this.slotCellNodes.forEach(el => {
-        if (el instanceof UUITableCellElement) {
+      this.slotCellNodes.forEach((el: any) => {
+        if (el.disableChildInteraction !== undefined) {
           el.disableChildInteraction = this.selectOnly;
         }
       });
diff --git a/packages/uui-table/lib/uui-table-row.story.ts b/packages/uui-table/lib/uui-table-row.story.ts
index fe0ae9e65..66456ace4 100644
--- a/packages/uui-table/lib/uui-table-row.story.ts
+++ b/packages/uui-table/lib/uui-table-row.story.ts
@@ -4,6 +4,10 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { ArrayOfUmbracoWords } from '../../../storyhelpers/UmbracoWordGenerator';
 
+import '@umbraco-ui/uui-table';
+import '@umbraco-ui/uui-input';
+import '@umbraco-ui/uui-button';
+
 const meta: Meta = {
   id: 'uui-table-row',
   component: 'uui-table-row',
@@ -12,14 +16,14 @@ const meta: Meta = {
     <uui-table>
       <uui-table-row
         ?selectable=${args.selectable}
-        ?selectOnly=${args.selectOnly}>
+        ?select-only=${args.selectOnly}>
         ${ArrayOfUmbracoWords(5).map(
           el => html`<uui-table-cell>${el}</uui-table-cell>`,
         )}
       </uui-table-row>
       <uui-table-row
         ?selectable=${args.selectable}
-        ?selectOnly=${args.selectOnly}>
+        ?select-only=${args.selectOnly}>
         <uui-table-cell>
           <uui-input placeholder="Type your own thing"></uui-input>
         </uui-table-cell>

From 2ee888668d7173ce25d5761b8b89217dc034ffcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 27 Nov 2024 12:17:50 +0100
Subject: [PATCH 17/28] fix test

---
 packages/uui-table/lib/uui-table-row.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/uui-table/lib/uui-table-row.test.ts b/packages/uui-table/lib/uui-table-row.test.ts
index 856dd8e13..55382f915 100644
--- a/packages/uui-table/lib/uui-table-row.test.ts
+++ b/packages/uui-table/lib/uui-table-row.test.ts
@@ -6,7 +6,7 @@ import {
   oneEvent,
 } from '@open-wc/testing';
 
-import './uui-table.element';
+import '.';
 import { UUITableRowElement } from './uui-table-row.element';
 
 describe('UuiTableRow', () => {
@@ -51,7 +51,7 @@ describe('UuiTableRow', () => {
       it('emits a selected event when selectable', async () => {
         element.selectable = true;
         await elementUpdated(element);
-        const listener = oneEvent(element, 'selected', false);
+        const listener = oneEvent(element, 'selected');
         element.click();
         const event = await listener;
         expect(event).to.exist;

From 5ac142fb02da19ebb51a7776073600f0238f1cfb Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 27 Nov 2024 12:27:53 +0100
Subject: [PATCH 18/28] test keyboard interaction

---
 .../lib/uui-color-swatch.test.ts              | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/uui-color-swatch/lib/uui-color-swatch.test.ts b/packages/uui-color-swatch/lib/uui-color-swatch.test.ts
index fbb512d48..7b1b2e8a8 100644
--- a/packages/uui-color-swatch/lib/uui-color-swatch.test.ts
+++ b/packages/uui-color-swatch/lib/uui-color-swatch.test.ts
@@ -1,6 +1,6 @@
 import { html, fixture, expect, elementUpdated } from '@open-wc/testing';
 import { UUIColorSwatchElement } from './uui-color-swatch.element';
-import { sendMouse } from '@web/test-runner-commands';
+import { sendMouse, sendKeys } from '@web/test-runner-commands';
 
 describe('UUIColorSwatchElement', () => {
   let element: UUIColorSwatchElement;
@@ -55,5 +55,35 @@ describe('UUIColorSwatchElement', () => {
       });
       expect(element.selected).to.be.false;
     });
+
+    it('can be selected with Space key', async () => {
+      await sendKeys({
+        press: 'Tab',
+      });
+      await sendKeys({
+        press: 'Space',
+      });
+      expect(element.selected).to.be.true;
+
+      await sendKeys({
+        press: 'Space',
+      });
+      expect(element.selected).to.be.false;
+    });
+
+    it('can be selected with Enter key', async () => {
+      await sendKeys({
+        press: 'Tab',
+      });
+      await sendKeys({
+        press: 'Enter',
+      });
+      expect(element.selected).to.be.true;
+
+      await sendKeys({
+        press: 'Enter',
+      });
+      expect(element.selected).to.be.false;
+    });
   });
 });

From a7290ee17ae7901e5f0ec446c5a8e4d44c91ed05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 27 Nov 2024 12:42:51 +0100
Subject: [PATCH 19/28] focus for swatch

---
 packages/uui-color-swatch/lib/uui-color-swatch.element.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
index 44dc55ef1..aa52fa2f2 100644
--- a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
+++ b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
@@ -110,6 +110,10 @@ export class UUIColorSwatchElement extends LabelMixin(
     }
   }
 
+  focus(options?: FocusOptions | undefined): void {
+    (this.selectableTarget as HTMLElement | undefined)?.focus(options);
+  }
+
   #selectButtonChanged(button?: Element | undefined) {
     this.selectableTarget = button || this;
   }

From 83351883aea3824144c99e6d4198dc5956557a3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 27 Nov 2024 12:43:05 +0100
Subject: [PATCH 20/28] menu item select only correction

---
 packages/uui-menu-item/lib/uui-menu-item.element.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/uui-menu-item/lib/uui-menu-item.element.ts b/packages/uui-menu-item/lib/uui-menu-item.element.ts
index 184ec37e0..5c39465b5 100644
--- a/packages/uui-menu-item/lib/uui-menu-item.element.ts
+++ b/packages/uui-menu-item/lib/uui-menu-item.element.ts
@@ -226,12 +226,12 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
                 ?open=${this.showChildren}></uui-symbol-expand>
             </button>`
           : ''}
-        ${this.href ? this._renderLabelAsAnchor() : this._renderLabelAsButton()}
+        ${this.href && !this.selectOnly
+          ? this._renderLabelAsAnchor()
+          : this._renderLabelAsButton()}
 
         <div id="label-button-background"></div>
-        ${this.selectOnly === false
-          ? html`<slot id="actions-container" name="actions"></slot>`
-          : ''}
+        <slot id="actions-container" name="actions"></slot>
         ${this.loading
           ? html`<uui-loader-bar id="loader"></uui-loader-bar>`
           : ''}

From 3287111305a02990f54ca0fcb78d68e071a9c331 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 27 Nov 2024 12:45:26 +0100
Subject: [PATCH 21/28] clean up tests

---
 .../uui-menu-item/lib/uui-menu-item.test.ts   | 36 +++++--------------
 1 file changed, 8 insertions(+), 28 deletions(-)

diff --git a/packages/uui-menu-item/lib/uui-menu-item.test.ts b/packages/uui-menu-item/lib/uui-menu-item.test.ts
index d86102763..f701ab528 100644
--- a/packages/uui-menu-item/lib/uui-menu-item.test.ts
+++ b/packages/uui-menu-item/lib/uui-menu-item.test.ts
@@ -116,7 +116,7 @@ describe('UUIMenuItemElement', () => {
         element.addEventListener(UUISelectableEvent.SELECTED, e => {
           e.preventDefault();
         });
-        const listener = oneEvent(element, UUISelectableEvent.SELECTED, false);
+        const listener = oneEvent(element, UUISelectableEvent.SELECTED);
         labelElement.click();
         const event = await listener;
         expect(event).to.exist;
@@ -136,11 +136,7 @@ describe('UUIMenuItemElement', () => {
         element.addEventListener(UUISelectableEvent.DESELECTED, e => {
           e.preventDefault();
         });
-        const listener = oneEvent(
-          element,
-          UUISelectableEvent.DESELECTED,
-          false,
-        );
+        const listener = oneEvent(element, UUISelectableEvent.DESELECTED);
         labelElement.click();
         const event = await listener;
         expect(event).to.exist;
@@ -156,11 +152,7 @@ describe('UUIMenuItemElement', () => {
         const labelElement = element.shadowRoot!.querySelector(
           '#caret-button',
         ) as HTMLElement;
-        const listener = oneEvent(
-          element,
-          UUIMenuItemEvent.SHOW_CHILDREN,
-          false,
-        );
+        const listener = oneEvent(element, UUIMenuItemEvent.SHOW_CHILDREN);
         labelElement.click();
         const event = await listener;
         expect(event).to.exist;
@@ -176,11 +168,7 @@ describe('UUIMenuItemElement', () => {
         element.addEventListener(UUIMenuItemEvent.SHOW_CHILDREN, e => {
           e.preventDefault();
         });
-        const listener = oneEvent(
-          element,
-          UUIMenuItemEvent.SHOW_CHILDREN,
-          false,
-        );
+        const listener = oneEvent(element, UUIMenuItemEvent.SHOW_CHILDREN);
         labelElement.click();
         const event = await listener;
         expect(event).to.exist;
@@ -197,11 +185,7 @@ describe('UUIMenuItemElement', () => {
         const labelElement = element.shadowRoot!.querySelector(
           '#caret-button',
         ) as HTMLElement;
-        const listener = oneEvent(
-          element,
-          UUIMenuItemEvent.HIDE_CHILDREN,
-          false,
-        );
+        const listener = oneEvent(element, UUIMenuItemEvent.HIDE_CHILDREN);
         labelElement.click();
         const event = await listener;
         expect(event).to.exist;
@@ -218,11 +202,7 @@ describe('UUIMenuItemElement', () => {
         element.addEventListener(UUIMenuItemEvent.HIDE_CHILDREN, e => {
           e.preventDefault();
         });
-        const listener = oneEvent(
-          element,
-          UUIMenuItemEvent.HIDE_CHILDREN,
-          false,
-        );
+        const listener = oneEvent(element, UUIMenuItemEvent.HIDE_CHILDREN);
         labelElement.click();
         const event = await listener;
         expect(event).to.exist;
@@ -263,7 +243,7 @@ describe('UUIMenuItemElement', () => {
     it('emits a show-children event when expand icon is clicked', async () => {
       element.setAttribute('has-children', 'true');
       await elementUpdated(element);
-      const listener = oneEvent(element, 'show-children', false);
+      const listener = oneEvent(element, 'show-children');
       const caretIconElement: HTMLElement | null =
         element.shadowRoot!.querySelector('#caret-button');
       caretIconElement?.click();
@@ -277,7 +257,7 @@ describe('UUIMenuItemElement', () => {
       element.setAttribute('has-children', 'true');
       element.setAttribute('show-children', 'true');
       await elementUpdated(element);
-      const listener = oneEvent(element, 'hide-children', false);
+      const listener = oneEvent(element, 'hide-children');
       const caretIconElement: HTMLElement | null =
         element.shadowRoot!.querySelector('#caret-button');
       caretIconElement?.click();

From 076392e7dedd5d56c11f236b657b41b9e82bb35e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 27 Nov 2024 12:46:18 +0100
Subject: [PATCH 22/28] clean up

---
 packages/uui-menu-item/lib/uui-menu-item.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/uui-menu-item/lib/uui-menu-item.test.ts b/packages/uui-menu-item/lib/uui-menu-item.test.ts
index f701ab528..240b5841f 100644
--- a/packages/uui-menu-item/lib/uui-menu-item.test.ts
+++ b/packages/uui-menu-item/lib/uui-menu-item.test.ts
@@ -90,7 +90,7 @@ describe('UUIMenuItemElement', () => {
 
   describe('events', () => {
     it('emits a click-label event when button is clicked', async () => {
-      const listener = oneEvent(element, UUIMenuItemEvent.CLICK_LABEL, false);
+      const listener = oneEvent(element, UUIMenuItemEvent.CLICK_LABEL);
 
       const buttonElement = element.shadowRoot!.querySelector(
         'button#label-button',

From 6bda176cb5d56029f8ea365b6adf91f7ce81139e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 27 Nov 2024 13:17:54 +0100
Subject: [PATCH 23/28] only set tabindex on this targets

---
 .../uui-base/lib/mixins/SelectableMixin.ts    | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/uui-base/lib/mixins/SelectableMixin.ts b/packages/uui-base/lib/mixins/SelectableMixin.ts
index a14c5d13f..2fa734f16 100644
--- a/packages/uui-base/lib/mixins/SelectableMixin.ts
+++ b/packages/uui-base/lib/mixins/SelectableMixin.ts
@@ -56,10 +56,13 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
       this._selectable = newVal;
 
       // Potentially problematic as a component might need focus for another feature when not selectable:
-      //if (this.#selectableTarget === this) {
-      // If the selectable target, then make it self selectable. (A different selectable target should be made focusable by the component itself)
-      this.#selectableTarget.setAttribute('tabindex', `${newVal ? '0' : '-1'}`);
-      //}
+      if (this.#selectableTarget === this) {
+        // If the selectable target, then make it self selectable. (A different selectable target should be made focusable by the component itself)
+        this.#selectableTarget.setAttribute(
+          'tabindex',
+          `${newVal ? '0' : '-1'}`,
+        );
+      }
       this.requestUpdate('selectable', oldVal);
     }
 
@@ -88,10 +91,13 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
       );
 
       this.#selectableTarget = target as Element;
-      this.#selectableTarget.setAttribute(
-        'tabindex',
-        this._selectable ? '0' : '-1',
-      );
+      if (this.#selectableTarget === this) {
+        // If the selectable target, then make it self selectable. (A different selectable target should be made focusable by the component itself)
+        this.#selectableTarget.setAttribute(
+          'tabindex',
+          this._selectable ? '0' : '-1',
+        );
+      }
       target.addEventListener('click', this.#onClick);
       target.addEventListener('keydown', this.#onKeydown as EventListener);
     }

From 0a9c15c754111dbba8b9024a7940ab7f51801eaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 27 Nov 2024 13:18:09 +0100
Subject: [PATCH 24/28] prevent click-label when select only

---
 packages/uui-menu-item/lib/uui-menu-item.element.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/uui-menu-item/lib/uui-menu-item.element.ts b/packages/uui-menu-item/lib/uui-menu-item.element.ts
index 5c39465b5..ce25e25d4 100644
--- a/packages/uui-menu-item/lib/uui-menu-item.element.ts
+++ b/packages/uui-menu-item/lib/uui-menu-item.element.ts
@@ -163,10 +163,11 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
     this.showChildren = !this.showChildren;
   };
 
-  private _onLabelClicked = () => {
+  #onLabelClicked() {
+    if (this.selectOnly) return;
     const event = new UUIMenuItemEvent(UUIMenuItemEvent.CLICK_LABEL);
     this.dispatchEvent(event);
-  };
+  }
 
   private _renderLabelInside() {
     return html` <slot
@@ -195,7 +196,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
             this.target === '_blank' ? 'noopener noreferrer' : undefined,
           ),
       )}
-      @click=${this._onLabelClicked}
+      @click=${this.#onLabelClicked}
       ?disabled=${this.disabled}
       aria-label="${this.label}">
       ${this._renderLabelInside()}
@@ -206,7 +207,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
     return html` <button
       id="label-button"
       ${ref(this._labelButtonChanged)}
-      @click=${this._onLabelClicked}
+      @click=${this.#onLabelClicked}
       ?disabled=${this.disabled}
       aria-label="${this.label}">
       ${this._renderLabelInside()}
@@ -226,7 +227,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
                 ?open=${this.showChildren}></uui-symbol-expand>
             </button>`
           : ''}
-        ${this.href && !this.selectOnly
+        ${this.href && this.selectOnly !== true && this.selectable !== true
           ? this._renderLabelAsAnchor()
           : this._renderLabelAsButton()}
 

From 625585611eb0fdd74d2c22aed1f9ba7f26c04fef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 27 Nov 2024 13:18:23 +0100
Subject: [PATCH 25/28] story and tests

---
 .../uui-menu-item/lib/uui-menu-item.story.ts  |  6 ++
 .../uui-menu-item/lib/uui-menu-item.test.ts   | 65 +++++++++++++++++++
 2 files changed, 71 insertions(+)

diff --git a/packages/uui-menu-item/lib/uui-menu-item.story.ts b/packages/uui-menu-item/lib/uui-menu-item.story.ts
index 525fca885..3c08cc08b 100644
--- a/packages/uui-menu-item/lib/uui-menu-item.story.ts
+++ b/packages/uui-menu-item/lib/uui-menu-item.story.ts
@@ -163,6 +163,12 @@ export const Selectable: Story = {
     selectable: true,
   },
 };
+export const SelectOnly: Story = {
+  args: {
+    selectable: true,
+    selectOnly: true,
+  },
+};
 
 export const Anchor: Story = {
   args: {
diff --git a/packages/uui-menu-item/lib/uui-menu-item.test.ts b/packages/uui-menu-item/lib/uui-menu-item.test.ts
index 240b5841f..4c4b632d6 100644
--- a/packages/uui-menu-item/lib/uui-menu-item.test.ts
+++ b/packages/uui-menu-item/lib/uui-menu-item.test.ts
@@ -304,6 +304,71 @@ describe('UUIMenuItemElement', () => {
       labelElement?.click();
       expect(element.selected).to.be.false;
     });
+
+    it('can expand', async () => {
+      element.setAttribute('has-children', 'true');
+      await elementUpdated(element);
+      const listener = oneEvent(element, 'show-children');
+      const caretIconElement: HTMLElement | null =
+        element.shadowRoot!.querySelector('#caret-button');
+      caretIconElement?.click();
+      const event = await listener;
+      expect(event).to.exist;
+      expect(event.type).to.equal('show-children');
+      expect(element.hasAttribute('show-children')).to.equal(true);
+    });
+  });
+
+  describe('selectable & selectOnly', () => {
+    let labelElement: HTMLElement | null;
+
+    beforeEach(async () => {
+      labelElement = element.shadowRoot!.querySelector('#label-button');
+      element.selectable = true;
+      element.selectOnly = true;
+    });
+
+    it('label element is defined', () => {
+      expect(labelElement).to.be.instanceOf(HTMLElement);
+    });
+
+    it('label is rendered as a button tag', async () => {
+      await elementUpdated(element);
+      expect(labelElement?.nodeName).to.be.equal('BUTTON');
+    });
+
+    it('can be selected when selectable', async () => {
+      await elementUpdated(element);
+      labelElement?.click();
+      expect(element.selected).to.be.true;
+    });
+
+    it('can not be selected when not selectable', async () => {
+      element.selectable = false;
+      await elementUpdated(element);
+      labelElement?.click();
+      expect(element.selected).to.be.false;
+    });
+
+    it('can be selected when selectable', async () => {
+      element.disabled = true;
+      await elementUpdated(element);
+      labelElement?.click();
+      expect(element.selected).to.be.false;
+    });
+
+    it('can expand', async () => {
+      element.setAttribute('has-children', 'true');
+      await elementUpdated(element);
+      const listener = oneEvent(element, 'show-children');
+      const caretIconElement: HTMLElement | null =
+        element.shadowRoot!.querySelector('#caret-button');
+      caretIconElement?.click();
+      const event = await listener;
+      expect(event).to.exist;
+      expect(event.type).to.equal('show-children');
+      expect(element.hasAttribute('show-children')).to.equal(true);
+    });
   });
 
   describe('HREF', () => {

From 41014f8a49e82510c2f612394e62aaee8409860b Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 27 Nov 2024 13:24:21 +0100
Subject: [PATCH 26/28] use send mouse

---
 .../uui-menu-item/lib/uui-menu-item.test.ts   | 39 +++++++++++++++----
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/packages/uui-menu-item/lib/uui-menu-item.test.ts b/packages/uui-menu-item/lib/uui-menu-item.test.ts
index 4c4b632d6..e2c779b8a 100644
--- a/packages/uui-menu-item/lib/uui-menu-item.test.ts
+++ b/packages/uui-menu-item/lib/uui-menu-item.test.ts
@@ -10,6 +10,7 @@ import '@umbraco-ui/uui-loader-bar/lib';
 import { UUIMenuItemElement } from './uui-menu-item.element';
 import { UUIMenuItemEvent } from './UUIMenuItemEvent';
 import { UUISelectableEvent } from '@umbraco-ui/uui-base/lib/events';
+import { sendMouse } from '@web/test-runner-commands';
 
 describe('UUIMenuItemElement', () => {
   let element: UUIMenuItemElement;
@@ -287,21 +288,33 @@ describe('UUIMenuItemElement', () => {
 
     it('can be selected when selectable', async () => {
       await elementUpdated(element);
-      labelElement?.click();
+      await sendMouse({
+        type: 'click',
+        position: [75, 30],
+        button: 'left',
+      });
       expect(element.selected).to.be.true;
     });
 
     it('can not be selected when not selectable', async () => {
       element.selectable = false;
       await elementUpdated(element);
-      labelElement?.click();
+      await sendMouse({
+        type: 'click',
+        position: [75, 30],
+        button: 'left',
+      });
       expect(element.selected).to.be.false;
     });
 
     it('can be selected when selectable', async () => {
       element.disabled = true;
       await elementUpdated(element);
-      labelElement?.click();
+      await sendMouse({
+        type: 'click',
+        position: [75, 30],
+        button: 'left',
+      });
       expect(element.selected).to.be.false;
     });
 
@@ -339,21 +352,33 @@ describe('UUIMenuItemElement', () => {
 
     it('can be selected when selectable', async () => {
       await elementUpdated(element);
-      labelElement?.click();
+      await sendMouse({
+        type: 'click',
+        position: [75, 30],
+        button: 'left',
+      });
       expect(element.selected).to.be.true;
     });
 
     it('can not be selected when not selectable', async () => {
       element.selectable = false;
       await elementUpdated(element);
-      labelElement?.click();
+      await sendMouse({
+        type: 'click',
+        position: [75, 30],
+        button: 'left',
+      });
       expect(element.selected).to.be.false;
     });
 
-    it('can be selected when selectable', async () => {
+    it('can not be selected when disabled', async () => {
       element.disabled = true;
       await elementUpdated(element);
-      labelElement?.click();
+      await sendMouse({
+        type: 'click',
+        position: [75, 30],
+        button: 'left',
+      });
       expect(element.selected).to.be.false;
     });
 

From 605dcab7280a15d1b580aba438cafcc6bcae926b Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 27 Nov 2024 13:24:52 +0100
Subject: [PATCH 27/28] update title

---
 packages/uui-menu-item/lib/uui-menu-item.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/uui-menu-item/lib/uui-menu-item.test.ts b/packages/uui-menu-item/lib/uui-menu-item.test.ts
index e2c779b8a..0be1ac91e 100644
--- a/packages/uui-menu-item/lib/uui-menu-item.test.ts
+++ b/packages/uui-menu-item/lib/uui-menu-item.test.ts
@@ -307,7 +307,7 @@ describe('UUIMenuItemElement', () => {
       expect(element.selected).to.be.false;
     });
 
-    it('can be selected when selectable', async () => {
+    it('can not be selected when disabled', async () => {
       element.disabled = true;
       await elementUpdated(element);
       await sendMouse({

From fd83e1b70a68c8194a6fece6f7281960be937204 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 27 Nov 2024 13:47:31 +0100
Subject: [PATCH 28/28] wrap tests

---
 .../uui-menu-item/lib/uui-menu-item.test.ts   | 640 +++++++++---------
 1 file changed, 321 insertions(+), 319 deletions(-)

diff --git a/packages/uui-menu-item/lib/uui-menu-item.test.ts b/packages/uui-menu-item/lib/uui-menu-item.test.ts
index 0be1ac91e..dfc2aa15b 100644
--- a/packages/uui-menu-item/lib/uui-menu-item.test.ts
+++ b/packages/uui-menu-item/lib/uui-menu-item.test.ts
@@ -13,386 +13,388 @@ import { UUISelectableEvent } from '@umbraco-ui/uui-base/lib/events';
 import { sendMouse } from '@web/test-runner-commands';
 
 describe('UUIMenuItemElement', () => {
-  let element: UUIMenuItemElement;
-
-  beforeEach(async () => {
-    element = await fixture(
-      html`<uui-menu-item label="menuitem"></uui-menu-item>`,
-    );
-  });
-
-  it('is defined', () => {
-    expect(element).to.be.instanceOf(UUIMenuItemElement);
-  });
-
-  it('passes the a11y audit', async () => {
-    await expect(element).shadowDom.to.be.accessible();
-  });
-
-  it('passes the a11y audit with nesting', async () => {
-    element = await fixture(
-      html`<uui-menu-item label="menuitem" has-children>
-        <uui-menu-item label="sub-menuitem"></uui-menu-item>
-        <uui-menu-item label="sub-menuitem"></uui-menu-item>
-      </uui-menu-item>`,
-    );
-    await expect(element).shadowDom.to.be.accessible();
-  });
+  describe('element', () => {
+    let element: UUIMenuItemElement;
 
-  describe('properties', () => {
-    it('has a disabled property', () => {
-      expect(element).to.have.property('disabled');
-    });
-    it('disable property defaults to false', () => {
-      expect(element.disabled).to.false;
+    beforeEach(async () => {
+      element = await fixture(
+        html`<uui-menu-item label="menuitem"></uui-menu-item>`,
+      );
     });
 
-    it('has a showChildren property', () => {
-      expect(element).to.have.property('showChildren');
-    });
-    it('showChildren property defaults to false', () => {
-      expect(element.showChildren).to.false;
+    it('is defined', () => {
+      expect(element).to.be.instanceOf(UUIMenuItemElement);
     });
 
-    it('has a hasChildren property', () => {
-      expect(element).to.have.property('hasChildren');
-    });
-    it('hasChildren property defaults to false', () => {
-      expect(element.hasChildren).to.false;
+    it('passes the a11y audit', async () => {
+      await expect(element).shadowDom.to.be.accessible();
     });
 
-    it('has a loading property', () => {
-      expect(element).to.have.property('loading');
-    });
-    it('loading property defaults to false', () => {
-      expect(element.loading).to.false;
+    it('passes the a11y audit with nesting', async () => {
+      element = await fixture(
+        html`<uui-menu-item label="menuitem" has-children>
+          <uui-menu-item label="sub-menuitem"></uui-menu-item>
+          <uui-menu-item label="sub-menuitem"></uui-menu-item>
+        </uui-menu-item>`,
+      );
+      await expect(element).shadowDom.to.be.accessible();
     });
 
-    it('has a href property', () => {
-      expect(element).to.have.property('href');
-    });
+    describe('properties', () => {
+      it('has a disabled property', () => {
+        expect(element).to.have.property('disabled');
+      });
+      it('disable property defaults to false', () => {
+        expect(element.disabled).to.false;
+      });
 
-    it('has a target property', () => {
-      expect(element).to.have.property('target');
-    });
+      it('has a showChildren property', () => {
+        expect(element).to.have.property('showChildren');
+      });
+      it('showChildren property defaults to false', () => {
+        expect(element.showChildren).to.false;
+      });
 
-    it('has a rel property', () => {
-      expect(element).to.have.property('rel');
-    });
+      it('has a hasChildren property', () => {
+        expect(element).to.have.property('hasChildren');
+      });
+      it('hasChildren property defaults to false', () => {
+        expect(element.hasChildren).to.false;
+      });
 
-    it('has a select-mode property', () => {
-      expect(element).to.have.property('selectMode');
-    });
+      it('has a loading property', () => {
+        expect(element).to.have.property('loading');
+      });
+      it('loading property defaults to false', () => {
+        expect(element.loading).to.false;
+      });
 
-    it('select-mode property defaults to undefined', () => {
-      expect(element.selectMode).to.undefined;
-    });
-  });
+      it('has a href property', () => {
+        expect(element).to.have.property('href');
+      });
 
-  describe('events', () => {
-    it('emits a click-label event when button is clicked', async () => {
-      const listener = oneEvent(element, UUIMenuItemEvent.CLICK_LABEL);
-
-      const buttonElement = element.shadowRoot!.querySelector(
-        'button#label-button',
-      ) as HTMLButtonElement;
-      expect(buttonElement).to.exist;
-      buttonElement.click();
-
-      const event = await listener;
-      expect(event).to.exist;
-      expect(event.type).to.equal(UUIMenuItemEvent.CLICK_LABEL);
-      expect(event.bubbles).to.be.false;
-      expect(event.composed).to.be.false;
-      expect(event!.target).to.equal(element);
-    });
+      it('has a target property', () => {
+        expect(element).to.have.property('target');
+      });
 
-    describe('select', async () => {
-      it('emits a cancelable selected event when selectable', async () => {
-        element.selectable = true;
-        await elementUpdated(element);
-        const labelElement = element.shadowRoot!.querySelector(
-          '#label-button',
-        ) as HTMLElement;
-        element.addEventListener(UUISelectableEvent.SELECTED, e => {
-          e.preventDefault();
-        });
-        const listener = oneEvent(element, UUISelectableEvent.SELECTED);
-        labelElement.click();
-        const event = await listener;
-        expect(event).to.exist;
-        expect(event.type).to.equal(UUISelectableEvent.SELECTED);
-        expect(element.selected).to.be.false;
+      it('has a rel property', () => {
+        expect(element).to.have.property('rel');
       });
-    });
 
-    describe('deselect', async () => {
-      it('emits a cancelable deselected event when preselected', async () => {
-        element.selectable = true;
-        element.selected = true;
-        await elementUpdated(element);
-        const labelElement = element.shadowRoot!.querySelector(
-          '#label-button',
-        ) as HTMLElement;
-        element.addEventListener(UUISelectableEvent.DESELECTED, e => {
-          e.preventDefault();
-        });
-        const listener = oneEvent(element, UUISelectableEvent.DESELECTED);
-        labelElement.click();
-        const event = await listener;
-        expect(event).to.exist;
-        expect(event.type).to.equal(UUISelectableEvent.DESELECTED);
-        expect(element.selected).to.be.true;
+      it('has a select-mode property', () => {
+        expect(element).to.have.property('selectMode');
+      });
+
+      it('select-mode property defaults to undefined', () => {
+        expect(element.selectMode).to.undefined;
       });
     });
 
-    describe('show-children', async () => {
-      it('emits a show-children event when expanded', async () => {
-        element.hasChildren = true;
-        await elementUpdated(element);
-        const labelElement = element.shadowRoot!.querySelector(
-          '#caret-button',
-        ) as HTMLElement;
-        const listener = oneEvent(element, UUIMenuItemEvent.SHOW_CHILDREN);
-        labelElement.click();
+    describe('events', () => {
+      it('emits a click-label event when button is clicked', async () => {
+        const listener = oneEvent(element, UUIMenuItemEvent.CLICK_LABEL);
+
+        const buttonElement = element.shadowRoot!.querySelector(
+          'button#label-button',
+        ) as HTMLButtonElement;
+        expect(buttonElement).to.exist;
+        buttonElement.click();
+
         const event = await listener;
         expect(event).to.exist;
-        expect(event.type).to.equal(UUIMenuItemEvent.SHOW_CHILDREN);
-        expect(element.showChildren).to.be.true;
+        expect(event.type).to.equal(UUIMenuItemEvent.CLICK_LABEL);
+        expect(event.bubbles).to.be.false;
+        expect(event.composed).to.be.false;
+        expect(event!.target).to.equal(element);
       });
-      it('emits a cancelable show-children event when expanded', async () => {
-        element.hasChildren = true;
-        await elementUpdated(element);
-        const labelElement = element.shadowRoot!.querySelector(
-          '#caret-button',
-        ) as HTMLElement;
-        element.addEventListener(UUIMenuItemEvent.SHOW_CHILDREN, e => {
-          e.preventDefault();
+
+      describe('select', async () => {
+        it('emits a cancelable selected event when selectable', async () => {
+          element.selectable = true;
+          await elementUpdated(element);
+          const labelElement = element.shadowRoot!.querySelector(
+            '#label-button',
+          ) as HTMLElement;
+          element.addEventListener(UUISelectableEvent.SELECTED, e => {
+            e.preventDefault();
+          });
+          const listener = oneEvent(element, UUISelectableEvent.SELECTED);
+          labelElement.click();
+          const event = await listener;
+          expect(event).to.exist;
+          expect(event.type).to.equal(UUISelectableEvent.SELECTED);
+          expect(element.selected).to.be.false;
         });
-        const listener = oneEvent(element, UUIMenuItemEvent.SHOW_CHILDREN);
-        labelElement.click();
-        const event = await listener;
-        expect(event).to.exist;
-        expect(event.type).to.equal(UUIMenuItemEvent.SHOW_CHILDREN);
-        expect(element.showChildren).to.be.false;
       });
-    });
 
-    describe('hide-children', async () => {
-      it('emits a hide-children event when collapsed', async () => {
-        element.hasChildren = true;
-        element.showChildren = true;
-        await elementUpdated(element);
-        const labelElement = element.shadowRoot!.querySelector(
-          '#caret-button',
-        ) as HTMLElement;
-        const listener = oneEvent(element, UUIMenuItemEvent.HIDE_CHILDREN);
-        labelElement.click();
-        const event = await listener;
-        expect(event).to.exist;
-        expect(event.type).to.equal(UUIMenuItemEvent.HIDE_CHILDREN);
-        expect(element.showChildren).to.be.false;
+      describe('deselect', async () => {
+        it('emits a cancelable deselected event when preselected', async () => {
+          element.selectable = true;
+          element.selected = true;
+          await elementUpdated(element);
+          const labelElement = element.shadowRoot!.querySelector(
+            '#label-button',
+          ) as HTMLElement;
+          element.addEventListener(UUISelectableEvent.DESELECTED, e => {
+            e.preventDefault();
+          });
+          const listener = oneEvent(element, UUISelectableEvent.DESELECTED);
+          labelElement.click();
+          const event = await listener;
+          expect(event).to.exist;
+          expect(event.type).to.equal(UUISelectableEvent.DESELECTED);
+          expect(element.selected).to.be.true;
+        });
       });
-      it('emits a cancelable hide-children event when collapsed', async () => {
-        element.hasChildren = true;
-        element.showChildren = true;
-        await elementUpdated(element);
-        const labelElement = element.shadowRoot!.querySelector(
-          '#caret-button',
-        ) as HTMLElement;
-        element.addEventListener(UUIMenuItemEvent.HIDE_CHILDREN, e => {
-          e.preventDefault();
+
+      describe('show-children', async () => {
+        it('emits a show-children event when expanded', async () => {
+          element.hasChildren = true;
+          await elementUpdated(element);
+          const labelElement = element.shadowRoot!.querySelector(
+            '#caret-button',
+          ) as HTMLElement;
+          const listener = oneEvent(element, UUIMenuItemEvent.SHOW_CHILDREN);
+          labelElement.click();
+          const event = await listener;
+          expect(event).to.exist;
+          expect(event.type).to.equal(UUIMenuItemEvent.SHOW_CHILDREN);
+          expect(element.showChildren).to.be.true;
+        });
+        it('emits a cancelable show-children event when expanded', async () => {
+          element.hasChildren = true;
+          await elementUpdated(element);
+          const labelElement = element.shadowRoot!.querySelector(
+            '#caret-button',
+          ) as HTMLElement;
+          element.addEventListener(UUIMenuItemEvent.SHOW_CHILDREN, e => {
+            e.preventDefault();
+          });
+          const listener = oneEvent(element, UUIMenuItemEvent.SHOW_CHILDREN);
+          labelElement.click();
+          const event = await listener;
+          expect(event).to.exist;
+          expect(event.type).to.equal(UUIMenuItemEvent.SHOW_CHILDREN);
+          expect(element.showChildren).to.be.false;
         });
-        const listener = oneEvent(element, UUIMenuItemEvent.HIDE_CHILDREN);
-        labelElement.click();
-        const event = await listener;
-        expect(event).to.exist;
-        expect(event.type).to.equal(UUIMenuItemEvent.HIDE_CHILDREN);
-        expect(element.showChildren).to.be.true;
       });
-    });
-  });
 
-  describe('template', () => {
-    it('renders a default slot', () => {
-      const slot = element.shadowRoot!.querySelector('slot')!;
-      expect(slot).to.exist;
+      describe('hide-children', async () => {
+        it('emits a hide-children event when collapsed', async () => {
+          element.hasChildren = true;
+          element.showChildren = true;
+          await elementUpdated(element);
+          const labelElement = element.shadowRoot!.querySelector(
+            '#caret-button',
+          ) as HTMLElement;
+          const listener = oneEvent(element, UUIMenuItemEvent.HIDE_CHILDREN);
+          labelElement.click();
+          const event = await listener;
+          expect(event).to.exist;
+          expect(event.type).to.equal(UUIMenuItemEvent.HIDE_CHILDREN);
+          expect(element.showChildren).to.be.false;
+        });
+        it('emits a cancelable hide-children event when collapsed', async () => {
+          element.hasChildren = true;
+          element.showChildren = true;
+          await elementUpdated(element);
+          const labelElement = element.shadowRoot!.querySelector(
+            '#caret-button',
+          ) as HTMLElement;
+          element.addEventListener(UUIMenuItemEvent.HIDE_CHILDREN, e => {
+            e.preventDefault();
+          });
+          const listener = oneEvent(element, UUIMenuItemEvent.HIDE_CHILDREN);
+          labelElement.click();
+          const event = await listener;
+          expect(event).to.exist;
+          expect(event.type).to.equal(UUIMenuItemEvent.HIDE_CHILDREN);
+          expect(element.showChildren).to.be.true;
+        });
+      });
     });
 
-    it('renders an icon slot', () => {
-      const slot = element.shadowRoot!.querySelector('slot[name=icon]')!;
-      expect(slot).to.exist;
-    });
+    describe('template', () => {
+      it('renders a default slot', () => {
+        const slot = element.shadowRoot!.querySelector('slot')!;
+        expect(slot).to.exist;
+      });
 
-    it('renders an actions slot', () => {
-      const slot = element.shadowRoot!.querySelector('slot[name=actions]')!;
-      expect(slot).to.exist;
-    });
+      it('renders an icon slot', () => {
+        const slot = element.shadowRoot!.querySelector('slot[name=icon]')!;
+        expect(slot).to.exist;
+      });
 
-    it('renders a button', () => {
-      const slot = element.shadowRoot!.querySelector('button')!;
-      expect(slot).to.exist;
-    });
-    it('renders a anchor tag when href is defined', () => {
-      element.setAttribute('href', 'https://www.umbraco.com');
-      const slot = element.shadowRoot!.querySelector('button')!;
-      expect(slot).to.exist;
-    });
-  });
+      it('renders an actions slot', () => {
+        const slot = element.shadowRoot!.querySelector('slot[name=actions]')!;
+        expect(slot).to.exist;
+      });
 
-  describe('expand', () => {
-    it('emits a show-children event when expand icon is clicked', async () => {
-      element.setAttribute('has-children', 'true');
-      await elementUpdated(element);
-      const listener = oneEvent(element, 'show-children');
-      const caretIconElement: HTMLElement | null =
-        element.shadowRoot!.querySelector('#caret-button');
-      caretIconElement?.click();
-      const event = await listener;
-      expect(event).to.exist;
-      expect(event.type).to.equal('show-children');
-      expect(element.hasAttribute('show-children')).to.equal(true);
+      it('renders a button', () => {
+        const slot = element.shadowRoot!.querySelector('button')!;
+        expect(slot).to.exist;
+      });
+      it('renders a anchor tag when href is defined', () => {
+        element.setAttribute('href', 'https://www.umbraco.com');
+        const slot = element.shadowRoot!.querySelector('button')!;
+        expect(slot).to.exist;
+      });
     });
 
-    it('emits a hide-children event when collapse icon is clicked', async () => {
-      element.setAttribute('has-children', 'true');
-      element.setAttribute('show-children', 'true');
-      await elementUpdated(element);
-      const listener = oneEvent(element, 'hide-children');
-      const caretIconElement: HTMLElement | null =
-        element.shadowRoot!.querySelector('#caret-button');
-      caretIconElement?.click();
-      const event = await listener;
-      expect(event).to.exist;
-      expect(event.type).to.equal('hide-children');
-      expect(element.hasAttribute('show-children')).to.equal(false);
+    describe('expand', () => {
+      it('emits a show-children event when expand icon is clicked', async () => {
+        element.setAttribute('has-children', 'true');
+        await elementUpdated(element);
+        const listener = oneEvent(element, 'show-children');
+        const caretIconElement: HTMLElement | null =
+          element.shadowRoot!.querySelector('#caret-button');
+        caretIconElement?.click();
+        const event = await listener;
+        expect(event).to.exist;
+        expect(event.type).to.equal('show-children');
+        expect(element.hasAttribute('show-children')).to.equal(true);
+      });
+
+      it('emits a hide-children event when collapse icon is clicked', async () => {
+        element.setAttribute('has-children', 'true');
+        element.setAttribute('show-children', 'true');
+        await elementUpdated(element);
+        const listener = oneEvent(element, 'hide-children');
+        const caretIconElement: HTMLElement | null =
+          element.shadowRoot!.querySelector('#caret-button');
+        caretIconElement?.click();
+        const event = await listener;
+        expect(event).to.exist;
+        expect(event.type).to.equal('hide-children');
+        expect(element.hasAttribute('show-children')).to.equal(false);
+      });
     });
-  });
 
-  describe('selectable', () => {
-    let labelElement: HTMLElement | null;
+    describe('selectable', () => {
+      let labelElement: HTMLElement | null;
 
-    beforeEach(async () => {
-      labelElement = element.shadowRoot!.querySelector('#label-button');
-      element.selectable = true;
-    });
+      beforeEach(async () => {
+        labelElement = element.shadowRoot!.querySelector('#label-button');
+        element.selectable = true;
+      });
 
-    it('label element is defined', () => {
-      expect(labelElement).to.be.instanceOf(HTMLElement);
-    });
+      it('label element is defined', () => {
+        expect(labelElement).to.be.instanceOf(HTMLElement);
+      });
 
-    it('label is rendered as a button tag', async () => {
-      await elementUpdated(element);
-      expect(labelElement?.nodeName).to.be.equal('BUTTON');
-    });
+      it('label is rendered as a button tag', async () => {
+        await elementUpdated(element);
+        expect(labelElement?.nodeName).to.be.equal('BUTTON');
+      });
 
-    it('can be selected when selectable', async () => {
-      await elementUpdated(element);
-      await sendMouse({
-        type: 'click',
-        position: [75, 30],
-        button: 'left',
+      it('can be selected when selectable', async () => {
+        await elementUpdated(element);
+        await sendMouse({
+          type: 'click',
+          position: [75, 30],
+          button: 'left',
+        });
+        expect(element.selected).to.be.true;
       });
-      expect(element.selected).to.be.true;
-    });
 
-    it('can not be selected when not selectable', async () => {
-      element.selectable = false;
-      await elementUpdated(element);
-      await sendMouse({
-        type: 'click',
-        position: [75, 30],
-        button: 'left',
+      it('can not be selected when not selectable', async () => {
+        element.selectable = false;
+        await elementUpdated(element);
+        await sendMouse({
+          type: 'click',
+          position: [75, 30],
+          button: 'left',
+        });
+        expect(element.selected).to.be.false;
       });
-      expect(element.selected).to.be.false;
-    });
 
-    it('can not be selected when disabled', async () => {
-      element.disabled = true;
-      await elementUpdated(element);
-      await sendMouse({
-        type: 'click',
-        position: [75, 30],
-        button: 'left',
+      it('can not be selected when disabled', async () => {
+        element.disabled = true;
+        await elementUpdated(element);
+        await sendMouse({
+          type: 'click',
+          position: [75, 30],
+          button: 'left',
+        });
+        expect(element.selected).to.be.false;
       });
-      expect(element.selected).to.be.false;
-    });
 
-    it('can expand', async () => {
-      element.setAttribute('has-children', 'true');
-      await elementUpdated(element);
-      const listener = oneEvent(element, 'show-children');
-      const caretIconElement: HTMLElement | null =
-        element.shadowRoot!.querySelector('#caret-button');
-      caretIconElement?.click();
-      const event = await listener;
-      expect(event).to.exist;
-      expect(event.type).to.equal('show-children');
-      expect(element.hasAttribute('show-children')).to.equal(true);
+      it('can expand', async () => {
+        element.setAttribute('has-children', 'true');
+        await elementUpdated(element);
+        const listener = oneEvent(element, 'show-children');
+        const caretIconElement: HTMLElement | null =
+          element.shadowRoot!.querySelector('#caret-button');
+        caretIconElement?.click();
+        const event = await listener;
+        expect(event).to.exist;
+        expect(event.type).to.equal('show-children');
+        expect(element.hasAttribute('show-children')).to.equal(true);
+      });
     });
-  });
 
-  describe('selectable & selectOnly', () => {
-    let labelElement: HTMLElement | null;
+    describe('selectable & selectOnly', () => {
+      let labelElement: HTMLElement | null;
 
-    beforeEach(async () => {
-      labelElement = element.shadowRoot!.querySelector('#label-button');
-      element.selectable = true;
-      element.selectOnly = true;
-    });
+      beforeEach(async () => {
+        labelElement = element.shadowRoot!.querySelector('#label-button');
+        element.selectable = true;
+        element.selectOnly = true;
+      });
 
-    it('label element is defined', () => {
-      expect(labelElement).to.be.instanceOf(HTMLElement);
-    });
+      it('label element is defined', () => {
+        expect(labelElement).to.be.instanceOf(HTMLElement);
+      });
 
-    it('label is rendered as a button tag', async () => {
-      await elementUpdated(element);
-      expect(labelElement?.nodeName).to.be.equal('BUTTON');
-    });
+      it('label is rendered as a button tag', async () => {
+        await elementUpdated(element);
+        expect(labelElement?.nodeName).to.be.equal('BUTTON');
+      });
 
-    it('can be selected when selectable', async () => {
-      await elementUpdated(element);
-      await sendMouse({
-        type: 'click',
-        position: [75, 30],
-        button: 'left',
+      it('can be selected when selectable', async () => {
+        await elementUpdated(element);
+        await sendMouse({
+          type: 'click',
+          position: [75, 30],
+          button: 'left',
+        });
+        expect(element.selected).to.be.true;
       });
-      expect(element.selected).to.be.true;
-    });
 
-    it('can not be selected when not selectable', async () => {
-      element.selectable = false;
-      await elementUpdated(element);
-      await sendMouse({
-        type: 'click',
-        position: [75, 30],
-        button: 'left',
+      it('can not be selected when not selectable', async () => {
+        element.selectable = false;
+        await elementUpdated(element);
+        await sendMouse({
+          type: 'click',
+          position: [75, 30],
+          button: 'left',
+        });
+        expect(element.selected).to.be.false;
       });
-      expect(element.selected).to.be.false;
-    });
 
-    it('can not be selected when disabled', async () => {
-      element.disabled = true;
-      await elementUpdated(element);
-      await sendMouse({
-        type: 'click',
-        position: [75, 30],
-        button: 'left',
+      it('can not be selected when disabled', async () => {
+        element.disabled = true;
+        await elementUpdated(element);
+        await sendMouse({
+          type: 'click',
+          position: [75, 30],
+          button: 'left',
+        });
+        expect(element.selected).to.be.false;
       });
-      expect(element.selected).to.be.false;
-    });
 
-    it('can expand', async () => {
-      element.setAttribute('has-children', 'true');
-      await elementUpdated(element);
-      const listener = oneEvent(element, 'show-children');
-      const caretIconElement: HTMLElement | null =
-        element.shadowRoot!.querySelector('#caret-button');
-      caretIconElement?.click();
-      const event = await listener;
-      expect(event).to.exist;
-      expect(event.type).to.equal('show-children');
-      expect(element.hasAttribute('show-children')).to.equal(true);
+      it('can expand', async () => {
+        element.setAttribute('has-children', 'true');
+        await elementUpdated(element);
+        const listener = oneEvent(element, 'show-children');
+        const caretIconElement: HTMLElement | null =
+          element.shadowRoot!.querySelector('#caret-button');
+        caretIconElement?.click();
+        const event = await listener;
+        expect(event).to.exist;
+        expect(event.type).to.equal('show-children');
+        expect(element.hasAttribute('show-children')).to.equal(true);
+      });
     });
   });