@vonage/vivid 5.1.0 → 5.3.0

package/shared/templating/attribute-binding-behaviour.d.ts

@@ -1,5 +1,5 @@
-import { type Behavior, type Binding, type ExecutionContext, type Subscriber } from '@microsoft/fast-element';
-export declare class AttributeBindingBehavior implements Behavior, Subscriber {
+import { type Binding, type Subscriber, type ViewBehavior, type ViewController } from '@microsoft/fast-element';
+export declare class AttributeBindingBehavior implements ViewBehavior, Subscriber {
     private target;
     private binding;
     private isBindingVolatile;
@@ -8,8 +8,7 @@ export declare class AttributeBindingBehavior implements Behavior, Subscriber {
     private source;
     private context;
     private bindingObserver?;
-    bind(source: unknown, context: ExecutionContext): void;
-    unbind(): void;
+    bind(controller: ViewController): void;
     handleChange(): void;
     updateTarget(value: unknown): void;
 }

package/shared/templating/render-in-light-dom.d.ts

@@ -1,22 +1,23 @@
-import { type Behavior, type Binding, type CaptureType, ExecutionContext, HTMLDirective, type Subscriber, type SyntheticViewTemplate } from '@microsoft/fast-element';
+import { type AddViewBehaviorFactory, type Binding, type BindingDirective, type CaptureType, type Expression, HTMLDirective, type Subscriber, type ViewBehavior, type ViewBehaviorFactory, type ViewController, type ViewTemplate } from '@microsoft/fast-element';
 import type { VividElement } from '../foundation/vivid-element/vivid-element';
-export declare class RenderInLightDomBehaviour<TSource extends VividElement> implements Behavior, Subscriber {
+export declare class RenderInLightDomBehaviour<TSource extends VividElement> implements ViewBehavior, Subscriber {
     private source;
     private view?;
     private insertionPoint?;
     private templateBindingObserver;
     private context?;
-    constructor(templateBinding: Binding<TSource, SyntheticViewTemplate>, isTemplateBindingVolatile: boolean);
-    bind(source: TSource, context: ExecutionContext): void;
-    unbind(): void;
-    handleChange(): void;
+    private controller?;
+    constructor(directive: RenderInLightDomDirective<TSource>);
+    bind(controller: ViewController): void;
+    handleChange(source: any, args: any): void;
     private instantiateTemplate;
 }
-export declare class RenderInLightDomDirective<TSource extends VividElement> extends HTMLDirective {
-    readonly templateBinding: Binding<TSource, SyntheticViewTemplate>;
-    createPlaceholder: (index: number) => string;
-    private readonly isTemplateBindingVolatile;
-    constructor(templateBinding: Binding<TSource, SyntheticViewTemplate>);
+export declare class RenderInLightDomDirective<TSource extends VividElement> implements HTMLDirective, ViewBehaviorFactory, BindingDirective {
+    readonly templateBinding: Binding<TSource, ViewTemplate>;
+    readonly dataBinding: Binding<TSource, ViewTemplate>;
+    targetNodeId: string;
+    constructor(templateBinding: Binding<TSource, ViewTemplate>);
+    createHTML(add: AddViewBehaviorFactory): string;
     createBehavior(): RenderInLightDomBehaviour<TSource>;
 }
-export declare function renderInLightDOM<TSource extends VividElement>(templateOrTemplateBinding: SyntheticViewTemplate | Binding<TSource, SyntheticViewTemplate>): CaptureType<TSource>;
+export declare function renderInLightDOM<TSource extends VividElement = VividElement, TParent = any>(templateOrTemplateBinding: ViewTemplate<any, TSource> | Expression<TSource, ViewTemplate<any, TSource>, TParent> | Binding<TSource, ViewTemplate<any, TSource>, TParent>): CaptureType<TSource, TParent>;

package/side-drawer/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("../bundled/vivid-element.cjs"),p=require("../bundled/index.cjs"),d=require("../bundled/class-names.cjs"),v=require("../bundled/when.cjs");var b=Object.defineProperty,l=(e,o,t,i)=>{for(var a=void 0,s=e.length-1,c;s>=0;s--)(c=e[s])&&(a=c(o,t,a)||a);return a&&b(o,t,a),a};class n extends r.VividElement{constructor(){super(...arguments),this.alternate=!1,this.modal=!1,this.open=!1,this.trailing=!1}attributeChangedCallback(o,t,i){switch(super.attributeChangedCallback(o,t,i),o){case"open":this.open?this.#o():this.#e()}}#e(){this.$emit("close",void 0,{bubbles:!1})}#o(){this.$emit("open",void 0,{bubbles:!1})}_onKeydown(o){if(p.handleEscapeKeyAndStopPropogation(o)){this._handleCloseRequest();return}else return!0}_handleCloseRequest(){this.$emit("cancel",void 0,{bubbles:!1,cancelable:!0})&&(this.open=!1)}}l([r.attr({mode:"boolean"})],n.prototype,"alternate");l([r.attr({mode:"boolean"})],n.prototype,"modal");l([r.attr({mode:"boolean"})],n.prototype,"open");l([r.attr({mode:"boolean"})],n.prototype,"trailing");const m=":host{display:block}.side-drawer-app-content{block-size:100%}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{position:fixed;z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;inset-block:0;overflow-y:auto}.control[part~=vvd-theme-alternate]{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);color-scheme:var(--vvd-color-scheme)}.control.trailing{inset-inline-end:0}.control:not(.open).trailing{transform:translate(100%)}.control:not(.open):not(.trailing){transform:translate(-100%)}.control.open:not(.modal).trailing+.side-drawer-app-content{margin-inline-end:var(--side-drawer-app-content-offset, 280px)}.control.open:not(.modal):not(.trailing)+.side-drawer-app-content{margin-inline-start:var(--side-drawer-app-content-offset, 280px)}@media (prefers-reduced-motion: no-preference){.control{transition:transform .2s cubic-bezier(.4,0,.2,1)}}.scrim{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5;position:fixed;inset:0}.scrim:not(.open){display:none}",u=({modal:e,open:o,trailing:t})=>d.classNames("control",["modal",e],["open",o],["trailing",t]),h=({open:e})=>d.classNames("scrim",["open",e]),f=r.html`
+"use strict";const r=require("../bundled/vivid-element.cjs"),p=require("../bundled/index.cjs"),v=require("../bundled/when.cjs"),d=require("../bundled/class-names.cjs");var b=Object.defineProperty,l=(e,o,t,i)=>{for(var a=void 0,s=e.length-1,c;s>=0;s--)(c=e[s])&&(a=c(o,t,a)||a);return a&&b(o,t,a),a};class n extends r.VividElement{constructor(){super(...arguments),this.alternate=!1,this.modal=!1,this.open=!1,this.trailing=!1}attributeChangedCallback(o,t,i){switch(super.attributeChangedCallback(o,t,i),o){case"open":this.open?this.#o():this.#e()}}#e(){this.$emit("close",void 0,{bubbles:!1})}#o(){this.$emit("open",void 0,{bubbles:!1})}_onKeydown(o){if(p.handleEscapeKeyAndStopPropogation(o)){this._handleCloseRequest();return}else return!0}_handleCloseRequest(){this.$emit("cancel",void 0,{bubbles:!1,cancelable:!0})&&(this.open=!1)}}l([r.attr({mode:"boolean"})],n.prototype,"alternate");l([r.attr({mode:"boolean"})],n.prototype,"modal");l([r.attr({mode:"boolean"})],n.prototype,"open");l([r.attr({mode:"boolean"})],n.prototype,"trailing");const m=":host{display:block}.side-drawer-app-content{block-size:100%}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{position:fixed;z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;inset-block:0;overflow-y:auto}.control[part~=vvd-theme-alternate]{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);color-scheme:var(--vvd-color-scheme)}.control.trailing{inset-inline-end:0}.control:not(.open).trailing{transform:translate(100%)}.control:not(.open):not(.trailing){transform:translate(-100%)}.control.open:not(.modal).trailing+.side-drawer-app-content{margin-inline-end:var(--side-drawer-app-content-offset, 280px)}.control.open:not(.modal):not(.trailing)+.side-drawer-app-content{margin-inline-start:var(--side-drawer-app-content-offset, 280px)}@media (prefers-reduced-motion: no-preference){.control{transition:transform .2s cubic-bezier(.4,0,.2,1)}}.scrim{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5;position:fixed;inset:0}.scrim:not(.open){display:none}",u=({modal:e,open:o,trailing:t})=>d.classNames("control",["modal",e],["open",o],["trailing",t]),h=({open:e})=>d.classNames("scrim",["open",e]),f=r.html`
 	<div
 		class="${u}"
 		?inert="${e=>!e.open}"

package/side-drawer/index.js

@@ -1,7 +1,7 @@
 import { V as v, a as n, h as d, c as b, d as m } from "../bundled/vivid-element.js";
 import { h } from "../bundled/index.js";
-import { c as p } from "../bundled/class-names.js";
 import { w as f } from "../bundled/when.js";
+import { c as p } from "../bundled/class-names.js";
 var u = Object.defineProperty, l = (o, e, r, i) => {
   for (var t = void 0, s = o.length - 1, c; s >= 0; s--)
     (c = o[s]) && (t = c(e, r, t) || t);

package/simple-color-picker/definition.cjs

@@ -7,44 +7,11 @@ const popup_definition = require('../unbundled/definition4.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>