Disable color swatches

Author: bjarnef

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

@@ -652,7 +652,9 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
         swatch =>
           html`<uui-color-swatch
             label="${swatch}"
-            .value=${swatch}></uui-color-swatch>`
+            .value=${swatch}
+            ?disabled=${this.disabled}>
+          </uui-color-swatch>`
       )}
     </uui-color-swatches>`;
   }

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

@@ -35,6 +35,14 @@ export class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {
   @property()
   value = '';
 
+ /**
+  * Disables the color swatches.
+  * @type {boolean}
+  * @attr
+  * @default false
+  **/
+   @property({ type: Boolean, reflect: true }) disabled = false;
+
   @queryAssignedElements({ selector: 'uui-color-swatch' })
   swatches!: Array<UUIColorSwatchElement>;
 
@@ -84,6 +92,10 @@ export class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {
       swatch.setAttribute('aria-checked', 'false');
       swatch.setAttribute('role', 'radio');
 
+      if (this.disabled) {
+        swatch.setAttribute('disabled', '')
+      }
+
       if (this.value !== '' && swatch.color?.isEqual(this.value)) {
         swatch.selected = true;
         swatch.setAttribute('aria-checked', 'true');