@vonage/vivid 5.1.0 → 5.3.0

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 { 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>

package/simple-color-picker/index.cjs

@@ -1,31 +1,19 @@
-"use strict";const a=require("../bundled/vivid-element.cjs"),v=require("../bundled/definition9.cjs"),m=require("../bundled/definition2.cjs"),w=require("../bundled/anchored.cjs"),C=require("../bundled/form-associated.cjs"),b=require("../bundled/localized.cjs"),k=require("../bundled/form-element.cjs"),y=require("../bundled/index.cjs"),g=require("../bundled/class-names.cjs"),_=require("../bundled/repeat.cjs"),E=require("../bundled/when.cjs"),x=":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 $(n){if(!n)return null;const e=n.trim().replace(/^#/,"");return/^[0-9a-fA-F]{6}$/.test(e)?e.toLowerCase():null}function f(n){const e=$(n);if(!e)return 0;const r=parseInt(e.slice(0,2),16)/255,o=parseInt(e.slice(2,4),16)/255,t=parseInt(e.slice(4,6),16)/255,s=r<=.03928?r/12.92:Math.pow((r+.055)/1.055,2.4),i=o<=.03928?o/12.92:Math.pow((o+.055)/1.055,2.4),c=t<=.03928?t/12.92:Math.pow((t+.055)/1.055,2.4);return .2126*s+.7152*i+.0722*c}function S(n,e){const r=f(n),o=f(e),t=Math.max(r,o),s=Math.min(r,o);return(t+.05)/(s+.05)}function A(n,e){return e||(e=document.querySelector(".vvd-root")||document.documentElement),getComputedStyle(e).getPropertyValue(n).trim()}var P=Object.defineProperty,p=(n,e,r,o)=>{for(var t=void 0,s=n.length-1,i;s>=0;s--)(i=n[s])&&(t=i(e,r,t)||t);return t&&P(e,r,t),t};class h extends b.Localized(w.Anchored(k.FormElement(C.FormAssociated(a.VividElement)))){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.open=!1,this.placement="top-start",this.swatches=[],this.swatchesPerRow=7,this._canvasColor="",this.#s=()=>{this.open||a.DOM.queueUpdate(()=>this.open=!0)},this.#o=e=>{(e.key==="Enter"||e.key===" ")&&(this.open||a.DOM.queueUpdate(()=>this.open=!0),e.preventDefault())},this.#r=e=>{const r=!this.contains(e.target),o=this._anchorEl?.contains(e.target);(r||o)&&(this.open=!1)},this.#n=e=>{e.key==="Escape"&&(this.open=!1)},this._handleSwatchSelection=e=>{this.value===e.value?this.value="":this.value=e.value,this.$emit("change"),this.open=!1},this._handleSwatchKeydown=(e,r,o)=>{const t=this.swatchesPerRow,s=this.swatches.length,i=Math.floor(o/t),c=o%t,u=Math.ceil(s/t);switch(e.key){case"ArrowRight":return c<t-1&&o+1<s&&this.#e(o+1),!1;case"ArrowLeft":return c>0&&this.#e(o-1),!1;case"ArrowDown":return i<u-1&&o+t<s&&this.#e(o+t),!1;case"ArrowUp":return i>0&&this.#e(o-t),!1;case"PageDown":{const l=(u-1)*t,d=Math.min(l+c,s-1);return o!==d&&this.#e(d),!1}case"PageUp":{const l=Math.min(c,s-1);return o!==l&&this.#e(l),!1}case"Home":return e.ctrlKey?this.#e(0):this.#e(i*t),!1;case"End":if(e.ctrlKey)this.#e(s-1);else{const l=Math.min((i+1)*t-1,s-1);this.#e(l)}return!1;case"Enter":case" ":return this._handleSwatchSelection(r),this.#i(),!1;case"Escape":return this.open=!1,this.#i(),!1;case"Tab":return this.open=!1,!0;default:return!0}}}openChanged(){this.#t(),this._anchorEl&&this.#a(this._anchorEl),this.open&&(this._refreshCanvasColor(),requestAnimationFrame(()=>{const e=this.swatches.findIndex(o=>o.value===this.value),r=e>=0?e:0;this.#e(r)}))}connectedCallback(){super.connectedCallback(),this.#t(),this._refreshCanvasColor()}disconnectedCallback(){super.disconnectedCallback(),this.#t()}#t(){document.removeEventListener("click",this.#r),document.removeEventListener("keydown",this.#n),this.open&&this.isConnected&&(document.addEventListener("click",this.#r),document.addEventListener("keydown",this.#n))}_refreshCanvasColor(){this._canvasColor=A("--vvd-color-canvas",this)}_applyContrastClass(e,r=3){return!e||!this._canvasColor?!1:S(e,this._canvasColor)<r}_anchorElChanged(e,r){e&&this.#l(e),r&&this.#c(r)}#a(e){e.setAttribute("aria-expanded",this.open.toString()),e.setAttribute("data-expanded",this.open.toString())}#c(e){this.#a(e),e.addEventListener("click",this.#s,!0),e.addEventListener("keydown",this.#o),e.setAttribute("aria-haspopup","true")}#l(e){e.removeEventListener("click",this.#s,!0),e.removeEventListener("keydown",this.#o),e.removeAttribute("aria-expanded"),e.removeAttribute("data-expanded"),e.removeAttribute("aria-haspopup")}#s;#o;#r;#n;#e(e){if(e<0||e>=this.swatches.length)return;this.shadowRoot?.querySelectorAll('[role="gridcell"]')?.[e]?.focus()}#i(){a.DOM.queueUpdate(()=>this._anchorEl?.focus())}}p([a.attr({mode:"boolean"})],h.prototype,"open");p([a.attr({mode:"fromView"})],h.prototype,"placement");p([a.observable],h.prototype,"swatches");p([a.attr({attribute:"swatches-per-row",mode:"fromView",converter:a.nullableNumberConverter})],h.prototype,"swatchesPerRow");const q=n=>g.classNames("control"),L=n=>{const e=n.tagFor(v.Popup),r=n.tagFor(m.Icon),o=w.anchorSlotTemplateFactory();return a.html`
-		${o}
+"use strict";const s=require("../bundled/vivid-element.cjs"),l=require("../bundled/definition9.cjs"),p=require("../bundled/definition2.cjs"),h=require("../bundled/anchored.cjs"),u=require("../bundled/base-color-picker.cjs"),v=require("../bundled/index.cjs"),m=require("../bundled/repeat.cjs"),f=require("../bundled/class-names.cjs"),w=".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 g=Object.defineProperty,d=(r,e,o,n)=>{for(var t=void 0,i=r.length-1,c;i>=0;i--)(c=r[i])&&(t=c(e,o,t)||t);return t&&g(e,o,t),t};class a extends h.Anchored(u.BaseColorPicker(s.VividElement)){constructor(){super(...arguments),this.placement="top-start",this.swatchesPerRow=7,this.#e=()=>{this.open||s.Updates.enqueue(()=>this.open=!0)},this.#t=e=>{(e.key==="Enter"||e.key===" ")&&(this.open||s.Updates.enqueue(()=>this.open=!0),e.preventDefault())},this._closeOnClickOutside=e=>{const o=!this.contains(e.target),n=this._anchorEl?.contains(e.target);(o||n)&&(this.open=!1)},this._closeOnEscape=e=>{e.key==="Escape"&&(this.open=!1)}}openChanged(){this._updateListeners(),this._anchorEl&&this.#o(this._anchorEl),this.open&&(this._refreshCanvasColor(),requestAnimationFrame(()=>{const e=this.swatches.findIndex(n=>n.value===this.value),o=e>=0?e:0;this._focusSwatchByIndex(o)}))}_getRowLength(){return this.swatchesPerRow}connectedCallback(){super.connectedCallback(),this._updateListeners()}disconnectedCallback(){super.disconnectedCallback(),this._updateListeners()}_updateListeners(){document.removeEventListener("click",this._closeOnClickOutside),document.removeEventListener("keydown",this._closeOnEscape),this.open&&this.isConnected&&(document.addEventListener("click",this._closeOnClickOutside),document.addEventListener("keydown",this._closeOnEscape))}_getFocusReturnEl(){return this._anchorEl??null}_anchorElChanged(e,o){e&&this.#r(e),o&&this.#s(o)}#o(e){e.setAttribute("aria-expanded",this.open.toString()),e.setAttribute("data-expanded",this.open.toString())}#s(e){this.#o(e),e.addEventListener("click",this.#e,!0),e.addEventListener("keydown",this.#t),e.setAttribute("aria-haspopup","true")}#r(e){e.removeEventListener("click",this.#e,!0),e.removeEventListener("keydown",this.#t),e.removeAttribute("aria-expanded"),e.removeAttribute("data-expanded"),e.removeAttribute("aria-haspopup")}#e;#t}d([s.attr({mode:"fromView"})],a.prototype,"placement");d([s.attr({attribute:"swatches-per-row",mode:"fromView",converter:s.nullableNumberConverter})],a.prototype,"swatchesPerRow");const _=r=>f.classNames("control"),k=r=>{const e=r.tagFor(l.Popup),o=r.tagFor(p.Icon),n=h.anchorSlotTemplateFactory();return s.html`
+		${n}
 		<${e}
-			class="${q}"
+			class="${_}"
 			:anchor="${t=>t._anchorEl}"
 			:open="${t=>t.open}"
 			placement="${t=>t.placement}"
 			offset="4"
-			@keydown="${(t,{event:s})=>!(t.open&&y.handleEscapeKeyAndStopPropogation(s))}"
+			@keydown="${(t,{event:i})=>!(t.open&&v.handleEscapeKeyAndStopPropogation(i))}"
 		>
 			<div class="palette" role="grid" 
-				aria-rowcount="${t=>Math.ceil(t.swatches.length/t.swatchesPerRow)}"
-				aria-colcount="${t=>t.swatchesPerRow}"
-				style="--swatches-per-row: ${t=>t.swatchesPerRow};" 
+				aria-rowcount="${t=>Math.ceil(t.swatches.length/t._getRowLength())}"
+				aria-colcount="${t=>t._getRowLength()}"
+				style="--swatches-per-row: ${t=>t._getRowLength()};"
 				aria-label="${t=>t.locale.simpleColorPicker.colorPaletteLabel}">
-				${_.repeat(t=>t.swatches,a.html`
-						<button
-							class="swatch ${(t,s)=>g.classNames(s.parent.value===t.value?"selected":"",s.parent._applyContrastClass(t.value)?"contrast":"")}"
-							role="gridcell"
-							style="--swatch-color: ${t=>t.value};"
-							tabindex="${(t,s)=>s.index===0?"0":"-1"}"
-							aria-label="${(t,s)=>s.parent.locale.simpleColorPicker.colorSwatchLabel(t.value,t.label,s.parent.value===t.value)}"
-							@click="${(t,s)=>s.parent._handleSwatchSelection(t)}"
-							@keydown="${(t,s)=>s.parent._handleSwatchKeydown(s.event,t,s.index)}"
-						>
-							${E.when((t,s)=>s.parent.value===t.value,a.html`<${r} size="-6" name="check-solid" aria-hidden="true"></${r}>`)}
-						</button>
-					`,{positioning:!0})}
+				${m.repeat(t=>t.swatches,t=>t._renderColorSwatch(o),{positioning:!0})}
 			</div>
 		</${e}>
-	`},z=a.defineVividComponent("simple-color-picker",h,L,[v.popupDefinition,m.iconDefinition],{styles:x}),M=a.createRegisterFunction(z);M();
+	`},x=s.defineVividComponent("simple-color-picker",a,k,[l.popupDefinition,p.iconDefinition],{styles:w}),b=s.createRegisterFunction(x);b();