only care about the composedPath when selectableTarget is this.

Author: nielslyngsoe

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();
       }
     };

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}">