@vonage/vivid 5.0.0 → 5.2.0

package/simple-color-picker/definition.js

@@ -0,0 +1,392 @@
+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 { 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 { 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();
+}
+
+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;
+};
+class SimpleColorPicker extends Localized(
+  Anchored(FormElement(FormAssociated(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);
+    };
+    /**
+     * @internal
+     */
+    this.#handleAnchorKeydown = (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        if (!this.open) {
+          DOM.queueUpdate(() => this.open = true);
+        }
+        event.preventDefault();
+      }
+    };
+    /**
+     * @internal
+     */
+    this.#closeOnClickOutside = (e) => {
+      const clickedOutside = !this.contains(e.target);
+      const clickedOnAnchor = this._anchorEl?.contains(e.target);
+      if (clickedOutside || clickedOnAnchor) this.open = false;
+    };
+    /**
+     * @internal
+     */
+    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();
+    if (this._anchorEl) {
+      this.#updateAnchor(this._anchorEl);
+    }
+    if (this.open) {
+      this._refreshCanvasColor();
+      requestAnimationFrame(() => {
+        const selectedIndex = this.swatches.findIndex(
+          (swatch) => swatch.value === this.value
+        );
+        const targetIndex = selectedIndex >= 0 ? selectedIndex : 0;
+        this.#focusSwatchByIndex(targetIndex);
+      });
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#updateListeners();
+    this._refreshCanvasColor();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#updateListeners();
+  }
+  /**
+   * @internal
+   */
+  #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);
+    }
+  }
+  /**
+   * @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;
+  }
+  /**
+   * @internal
+   */
+  _anchorElChanged(oldValue, newValue) {
+    if (oldValue) this.#cleanupAnchor(oldValue);
+    if (newValue) this.#setupAnchor(newValue);
+  }
+  /**
+   * @internal
+   */
+  #updateAnchor(a) {
+    a.setAttribute("aria-expanded", this.open.toString());
+    a.setAttribute("data-expanded", this.open.toString());
+  }
+  /**
+   * @internal
+   */
+  #setupAnchor(a) {
+    this.#updateAnchor(a);
+    a.addEventListener("click", this.#openPopup, true);
+    a.addEventListener("keydown", this.#handleAnchorKeydown);
+    a.setAttribute("aria-haspopup", "true");
+  }
+  /**
+   * @internal
+   */
+  #cleanupAnchor(a) {
+    a.removeEventListener("click", this.#openPopup, true);
+    a.removeEventListener("keydown", this.#handleAnchorKeydown);
+    a.removeAttribute("aria-expanded");
+    a.removeAttribute("data-expanded");
+    a.removeAttribute("aria-haspopup");
+  }
+  #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",
+    mode: "fromView",
+    converter: nullableNumberConverter
+  })
+], SimpleColorPicker.prototype, "swatchesPerRow");
+
+const getClasses = (_) => classNames("control");
+const SimpleColorPickerTemplate = (context) => {
+  const popupTag = context.tagFor(Popup);
+  const iconTag = context.tagFor(Icon);
+  const anchorSlotTemplate = anchorSlotTemplateFactory();
+  return html`
+		${anchorSlotTemplate}
+		<${popupTag}
+			class="${getClasses}"
+			:anchor="${(x) => x._anchorEl}"
+			:open="${(x) => x.open}"
+			placement="${(x) => x.placement}"
+			offset="4"
+			@keydown="${(x, { event }) => {
+    if (x.open && handleEscapeKeyAndStopPropogation(event)) {
+      return false;
+    }
+    return true;
+  }}"
+		>
+			<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-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>
+					`,
+    { positioning: true }
+  )}
+			</div>
+		</${popupTag}>
+	`;
+};
+
+const simpleColorPickerDefinition = defineVividComponent(
+  "simple-color-picker",
+  SimpleColorPicker,
+  SimpleColorPickerTemplate,
+  [popupDefinition, iconDefinition],
+  {
+    styles
+  }
+);
+const registerSimpleColorPicker = createRegisterFunction(
+  simpleColorPickerDefinition
+);
+
+export { SimpleColorPicker as VwcSimpleColorPickerElement, registerSimpleColorPicker, simpleColorPickerDefinition };

package/simple-color-picker/index.cjs

@@ -0,0 +1,31 @@
+"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}
+		<${e}
+			class="${q}"
+			:anchor="${t=>t._anchorEl}"
+			:open="${t=>t.open}"
+			placement="${t=>t.placement}"
+			offset="4"
+			@keydown="${(t,{event:s})=>!(t.open&&y.handleEscapeKeyAndStopPropogation(s))}"
+		>
+			<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-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})}
+			</div>
+		</${e}>
+	`},z=a.defineVividComponent("simple-color-picker",h,L,[v.popupDefinition,m.iconDefinition],{styles:x}),M=a.createRegisterFunction(z);M();

package/simple-color-picker/index.js

@@ -0,0 +1,250 @@
+import { V as g, D as p, a as d, o as C, n as b, h as u, c as k, d as y } from "../bundled/vivid-element.js";
+import { P as _, p as E } from "../bundled/definition9.js";
+import { I as x, i as S } from "../bundled/definition2.js";
+import { A as $, a as A } from "../bundled/anchored.js";
+import { F as P } from "../bundled/form-associated.js";
+import { L } from "../bundled/localized.js";
+import { F as z } from "../bundled/form-element.js";
+import { h as R } from "../bundled/index.js";
+import { c as w } from "../bundled/class-names.js";
+import { r as M } from "../bundled/repeat.js";
+import { w as F } from "../bundled/when.js";
+const I = ":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 D(a) {
+  if (!a) return null;
+  const e = a.trim().replace(/^#/, "");
+  return /^[0-9a-fA-F]{6}$/.test(e) ? e.toLowerCase() : null;
+}
+function v(a) {
+  const e = D(a);
+  if (!e) return 0;
+  const r = parseInt(e.slice(0, 2), 16) / 255, s = parseInt(e.slice(2, 4), 16) / 255, t = parseInt(e.slice(4, 6), 16) / 255, o = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4), n = s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4), i = t <= 0.03928 ? t / 12.92 : Math.pow((t + 0.055) / 1.055, 2.4);
+  return 0.2126 * o + 0.7152 * n + 0.0722 * i;
+}
+function O(a, e) {
+  const r = v(a), s = v(e), t = Math.max(r, s), o = Math.min(r, s);
+  return (t + 0.05) / (o + 0.05);
+}
+function T(a, e) {
+  return e || (e = document.querySelector(".vvd-root") || document.documentElement), getComputedStyle(e).getPropertyValue(a).trim();
+}
+var q = Object.defineProperty, h = (a, e, r, s) => {
+  for (var t = void 0, o = a.length - 1, n; o >= 0; o--)
+    (n = a[o]) && (t = n(e, r, t) || t);
+  return t && q(e, r, t), t;
+};
+class l extends L(
+  $(z(P(g)))
+) {
+  constructor() {
+    super(...arguments), this.proxy = document.createElement("input"), this.open = !1, this.placement = "top-start", this.swatches = [], this.swatchesPerRow = 7, this._canvasColor = "", this.#o = () => {
+      this.open || p.queueUpdate(() => this.open = !0);
+    }, this.#s = (e) => {
+      (e.key === "Enter" || e.key === " ") && (this.open || p.queueUpdate(() => this.open = !0), e.preventDefault());
+    }, this.#r = (e) => {
+      const r = !this.contains(e.target), s = this._anchorEl?.contains(e.target);
+      (r || s) && (this.open = !1);
+    }, this.#a = (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, s) => {
+      const t = this.swatchesPerRow, o = this.swatches.length, n = Math.floor(s / t), i = s % t, f = Math.ceil(o / t);
+      switch (e.key) {
+        case "ArrowRight":
+          return i < t - 1 && s + 1 < o && this.#e(s + 1), !1;
+        case "ArrowLeft":
+          return i > 0 && this.#e(s - 1), !1;
+        case "ArrowDown":
+          return n < f - 1 && s + t < o && this.#e(s + t), !1;
+        case "ArrowUp":
+          return n > 0 && this.#e(s - t), !1;
+        case "PageDown": {
+          const c = (f - 1) * t, m = Math.min(c + i, o - 1);
+          return s !== m && this.#e(m), !1;
+        }
+        case "PageUp": {
+          const c = Math.min(i, o - 1);
+          return s !== c && this.#e(c), !1;
+        }
+        case "Home":
+          return e.ctrlKey ? this.#e(0) : this.#e(n * t), !1;
+        case "End":
+          if (e.ctrlKey)
+            this.#e(o - 1);
+          else {
+            const c = Math.min(
+              (n + 1) * t - 1,
+              o - 1
+            );
+            this.#e(c);
+          }
+          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;
+      }
+    };
+  }
+  /**
+   * @internal
+   */
+  openChanged() {
+    this.#t(), this._anchorEl && this.#n(this._anchorEl), this.open && (this._refreshCanvasColor(), requestAnimationFrame(() => {
+      const e = this.swatches.findIndex(
+        (s) => s.value === this.value
+      ), r = e >= 0 ? e : 0;
+      this.#e(r);
+    }));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.#t(), this._refreshCanvasColor();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.#t();
+  }
+  /**
+   * @internal
+   */
+  #t() {
+    document.removeEventListener("click", this.#r), document.removeEventListener("keydown", this.#a), this.open && this.isConnected && (document.addEventListener("click", this.#r), document.addEventListener("keydown", this.#a));
+  }
+  /**
+   * @internal
+   */
+  _refreshCanvasColor() {
+    this._canvasColor = T("--vvd-color-canvas", this);
+  }
+  /**
+   * @internal
+   */
+  _applyContrastClass(e, r = 3) {
+    return !e || !this._canvasColor ? !1 : O(e, this._canvasColor) < r;
+  }
+  /**
+   * @internal
+   */
+  _anchorElChanged(e, r) {
+    e && this.#l(e), r && this.#c(r);
+  }
+  /**
+   * @internal
+   */
+  #n(e) {
+    e.setAttribute("aria-expanded", this.open.toString()), e.setAttribute("data-expanded", this.open.toString());
+  }
+  /**
+   * @internal
+   */
+  #c(e) {
+    this.#n(e), e.addEventListener("click", this.#o, !0), e.addEventListener("keydown", this.#s), e.setAttribute("aria-haspopup", "true");
+  }
+  /**
+   * @internal
+   */
+  #l(e) {
+    e.removeEventListener("click", this.#o, !0), e.removeEventListener("keydown", this.#s), e.removeAttribute("aria-expanded"), e.removeAttribute("data-expanded"), e.removeAttribute("aria-haspopup");
+  }
+  #o;
+  #s;
+  #r;
+  #a;
+  /**
+   * @internal
+   */
+  #e(e) {
+    if (e < 0 || e >= this.swatches.length) return;
+    this.shadowRoot?.querySelectorAll('[role="gridcell"]')?.[e]?.focus();
+  }
+  /**
+   * @internal
+   */
+  #i() {
+    p.queueUpdate(() => this._anchorEl?.focus());
+  }
+}
+h([
+  d({ mode: "boolean" })
+], l.prototype, "open");
+h([
+  d({ mode: "fromView" })
+], l.prototype, "placement");
+h([
+  C
+], l.prototype, "swatches");
+h([
+  d({
+    attribute: "swatches-per-row",
+    mode: "fromView",
+    converter: b
+  })
+], l.prototype, "swatchesPerRow");
+const K = (a) => w("control"), U = (a) => {
+  const e = a.tagFor(_), r = a.tagFor(x), s = A();
+  return u`
+		${s}
+		<${e}
+			class="${K}"
+			:anchor="${(t) => t._anchorEl}"
+			:open="${(t) => t.open}"
+			placement="${(t) => t.placement}"
+			offset="4"
+			@keydown="${(t, { event: o }) => !(t.open && R(o))}"
+		>
+			<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-label="${(t) => t.locale.simpleColorPicker.colorPaletteLabel}">
+				${M(
+    (t) => t.swatches,
+    u`
+						<button
+							class="swatch ${(t, o) => w(
+      o.parent.value === t.value ? "selected" : "",
+      o.parent._applyContrastClass(t.value) ? "contrast" : ""
+    )}"
+							role="gridcell"
+							style="--swatch-color: ${(t) => t.value};"
+							tabindex="${(t, o) => o.index === 0 ? "0" : "-1"}"
+							aria-label="${(t, o) => o.parent.locale.simpleColorPicker.colorSwatchLabel(
+      t.value,
+      t.label,
+      o.parent.value === t.value
+    )}"
+							@click="${(t, o) => o.parent._handleSwatchSelection(t)}"
+							@keydown="${(t, o) => o.parent._handleSwatchKeydown(
+      o.event,
+      t,
+      o.index
+    )}"
+						>
+							${F(
+      (t, o) => o.parent.value === t.value,
+      u`<${r} size="-6" name="check-solid" aria-hidden="true"></${r}>`
+    )}
+						</button>
+					`,
+    { positioning: !0 }
+  )}
+			</div>
+		</${e}>
+	`;
+}, V = y(
+  "simple-color-picker",
+  l,
+  U,
+  [E, S],
+  {
+    styles: I
+  }
+), B = k(
+  V
+);
+B();