@vonage/vivid 5.1.0 → 5.3.0

package/tree-view/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const l=require("../bundled/vivid-element.cjs"),n=require("../bundled/definition22.cjs"),m=require("../bundled/host-semantics.cjs"),c=require("../bundled/key-codes.cjs"),h=require("../bundled/dom.cjs"),f=require("../bundled/ref.cjs"),g=require("../bundled/class-names.cjs"),I=require("../bundled/slotted.cjs"),p=".control{position:relative;display:flex;flex-direction:column;gap:4px}";var b=Object.defineProperty,d=(r,e,t,s)=>{for(var i=void 0,a=r.length-1,u;a>=0;a--)(u=r[a])&&(i=u(e,t,i)||i);return i&&b(e,t,i),i};function T(r,e){return h.isHTMLElement(r)?Array.from(r.querySelectorAll(e)).filter(i=>{if(i.parentElement instanceof n.TreeItem){if(i.parentElement.expanded)return!0}else return!0;return!1}):[]}class o extends m.HostSemantics(l.VividElement){constructor(){super(...arguments),this.currentFocused=null,this.handleFocus=e=>{if(this.slottedTreeItems.length>0){if(e.target===this){this.currentFocused!==null&&n.TreeItem.focusItem(this.currentFocused);return}this.contains(e.target)&&(this.setAttribute("tabindex","-1"),this.currentFocused=e.target)}},this.handleBlur=e=>{e.target instanceof HTMLElement&&(e.relatedTarget===null||!this.contains(e.relatedTarget))&&this.setAttribute("tabindex","0")},this.handleKeyDown=e=>{if(this.slottedTreeItems.length<1)return!0;if(!e.defaultPrevented){const t=this.getVisibleNodes();switch(e.key){case c.keyHome:t.length&&n.TreeItem.focusItem(t[0]);return;case c.keyEnd:t.length&&n.TreeItem.focusItem(t[t.length-1]);return;case c.keyArrowLeft:if(e.target&&this.isFocusableElement(e.target)){const s=e.target;s instanceof n.TreeItem&&s.childItemLength()>0&&s.expanded?s.expanded=!1:s instanceof n.TreeItem&&s.parentElement instanceof n.TreeItem&&n.TreeItem.focusItem(s.parentElement)}return!1;case c.keyArrowRight:if(e.target&&this.isFocusableElement(e.target)){const s=e.target;s instanceof n.TreeItem&&s.childItemLength()>0&&!s.expanded?s.expanded=!0:s instanceof n.TreeItem&&s.childItemLength()>0&&this.focusNextNode(1,e.target)}return;case c.keyArrowDown:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(1,e.target);return;case c.keyArrowUp:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(-1,e.target);return;case c.keyEnter:this.handleClick(e);return}}return!0},this.handleSelectedChange=e=>{if(!e.defaultPrevented){if(!(e.target instanceof Element)||!n.isTreeItemElement(e.target))return!0;const t=e.target;t.selected?(this.currentSelected&&this.currentSelected!==t&&(this.currentSelected.selected=!1),this.currentSelected=t):!t.selected&&this.currentSelected===t&&(this.currentSelected=null);return}},this.setItems=()=>{const e=this.treeView.querySelector("[selected]");this.currentSelected=e,(this.currentFocused===null||!this.contains(this.currentFocused))&&(this.currentFocused=this.getValidFocusableItem()),this.nested=this.checkForNestedItems(),this.getVisibleNodes().forEach(s=>{n.isTreeItemElement(s)&&(s.nested=this.nested)})},this.isFocusableElement=e=>n.isTreeItemElement(e),this.isSelectedElement=e=>e.selected}slottedTreeItemsChanged(){this.$fastController.isConnected&&this.setItems()}connectedCallback(){super.connectedCallback(),this.setAttribute("tabindex","0"),l.DOM.queueUpdate(()=>{this.setItems()})}handleClick(e){if(!e.defaultPrevented){if(!(e.target instanceof Element)||!n.isTreeItemElement(e.target))return!0;const t=e.target;t.disabled||(t.selected=!t.selected);return}}focusNextNode(e,t){const s=this.getVisibleNodes();if(s){const i=s[s.indexOf(t)+e];h.isHTMLElement(i)&&n.TreeItem.focusItem(i)}}getValidFocusableItem(){const e=this.getVisibleNodes();let t=e.findIndex(this.isSelectedElement);return t===-1&&(t=e.findIndex(this.isFocusableElement)),t!==-1?e[t]:null}checkForNestedItems(){return this.slottedTreeItems.some(e=>n.isTreeItemElement(e)&&e.querySelector("[data-vvd-component='tree-item']"))}getVisibleNodes(){return T(this,"[data-vvd-component='tree-item']")}}d([l.attr({attribute:"render-collapsed-nodes"})],o.prototype,"renderCollapsedNodes");d([l.observable],o.prototype,"currentSelected");d([l.observable],o.prototype,"slottedTreeItems");const v=r=>g.classNames("control"),E=l.html` <template
+"use strict";const l=require("../bundled/vivid-element.cjs"),n=require("../bundled/definition22.cjs"),m=require("../bundled/host-semantics.cjs"),c=require("../bundled/key-codes.cjs"),h=require("../bundled/dom.cjs"),f=require("../bundled/ref.cjs"),g=require("../bundled/slotted.cjs"),I=require("../bundled/class-names.cjs"),p=".control{position:relative;display:flex;flex-direction:column;gap:4px}";var b=Object.defineProperty,d=(r,e,t,s)=>{for(var i=void 0,a=r.length-1,u;a>=0;a--)(u=r[a])&&(i=u(e,t,i)||i);return i&&b(e,t,i),i};function T(r,e){return h.isHTMLElement(r)?Array.from(r.querySelectorAll(e)).filter(i=>{if(i.parentElement instanceof n.TreeItem){if(i.parentElement.expanded)return!0}else return!0;return!1}):[]}class o extends m.HostSemantics(l.VividElement){constructor(){super(...arguments),this.currentFocused=null,this.handleFocus=e=>{if(this.slottedTreeItems.length>0){if(e.target===this){this.currentFocused!==null&&n.TreeItem.focusItem(this.currentFocused);return}this.contains(e.target)&&(this.setAttribute("tabindex","-1"),this.currentFocused=e.target)}},this.handleBlur=e=>{e.target instanceof HTMLElement&&(e.relatedTarget===null||!this.contains(e.relatedTarget))&&this.setAttribute("tabindex","0")},this.handleKeyDown=e=>{if(this.slottedTreeItems.length<1)return!0;if(!e.defaultPrevented){const t=this.getVisibleNodes();switch(e.key){case c.keyHome:t.length&&n.TreeItem.focusItem(t[0]);return;case c.keyEnd:t.length&&n.TreeItem.focusItem(t[t.length-1]);return;case c.keyArrowLeft:if(e.target&&this.isFocusableElement(e.target)){const s=e.target;s instanceof n.TreeItem&&s.childItemLength()>0&&s.expanded?s.expanded=!1:s instanceof n.TreeItem&&s.parentElement instanceof n.TreeItem&&n.TreeItem.focusItem(s.parentElement)}return!1;case c.keyArrowRight:if(e.target&&this.isFocusableElement(e.target)){const s=e.target;s instanceof n.TreeItem&&s.childItemLength()>0&&!s.expanded?s.expanded=!0:s instanceof n.TreeItem&&s.childItemLength()>0&&this.focusNextNode(1,e.target)}return;case c.keyArrowDown:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(1,e.target);return;case c.keyArrowUp:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(-1,e.target);return;case c.keyEnter:this.handleClick(e);return}}return!0},this.handleSelectedChange=e=>{if(!e.defaultPrevented){if(!(e.target instanceof Element)||!n.isTreeItemElement(e.target))return!0;const t=e.target;t.selected?(this.currentSelected&&this.currentSelected!==t&&(this.currentSelected.selected=!1),this.currentSelected=t):!t.selected&&this.currentSelected===t&&(this.currentSelected=null);return}},this.setItems=()=>{const e=this.treeView.querySelector("[selected]");this.currentSelected=e,(this.currentFocused===null||!this.contains(this.currentFocused))&&(this.currentFocused=this.getValidFocusableItem()),this.nested=this.checkForNestedItems(),this.getVisibleNodes().forEach(s=>{n.isTreeItemElement(s)&&(s.nested=this.nested)})},this.isFocusableElement=e=>n.isTreeItemElement(e),this.isSelectedElement=e=>e.selected}slottedTreeItemsChanged(){this.$fastController.isConnected&&this.setItems()}connectedCallback(){super.connectedCallback(),this.setAttribute("tabindex","0"),l.Updates.enqueue(()=>{this.setItems()})}handleClick(e){if(!e.defaultPrevented){if(!(e.target instanceof Element)||!n.isTreeItemElement(e.target))return!0;const t=e.target;t.disabled||(t.selected=!t.selected);return}}focusNextNode(e,t){const s=this.getVisibleNodes();if(s){const i=s[s.indexOf(t)+e];h.isHTMLElement(i)&&n.TreeItem.focusItem(i)}}getValidFocusableItem(){const e=this.getVisibleNodes();let t=e.findIndex(this.isSelectedElement);return t===-1&&(t=e.findIndex(this.isFocusableElement)),t!==-1?e[t]:null}checkForNestedItems(){return this.slottedTreeItems.some(e=>n.isTreeItemElement(e)&&e.querySelector("[data-vvd-component='tree-item']"))}getVisibleNodes(){return T(this,"[data-vvd-component='tree-item']")}}d([l.attr({attribute:"render-collapsed-nodes"})],o.prototype,"renderCollapsedNodes");d([l.observable],o.prototype,"currentSelected");d([l.observable],o.prototype,"slottedTreeItems");const v=r=>I.classNames("control"),E=l.html` <template
 	${f.ref("treeView")}
 	${m.applyHostSemantics({role:"tree"})}
 	@keydown="${(r,e)=>r.handleKeyDown(e.event)}"
@@ -8,6 +8,6 @@
 	@selected-change="${(r,e)=>r.handleSelectedChange(e.event)}"
 >
 	<div class="${v}">
-		<slot ${I.slotted("slottedTreeItems")}></slot>
+		<slot ${g.slotted("slottedTreeItems")}></slot>
 	</div>
 </template>`,y=l.defineVividComponent("tree-view",o,E,[n.treeItemDefinition],{styles:p}),N=l.createRegisterFunction(y);N();

package/tree-view/index.js

@@ -1,11 +1,11 @@
-import { V as h, D as m, a as g, o as u, h as p, c as I, d as b } from "../bundled/vivid-element.js";
+import { V as h, U as m, a as g, o as u, h as p, c as I, d as b } from "../bundled/vivid-element.js";
 import { T as n, i as l, t as v } from "../bundled/definition22.js";
 import { H as y, a as E } from "../bundled/host-semantics.js";
 import { f as x, c as F, b as N, g as k, h as S, k as T, a as w } from "../bundled/key-codes.js";
 import { i as f } from "../bundled/dom.js";
 import { r as V } from "../bundled/ref.js";
-import { c as C } from "../bundled/class-names.js";
-import { s as $ } from "../bundled/slotted.js";
+import { s as C } from "../bundled/slotted.js";
+import { c as $ } from "../bundled/class-names.js";
 const A = ".control{position:relative;display:flex;flex-direction:column;gap:4px}";
 var D = Object.defineProperty, c = (r, e, t, s) => {
   for (var i = void 0, o = r.length - 1, d; o >= 0; o--)
@@ -90,7 +90,7 @@ class a extends y(h) {
     this.$fastController.isConnected && this.setItems();
   }
   connectedCallback() {
-    super.connectedCallback(), this.setAttribute("tabindex", "0"), m.queueUpdate(() => {
+    super.connectedCallback(), this.setAttribute("tabindex", "0"), m.enqueue(() => {
       this.setItems();
     });
   }
@@ -145,7 +145,7 @@ c([
 c([
   u
 ], a.prototype, "slottedTreeItems");
-const L = (r) => C("control"), P = p` <template
+const L = (r) => $("control"), P = p` <template
 	${V("treeView")}
 	${E({
   role: "tree"
@@ -157,7 +157,7 @@ const L = (r) => C("control"), P = p` <template
 	@selected-change="${(r, e) => r.handleSelectedChange(e.event)}"
 >
 	<div class="${L}">
-		<slot ${$("slottedTreeItems")}></slot>
+		<slot ${C("slottedTreeItems")}></slot>
 	</div>
 </template>`, _ = b(
   "tree-view",

package/unbundled/_commonjsHelpers.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function getAugmentedNamespace(n) {
+  if (n.__esModule) return n;
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function a () {
+			if (this instanceof a) {
+        return Reflect.construct(f, arguments, this.constructor);
+			}
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+exports.commonjsGlobal = commonjsGlobal;
+exports.getAugmentedNamespace = getAugmentedNamespace;
+exports.getDefaultExportFromCjs = getDefaultExportFromCjs;

package/unbundled/_commonjsHelpers.js

@@ -0,0 +1,32 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function getAugmentedNamespace(n) {
+  if (n.__esModule) return n;
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function a () {
+			if (this instanceof a) {
+        return Reflect.construct(f, arguments, this.constructor);
+			}
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+export { getAugmentedNamespace as a, commonjsGlobal as c, getDefaultExportFromCjs as g };

package/unbundled/affix.cjs

@@ -58,7 +58,7 @@ const affixIconTemplateFactory = (context) => {
       return null;
     }
     const iconTemplate = fastElement.html`<${iconTag} :name="${() => icon}" :label="${() => announcement?.label || void 0}"></${iconTag}>`;
-    const wrapperTag = slottedState ? "span" : "slot";
+    const wrapperTag = fastElement.html.partial(slottedState ? "span" : "slot");
     return fastElement.html`<${wrapperTag}
 					class="${() => slottedState ? "icon" : void 0}"
 					:name="${() => slottedState ? void 0 : "icon"}"

package/unbundled/affix.js

@@ -56,7 +56,7 @@ const affixIconTemplateFactory = (context) => {
       return null;
     }
     const iconTemplate = html`<${iconTag} :name="${() => icon}" :label="${() => announcement?.label || void 0}"></${iconTag}>`;
-    const wrapperTag = slottedState ? "span" : "slot";
+    const wrapperTag = html.partial(slottedState ? "span" : "slot");
     return html`<${wrapperTag}
 					class="${() => slottedState ? "icon" : void 0}"
 					:name="${() => slottedState ? void 0 : "icon"}"

package/unbundled/attribute-binding-behaviour.cjs

@@ -11,23 +11,24 @@ class AttributeBindingBehavior {
     this.source = null;
     this.context = null;
   }
-  bind(source, context) {
-    this.source = source;
-    this.context = context;
+  bind(controller) {
+    this.source = controller.source;
+    this.context = controller.context;
     if (!this.bindingObserver) {
       this.bindingObserver = fastElement.Observable.binding(
-        this.binding,
+        this.binding.evaluate,
         this,
         this.isBindingVolatile
       );
     }
-    this.updateTarget(this.bindingObserver.observe(source, context));
-  }
-  unbind() {
-    this.bindingObserver.disconnect();
-    this.source = null;
-    this.context = null;
+    this.bindingObserver.observe(this.source, this.context);
+    this.updateTarget(this.bindingObserver.observe(this.source, this.context));
   }
+  // unbind() {
+  // 	this.bindingObserver!.dispose();
+  // 	this.source = null;
+  // 	this.context = null;
+  // }
   handleChange() {
     this.updateTarget(
       this.bindingObserver.observe(this.source, this.context)

package/unbundled/attribute-binding-behaviour.js

@@ -9,23 +9,24 @@ class AttributeBindingBehavior {
     this.source = null;
     this.context = null;
   }
-  bind(source, context) {
-    this.source = source;
-    this.context = context;
+  bind(controller) {
+    this.source = controller.source;
+    this.context = controller.context;
     if (!this.bindingObserver) {
       this.bindingObserver = Observable.binding(
-        this.binding,
+        this.binding.evaluate,
         this,
         this.isBindingVolatile
       );
     }
-    this.updateTarget(this.bindingObserver.observe(source, context));
-  }
-  unbind() {
-    this.bindingObserver.disconnect();
-    this.source = null;
-    this.context = null;
+    this.bindingObserver.observe(this.source, this.context);
+    this.updateTarget(this.bindingObserver.observe(this.source, this.context));
   }
+  // unbind() {
+  // 	this.bindingObserver!.dispose();
+  // 	this.source = null;
+  // 	this.context = null;
+  // }
   handleChange() {
     this.updateTarget(
       this.bindingObserver.observe(this.source, this.context)

package/unbundled/base-color-picker.cjs

@@ -0,0 +1,278 @@
+'use strict';
+
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const formAssociated = require('./form-associated.cjs');
+const localized = require('./localized.cjs');
+const formElement = require('./form-element.cjs');
+
+function parseHexColor(input) {
+  if (!input) return null;
+  const hex = input.trim().replace(/^#/, "");
+  if (/^[0-9a-fA-F]{3}$/.test(hex)) {
+    return hex.split("").map((char) => char + char).join("").toLowerCase();
+  }
+  if (/^[0-9a-fA-F]{6}$/.test(hex)) {
+    return hex.toLowerCase();
+  }
+  return null;
+}
+function isValidHexColor(input) {
+  return parseHexColor(input) !== 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();
+}
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const BaseColorPicker = (Base) => {
+  class BaseColorPickerElement extends localized.Localized(
+    formElement.FormElement(formAssociated.FormAssociated(Base))
+  ) {
+    constructor() {
+      super(...arguments);
+      /**
+       * @internal
+       */
+      this.proxy = document.createElement("input");
+      this.open = false;
+      this.swatches = [];
+      /**
+       * @internal
+       */
+      this._canvasColor = "";
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      this._refreshCanvasColor();
+    }
+    /**
+     * @internal
+     */
+    _refreshCanvasColor() {
+      this._canvasColor = getCSSCustomProperty("--vvd-color-canvas", this);
+    }
+    /**
+     * @internal
+     */
+    _applyContrastClass(color, threshold = 3) {
+      if (!color || !this._canvasColor) return false;
+      const ratio = getContrastRatio(color, this._canvasColor);
+      return ratio < threshold;
+    }
+    /**
+     * @internal
+     */
+    _getRowLength() {
+      return 7;
+    }
+    /**
+     * @internal
+     */
+    _handleSwatchSelection(value) {
+      if (this.value === value) {
+        this.value = "";
+      } else {
+        this.value = value;
+      }
+      this.$emit("change");
+      this.open = false;
+    }
+    /**
+     * @internal
+     */
+    _handleColorSaving() {
+    }
+    /**
+     * @internal
+     */
+    _getFocusReturnEl() {
+      return null;
+    }
+    /**
+     * @internal
+     */
+    _returnFocusToAnchor() {
+      const el = this._getFocusReturnEl();
+      if (!el) return;
+      fastElement.Updates.enqueue(() => el.focus());
+    }
+    /**
+     * @internal
+     */
+    _getGridCells() {
+      const grid = this.shadowRoot?.querySelector('[role="grid"]');
+      return grid ? Array.from(
+        grid.querySelectorAll(
+          '[role="gridcell"], [data-vvd-role="gridcell"]'
+        )
+      ) : [];
+    }
+    /**
+     * @internal
+     */
+    _handleCellKeydown(event, value, index, isSaveCell) {
+      const rowLength = this._getRowLength();
+      const totalCells = this._getGridCells().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 " ":
+          if (isSaveCell) {
+            this._handleColorSaving();
+          }
+          if (value && !isSaveCell) {
+            this._handleSwatchSelection(value);
+            this._returnFocusToAnchor();
+          }
+          return false;
+        case "Escape":
+          this.open = false;
+          this._returnFocusToAnchor();
+          return false;
+        case "Tab":
+          this.open = false;
+          return true;
+        default:
+          return true;
+      }
+    }
+    /**
+     * @internal
+     */
+    _focusSwatchByIndex(index) {
+      const cells = this._getGridCells();
+      if (index < 0 || index >= cells.length) return;
+      cells[index]?.focus();
+    }
+    /**
+     * @internal
+     */
+    _renderColorSwatch(iconTag) {
+      return 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.baseColorPicker.colorSwatchLabel(
+        x.value,
+        x.label,
+        c.parent.value === x.value
+      )}"
+					@click="${(x, c) => c.parent._handleSwatchSelection(x.value)}"
+					@keydown="${(x, c) => c.parent._handleCellKeydown(
+        c.event,
+        x.value,
+        c.index
+      )}"
+				>
+					${fastElement.when(
+        (x, c) => c.parent.value === x.value,
+        fastElement.html`<${iconTag} size="-6" name="check-solid" aria-hidden="true"></${iconTag}>`
+      )}
+				</button>
+			`;
+    }
+  }
+  __decorateClass([
+    fastElement.attr({ mode: "boolean" })
+  ], BaseColorPickerElement.prototype, "open");
+  __decorateClass([
+    fastElement.observable
+  ], BaseColorPickerElement.prototype, "swatches");
+  return BaseColorPickerElement;
+};
+
+exports.BaseColorPicker = BaseColorPicker;
+exports.isValidHexColor = isValidHexColor;