Make swatches non selectable when disabled

Author: bjarnef

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

@@ -648,6 +648,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
     return html`<uui-color-swatches
       id="swatches"
       class="color-picker__swatches"
+      ?disabled=${this.disabled}
       @change=${this.handleColorSwatchChange}>
       ${this.swatches.map(
         swatch =>

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

@@ -66,6 +66,7 @@ export class UUIColorSwatchElement extends LabelMixin(
       }
 
       #swatch {
+        cursor: inherit;
         outline: none;
         background: none;
         border: none;

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

@@ -86,15 +86,16 @@ export class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {
   private _handleSlotChange() {
     if (!this.swatches || this.swatches.length === 0) return;
     this.swatches.forEach(swatch => {
-      //? does it make sense to have non selectable swatches in the swatches element?
-      //for some reason the value it really wants the attribute to be set not the value. If value is set then it is not reflected properly. :cry:
-      swatch.setAttribute('selectable', 'selectable');
       swatch.setAttribute('aria-checked', 'false');
       swatch.setAttribute('role', 'radio');
 
       if (this.disabled) {
         swatch.setAttribute('disabled', '')
       }
+      else {
+        // For some reason the value it really wants the attribute to be set not the value. If value is set then it is not reflected properly. :cry:
+        swatch.setAttribute('selectable', 'selectable');
+      }
 
       if (this.value !== '' && swatch.color?.isEqual(this.value)) {
         swatch.selected = true;
@@ -140,6 +141,7 @@ export class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {
       );
     }
   };
+  
   /**
    * Deselects all swatches.
    *
@@ -149,7 +151,7 @@ export class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {
     this.swatches.forEach(swatch => {
       swatch.selected = false;
       swatch.active = false;
-      swatch.selectable = true;
+      swatch.selectable = !swatch.disabled;
     });
     this._activeElement = undefined;
     this._selectedElement = undefined;