@vonage/vivid 5.2.0 → 5.4.0

package/simple-color-picker/definition.cjs

@@ -3,48 +3,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const vividElement = require('../unbundled/vivid-element.cjs');
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const icon_definition = require('../icon/definition.cjs');
 const fastElement = require('@microsoft/fast-element');
 const anchored = require('../unbundled/anchored.cjs');
-const formAssociated = require('../unbundled/form-associated.cjs');
-const localized = require('../unbundled/localized.cjs');
-const formElement = require('../unbundled/form-element.cjs');
+const baseColorPicker = require('../unbundled/base-color-picker.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const index = require('../unbundled/index.cjs');
 
-const styles = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.palette{display:grid;padding:var(--_color-palette-spacing, 16px);gap:var(--_color-palette-gap, 12px);grid-template-columns:repeat(var(--swatches-per-row, 7),1fr)}.swatch{position:relative;padding:0;border:none;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch.contrast{color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -3px}::part(popup-base){block-size:max-content;inline-size:max-content;max-block-size:100vh;max-inline-size:100vw;min-block-size:var(--_color-swatch-size, 24px);min-inline-size:var(--_color-swatch-size, 24px)}";
-
-function parseHexColor(input) {
-  if (!input) return null;
-  const hex = input.trim().replace(/^#/, "");
-  if (/^[0-9a-fA-F]{6}$/.test(hex)) return hex.toLowerCase();
-  return null;
-}
-function getLuminance(hexColor) {
-  const hex = parseHexColor(hexColor);
-  if (!hex) return 0;
-  const r = parseInt(hex.slice(0, 2), 16) / 255;
-  const g = parseInt(hex.slice(2, 4), 16) / 255;
-  const b = parseInt(hex.slice(4, 6), 16) / 255;
-  const sR = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
-  const sG = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
-  const sB = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
-  return 0.2126 * sR + 0.7152 * sG + 0.0722 * sB;
-}
-function getContrastRatio(color1, color2) {
-  const lum1 = getLuminance(color1);
-  const lum2 = getLuminance(color2);
-  const brightest = Math.max(lum1, lum2);
-  const darkest = Math.min(lum1, lum2);
-  return (brightest + 0.05) / (darkest + 0.05);
-}
-function getCSSCustomProperty(propertyName, element) {
-  if (!element) {
-    element = document.querySelector(".vvd-root") || document.documentElement;
-  }
-  return getComputedStyle(element).getPropertyValue(propertyName).trim();
-}
+const styles = ".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border:none;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch.contrast{color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -3px}:host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.palette{padding:var(--_color-palette-spacing, 16px);gap:var(--_color-palette-gap, 12px)}::part(popup-base){block-size:max-content;inline-size:max-content;max-block-size:100vh;max-inline-size:100vw;min-block-size:var(--_color-swatch-size, 24px);min-inline-size:var(--_color-swatch-size, 24px)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -55,28 +22,16 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class SimpleColorPicker extends localized.Localized(
-  anchored.Anchored(formElement.FormElement(formAssociated.FormAssociated(vividElement.VividElement)))
-) {
+class SimpleColorPicker extends anchored.Anchored(baseColorPicker.BaseColorPicker(vividElement.VividElement)) {
   constructor() {
     super(...arguments);
-    /**
-     * @internal
-     */
-    this.proxy = document.createElement("input");
-    this.open = false;
     this.placement = "top-start";
-    this.swatches = [];
     this.swatchesPerRow = 7;
-    /**
-     * @internal
-     */
-    this._canvasColor = "";
     /**
      * @internal
      */
     this.#openPopup = () => {
-      if (!this.open) fastElement.DOM.queueUpdate(() => this.open = true);
+      if (!this.open) fastElement.Updates.enqueue(() => this.open = true);
     };
     /**
      * @internal
@@ -84,7 +39,7 @@ class SimpleColorPicker extends localized.Localized(
     this.#handleAnchorKeydown = (event) => {
       if (event.key === "Enter" || event.key === " ") {
         if (!this.open) {
-          fastElement.DOM.queueUpdate(() => this.open = true);
+          fastElement.Updates.enqueue(() => this.open = true);
         }
         event.preventDefault();
       }
@@ -92,7 +47,7 @@ class SimpleColorPicker extends localized.Localized(
     /**
      * @internal
      */
-    this.#closeOnClickOutside = (e) => {
+    this._closeOnClickOutside = (e) => {
       const clickedOutside = !this.contains(e.target);
       const clickedOnAnchor = this._anchorEl?.contains(e.target);
       if (clickedOutside || clickedOnAnchor) this.open = false;
@@ -100,108 +55,17 @@ class SimpleColorPicker extends localized.Localized(
     /**
      * @internal
      */
-    this.#closeOnEscape = (e) => {
+    this._closeOnEscape = (e) => {
       if (e.key === "Escape") {
         this.open = false;
       }
     };
-    /**
-     * @internal
-     */
-    this._handleSwatchSelection = (swatch) => {
-      if (this.value === swatch.value) {
-        this.value = "";
-      } else {
-        this.value = swatch.value;
-      }
-      this.$emit("change");
-      this.open = false;
-    };
-    /**
-     * @internal
-     */
-    this._handleSwatchKeydown = (event, swatch, index) => {
-      const rowLength = this.swatchesPerRow;
-      const totalCells = this.swatches.length;
-      const currentRow = Math.floor(index / rowLength);
-      const currentCol = index % rowLength;
-      const totalRows = Math.ceil(totalCells / rowLength);
-      switch (event.key) {
-        case "ArrowRight":
-          if (currentCol < rowLength - 1 && index + 1 < totalCells) {
-            this.#focusSwatchByIndex(index + 1);
-          }
-          return false;
-        case "ArrowLeft":
-          if (currentCol > 0) {
-            this.#focusSwatchByIndex(index - 1);
-          }
-          return false;
-        case "ArrowDown":
-          if (currentRow < totalRows - 1 && index + rowLength < totalCells) {
-            this.#focusSwatchByIndex(index + rowLength);
-          }
-          return false;
-        case "ArrowUp":
-          if (currentRow > 0) {
-            this.#focusSwatchByIndex(index - rowLength);
-          }
-          return false;
-        case "PageDown": {
-          const lastRowStart = (totalRows - 1) * rowLength;
-          const targetIndex = Math.min(lastRowStart + currentCol, totalCells - 1);
-          if (index !== targetIndex) {
-            this.#focusSwatchByIndex(targetIndex);
-          }
-          return false;
-        }
-        case "PageUp": {
-          const targetIndex = Math.min(currentCol, totalCells - 1);
-          if (index !== targetIndex) {
-            this.#focusSwatchByIndex(targetIndex);
-          }
-          return false;
-        }
-        case "Home":
-          if (event.ctrlKey) {
-            this.#focusSwatchByIndex(0);
-          } else {
-            this.#focusSwatchByIndex(currentRow * rowLength);
-          }
-          return false;
-        case "End":
-          if (event.ctrlKey) {
-            this.#focusSwatchByIndex(totalCells - 1);
-          } else {
-            const rowEnd = Math.min(
-              (currentRow + 1) * rowLength - 1,
-              totalCells - 1
-            );
-            this.#focusSwatchByIndex(rowEnd);
-          }
-          return false;
-        case "Enter":
-        case " ":
-          this._handleSwatchSelection(swatch);
-          this.#returnFocusToAnchor();
-          return false;
-        case "Escape":
-          this.open = false;
-          this.#returnFocusToAnchor();
-          return false;
-        case "Tab":
-          this.open = false;
-          return true;
-        default:
-          return true;
-      }
-    };
   }
   /**
    * @internal
    */
   openChanged() {
-    this.#updateListeners();
+    this._updateListeners();
     if (this._anchorEl) {
       this.#updateAnchor(this._anchorEl);
     }
@@ -212,43 +76,40 @@ class SimpleColorPicker extends localized.Localized(
           (swatch) => swatch.value === this.value
         );
         const targetIndex = selectedIndex >= 0 ? selectedIndex : 0;
-        this.#focusSwatchByIndex(targetIndex);
+        this._focusSwatchByIndex(targetIndex);
       });
     }
   }
+  /**
+   * @internal
+   */
+  _getRowLength() {
+    return this.swatchesPerRow;
+  }
   connectedCallback() {
     super.connectedCallback();
-    this.#updateListeners();
-    this._refreshCanvasColor();
+    this._updateListeners();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.#updateListeners();
+    this._updateListeners();
   }
   /**
    * @internal
    */
-  #updateListeners() {
-    document.removeEventListener("click", this.#closeOnClickOutside);
-    document.removeEventListener("keydown", this.#closeOnEscape);
+  _updateListeners() {
+    document.removeEventListener("click", this._closeOnClickOutside);
+    document.removeEventListener("keydown", this._closeOnEscape);
     if (this.open && this.isConnected) {
-      document.addEventListener("click", this.#closeOnClickOutside);
-      document.addEventListener("keydown", this.#closeOnEscape);
+      document.addEventListener("click", this._closeOnClickOutside);
+      document.addEventListener("keydown", this._closeOnEscape);
     }
   }
   /**
    * @internal
    */
-  _refreshCanvasColor() {
-    this._canvasColor = getCSSCustomProperty("--vvd-color-canvas", this);
-  }
-  /**
-   * @internal
-   */
-  _applyContrastClass(swatchColor, threshold = 3) {
-    if (!swatchColor || !this._canvasColor) return false;
-    const ratio = getContrastRatio(swatchColor, this._canvasColor);
-    return ratio < threshold;
+  _getFocusReturnEl() {
+    return this._anchorEl ?? null;
   }
   /**
    * @internal
@@ -285,32 +146,10 @@ class SimpleColorPicker extends localized.Localized(
   }
   #openPopup;
   #handleAnchorKeydown;
-  #closeOnClickOutside;
-  #closeOnEscape;
-  /**
-   * @internal
-   */
-  #focusSwatchByIndex(index) {
-    if (index < 0 || index >= this.swatches.length) return;
-    const element = this.shadowRoot?.querySelectorAll('[role="gridcell"]')?.[index];
-    element?.focus();
-  }
-  /**
-   * @internal
-   */
-  #returnFocusToAnchor() {
-    fastElement.DOM.queueUpdate(() => this._anchorEl?.focus());
-  }
 }
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], SimpleColorPicker.prototype, "open");
 __decorateClass([
   fastElement.attr({ mode: "fromView" })
 ], SimpleColorPicker.prototype, "placement");
-__decorateClass([
-  fastElement.observable
-], SimpleColorPicker.prototype, "swatches");
 __decorateClass([
   fastElement.attr({
     attribute: "swatches-per-row",
@@ -340,39 +179,13 @@ const SimpleColorPickerTemplate = (context) => {
   }}"
 		>
 			<div class="palette" role="grid" 
-				aria-rowcount="${(x) => Math.ceil(x.swatches.length / x.swatchesPerRow)}"
-				aria-colcount="${(x) => x.swatchesPerRow}"
-				style="--swatches-per-row: ${(x) => x.swatchesPerRow};" 
+				aria-rowcount="${(x) => Math.ceil(x.swatches.length / x._getRowLength())}"
+				aria-colcount="${(x) => x._getRowLength()}"
+				style="--swatches-per-row: ${(x) => x._getRowLength()};"
 				aria-label="${(x) => x.locale.simpleColorPicker.colorPaletteLabel}">
 				${fastElement.repeat(
     (x) => x.swatches,
-    fastElement.html`
-						<button
-							class="swatch ${(x, c) => fastWebUtilities.classNames(
-      c.parent.value === x.value ? "selected" : "",
-      c.parent._applyContrastClass(x.value) ? "contrast" : ""
-    )}"
-							role="gridcell"
-							style="--swatch-color: ${(x) => x.value};"
-							tabindex="${(x, c) => c.index === 0 ? "0" : "-1"}"
-							aria-label="${(x, c) => c.parent.locale.simpleColorPicker.colorSwatchLabel(
-      x.value,
-      x.label,
-      c.parent.value === x.value
-    )}"
-							@click="${(x, c) => c.parent._handleSwatchSelection(x)}"
-							@keydown="${(x, c) => c.parent._handleSwatchKeydown(
-      c.event,
-      x,
-      c.index
-    )}"
-						>
-							${fastElement.when(
-      (x, c) => c.parent.value === x.value,
-      fastElement.html`<${iconTag} size="-6" name="check-solid" aria-hidden="true"></${iconTag}>`
-    )}
-						</button>
-					`,
+    (x) => x._renderColorSwatch(iconTag),
     { positioning: true }
   )}
 			</div>

package/simple-color-picker/definition.js

@@ -1,46 +1,13 @@
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { P as Popup, p as popupDefinition } from '../unbundled/definition4.js';
+import { P as Popup, p as popupDefinition } from '../unbundled/definition5.js';
 import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
-import { DOM, attr, observable, nullableNumberConverter, repeat, when, html } from '@microsoft/fast-element';
+import { Updates, attr, nullableNumberConverter, repeat, html } from '@microsoft/fast-element';
 import { A as Anchored, a as anchorSlotTemplateFactory } from '../unbundled/anchored.js';
-import { F as FormAssociated } from '../unbundled/form-associated.js';
-import { L as Localized } from '../unbundled/localized.js';
-import { F as FormElement } from '../unbundled/form-element.js';
+import { B as BaseColorPicker } from '../unbundled/base-color-picker.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
 
-const styles = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.palette{display:grid;padding:var(--_color-palette-spacing, 16px);gap:var(--_color-palette-gap, 12px);grid-template-columns:repeat(var(--swatches-per-row, 7),1fr)}.swatch{position:relative;padding:0;border:none;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch.contrast{color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -3px}::part(popup-base){block-size:max-content;inline-size:max-content;max-block-size:100vh;max-inline-size:100vw;min-block-size:var(--_color-swatch-size, 24px);min-inline-size:var(--_color-swatch-size, 24px)}";
-
-function parseHexColor(input) {
-  if (!input) return null;
-  const hex = input.trim().replace(/^#/, "");
-  if (/^[0-9a-fA-F]{6}$/.test(hex)) return hex.toLowerCase();
-  return null;
-}
-function getLuminance(hexColor) {
-  const hex = parseHexColor(hexColor);
-  if (!hex) return 0;
-  const r = parseInt(hex.slice(0, 2), 16) / 255;
-  const g = parseInt(hex.slice(2, 4), 16) / 255;
-  const b = parseInt(hex.slice(4, 6), 16) / 255;
-  const sR = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
-  const sG = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
-  const sB = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
-  return 0.2126 * sR + 0.7152 * sG + 0.0722 * sB;
-}
-function getContrastRatio(color1, color2) {
-  const lum1 = getLuminance(color1);
-  const lum2 = getLuminance(color2);
-  const brightest = Math.max(lum1, lum2);
-  const darkest = Math.min(lum1, lum2);
-  return (brightest + 0.05) / (darkest + 0.05);
-}
-function getCSSCustomProperty(propertyName, element) {
-  if (!element) {
-    element = document.querySelector(".vvd-root") || document.documentElement;
-  }
-  return getComputedStyle(element).getPropertyValue(propertyName).trim();
-}
+const styles = ".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border:none;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch.contrast{color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -3px}:host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.palette{padding:var(--_color-palette-spacing, 16px);gap:var(--_color-palette-gap, 12px)}::part(popup-base){block-size:max-content;inline-size:max-content;max-block-size:100vh;max-inline-size:100vw;min-block-size:var(--_color-swatch-size, 24px);min-inline-size:var(--_color-swatch-size, 24px)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -51,28 +18,16 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class SimpleColorPicker extends Localized(
-  Anchored(FormElement(FormAssociated(VividElement)))
-) {
+class SimpleColorPicker extends Anchored(BaseColorPicker(VividElement)) {
   constructor() {
     super(...arguments);
-    /**
-     * @internal
-     */
-    this.proxy = document.createElement("input");
-    this.open = false;
     this.placement = "top-start";
-    this.swatches = [];
     this.swatchesPerRow = 7;
-    /**
-     * @internal
-     */
-    this._canvasColor = "";
     /**
      * @internal
      */
     this.#openPopup = () => {
-      if (!this.open) DOM.queueUpdate(() => this.open = true);
+      if (!this.open) Updates.enqueue(() => this.open = true);
     };
     /**
      * @internal
@@ -80,7 +35,7 @@ class SimpleColorPicker extends Localized(
     this.#handleAnchorKeydown = (event) => {
       if (event.key === "Enter" || event.key === " ") {
         if (!this.open) {
-          DOM.queueUpdate(() => this.open = true);
+          Updates.enqueue(() => this.open = true);
         }
         event.preventDefault();
       }
@@ -88,7 +43,7 @@ class SimpleColorPicker extends Localized(
     /**
      * @internal
      */
-    this.#closeOnClickOutside = (e) => {
+    this._closeOnClickOutside = (e) => {
       const clickedOutside = !this.contains(e.target);
       const clickedOnAnchor = this._anchorEl?.contains(e.target);
       if (clickedOutside || clickedOnAnchor) this.open = false;
@@ -96,108 +51,17 @@ class SimpleColorPicker extends Localized(
     /**
      * @internal
      */
-    this.#closeOnEscape = (e) => {
+    this._closeOnEscape = (e) => {
       if (e.key === "Escape") {
         this.open = false;
       }
     };
-    /**
-     * @internal
-     */
-    this._handleSwatchSelection = (swatch) => {
-      if (this.value === swatch.value) {
-        this.value = "";
-      } else {
-        this.value = swatch.value;
-      }
-      this.$emit("change");
-      this.open = false;
-    };
-    /**
-     * @internal
-     */
-    this._handleSwatchKeydown = (event, swatch, index) => {
-      const rowLength = this.swatchesPerRow;
-      const totalCells = this.swatches.length;
-      const currentRow = Math.floor(index / rowLength);
-      const currentCol = index % rowLength;
-      const totalRows = Math.ceil(totalCells / rowLength);
-      switch (event.key) {
-        case "ArrowRight":
-          if (currentCol < rowLength - 1 && index + 1 < totalCells) {
-            this.#focusSwatchByIndex(index + 1);
-          }
-          return false;
-        case "ArrowLeft":
-          if (currentCol > 0) {
-            this.#focusSwatchByIndex(index - 1);
-          }
-          return false;
-        case "ArrowDown":
-          if (currentRow < totalRows - 1 && index + rowLength < totalCells) {
-            this.#focusSwatchByIndex(index + rowLength);
-          }
-          return false;
-        case "ArrowUp":
-          if (currentRow > 0) {
-            this.#focusSwatchByIndex(index - rowLength);
-          }
-          return false;
-        case "PageDown": {
-          const lastRowStart = (totalRows - 1) * rowLength;
-          const targetIndex = Math.min(lastRowStart + currentCol, totalCells - 1);
-          if (index !== targetIndex) {
-            this.#focusSwatchByIndex(targetIndex);
-          }
-          return false;
-        }
-        case "PageUp": {
-          const targetIndex = Math.min(currentCol, totalCells - 1);
-          if (index !== targetIndex) {
-            this.#focusSwatchByIndex(targetIndex);
-          }
-          return false;
-        }
-        case "Home":
-          if (event.ctrlKey) {
-            this.#focusSwatchByIndex(0);
-          } else {
-            this.#focusSwatchByIndex(currentRow * rowLength);
-          }
-          return false;
-        case "End":
-          if (event.ctrlKey) {
-            this.#focusSwatchByIndex(totalCells - 1);
-          } else {
-            const rowEnd = Math.min(
-              (currentRow + 1) * rowLength - 1,
-              totalCells - 1
-            );
-            this.#focusSwatchByIndex(rowEnd);
-          }
-          return false;
-        case "Enter":
-        case " ":
-          this._handleSwatchSelection(swatch);
-          this.#returnFocusToAnchor();
-          return false;
-        case "Escape":
-          this.open = false;
-          this.#returnFocusToAnchor();
-          return false;
-        case "Tab":
-          this.open = false;
-          return true;
-        default:
-          return true;
-      }
-    };
   }
   /**
    * @internal
    */
   openChanged() {
-    this.#updateListeners();
+    this._updateListeners();
     if (this._anchorEl) {
       this.#updateAnchor(this._anchorEl);
     }
@@ -208,43 +72,40 @@ class SimpleColorPicker extends Localized(
           (swatch) => swatch.value === this.value
         );
         const targetIndex = selectedIndex >= 0 ? selectedIndex : 0;
-        this.#focusSwatchByIndex(targetIndex);
+        this._focusSwatchByIndex(targetIndex);
       });
     }
   }
+  /**
+   * @internal
+   */
+  _getRowLength() {
+    return this.swatchesPerRow;
+  }
   connectedCallback() {
     super.connectedCallback();
-    this.#updateListeners();
-    this._refreshCanvasColor();
+    this._updateListeners();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.#updateListeners();
+    this._updateListeners();
   }
   /**
    * @internal
    */
-  #updateListeners() {
-    document.removeEventListener("click", this.#closeOnClickOutside);
-    document.removeEventListener("keydown", this.#closeOnEscape);
+  _updateListeners() {
+    document.removeEventListener("click", this._closeOnClickOutside);
+    document.removeEventListener("keydown", this._closeOnEscape);
     if (this.open && this.isConnected) {
-      document.addEventListener("click", this.#closeOnClickOutside);
-      document.addEventListener("keydown", this.#closeOnEscape);
+      document.addEventListener("click", this._closeOnClickOutside);
+      document.addEventListener("keydown", this._closeOnEscape);
     }
   }
   /**
    * @internal
    */
-  _refreshCanvasColor() {
-    this._canvasColor = getCSSCustomProperty("--vvd-color-canvas", this);
-  }
-  /**
-   * @internal
-   */
-  _applyContrastClass(swatchColor, threshold = 3) {
-    if (!swatchColor || !this._canvasColor) return false;
-    const ratio = getContrastRatio(swatchColor, this._canvasColor);
-    return ratio < threshold;
+  _getFocusReturnEl() {
+    return this._anchorEl ?? null;
   }
   /**
    * @internal
@@ -281,32 +142,10 @@ class SimpleColorPicker extends Localized(
   }
   #openPopup;
   #handleAnchorKeydown;
-  #closeOnClickOutside;
-  #closeOnEscape;
-  /**
-   * @internal
-   */
-  #focusSwatchByIndex(index) {
-    if (index < 0 || index >= this.swatches.length) return;
-    const element = this.shadowRoot?.querySelectorAll('[role="gridcell"]')?.[index];
-    element?.focus();
-  }
-  /**
-   * @internal
-   */
-  #returnFocusToAnchor() {
-    DOM.queueUpdate(() => this._anchorEl?.focus());
-  }
 }
-__decorateClass([
-  attr({ mode: "boolean" })
-], SimpleColorPicker.prototype, "open");
 __decorateClass([
   attr({ mode: "fromView" })
 ], SimpleColorPicker.prototype, "placement");
-__decorateClass([
-  observable
-], SimpleColorPicker.prototype, "swatches");
 __decorateClass([
   attr({
     attribute: "swatches-per-row",
@@ -336,39 +175,13 @@ const SimpleColorPickerTemplate = (context) => {
   }}"
 		>
 			<div class="palette" role="grid" 
-				aria-rowcount="${(x) => Math.ceil(x.swatches.length / x.swatchesPerRow)}"
-				aria-colcount="${(x) => x.swatchesPerRow}"
-				style="--swatches-per-row: ${(x) => x.swatchesPerRow};" 
+				aria-rowcount="${(x) => Math.ceil(x.swatches.length / x._getRowLength())}"
+				aria-colcount="${(x) => x._getRowLength()}"
+				style="--swatches-per-row: ${(x) => x._getRowLength()};"
 				aria-label="${(x) => x.locale.simpleColorPicker.colorPaletteLabel}">
 				${repeat(
     (x) => x.swatches,
-    html`
-						<button
-							class="swatch ${(x, c) => classNames(
-      c.parent.value === x.value ? "selected" : "",
-      c.parent._applyContrastClass(x.value) ? "contrast" : ""
-    )}"
-							role="gridcell"
-							style="--swatch-color: ${(x) => x.value};"
-							tabindex="${(x, c) => c.index === 0 ? "0" : "-1"}"
-							aria-label="${(x, c) => c.parent.locale.simpleColorPicker.colorSwatchLabel(
-      x.value,
-      x.label,
-      c.parent.value === x.value
-    )}"
-							@click="${(x, c) => c.parent._handleSwatchSelection(x)}"
-							@keydown="${(x, c) => c.parent._handleSwatchKeydown(
-      c.event,
-      x,
-      c.index
-    )}"
-						>
-							${when(
-      (x, c) => c.parent.value === x.value,
-      html`<${iconTag} size="-6" name="check-solid" aria-hidden="true"></${iconTag}>`
-    )}
-						</button>
-					`,
+    (x) => x._renderColorSwatch(iconTag),
     { positioning: true }
   )}
 			</div>