@vonage/vivid 5.3.0 → 5.5.0

package/color-picker/index.js

@@ -1,133 +1,136 @@
-import { V as ee, a as x, o as G, n as te, h as n, c as oe, d as se } from "../bundled/vivid-element.js";
-import { P as re, p as ae } from "../bundled/definition9.js";
+import { V as ee, a as y, o as L, n as te, h as n, c as oe, d as re } from "../bundled/vivid-element.js";
+import { P as se, p as ae } from "../bundled/definition9.js";
 import { I as ie, i as le } from "../bundled/definition2.js";
 import { W as ne, f as ce } from "../bundled/mixins.js";
 import { D as de, d as pe } from "../bundled/delegates-aria.js";
-import { B as he, i as f } from "../bundled/base-color-picker.js";
-import { W as ue } from "../bundled/with-contextual-help.js";
-import { W as ve } from "../bundled/with-error-text.js";
-import { W as fe } from "../bundled/with-success-text.js";
-import { T as be, t as me } from "../bundled/definition10.js";
-import { B as ge, b as xe } from "../bundled/definition3.js";
-import { r as u } from "../bundled/ref.js";
-import { w as J } from "../bundled/when.js";
-import { s as L } from "../bundled/slotted.js";
-import { r as Ce } from "../bundled/repeat.js";
-import { c as M } from "../bundled/class-names.js";
-const ye = ".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{display:inline-block}.base{display:inline-block;min-inline-size:var(--_color-picker-min-inline-size, 280px)}.control{inline-size:100%}.button{display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:4px;margin:0;background-color:var(--button-color, var(--vvd-color-canvas-text));block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));color:var(--vvd-color-canvas);inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4);text-decoration:none;vertical-align:middle}.button.contrast{color:var(--vvd-color-canvas-text)}.button:not(.disabled){cursor:pointer}.button.disabled{background-color:var(--vvd-color-neutral-300);color:var(--vvd-color-neutral-500);cursor:not-allowed}.button:focus-visible{--focus-stroke-gap-color: transparent;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))}.button [data-vvd-component=icon]{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.dialog{display:flex;flex-direction:column;min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}.dialog .header{display:inline-flex;align-items:center;justify-content:space-between;padding-block:8px;padding-inline:16px}.dialog .header-title{font:var(--vvd-typography-base-extended-bold)}.dialog .body{display:flex;flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px}.dialog .hex-input-wrapper{display:flex;align-items:stretch;gap:8px}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:0 0 auto}.dialog .footer{padding:16px;border-top:1px solid var(--vvd-color-neutral-200)}.dialog .footer-title{display:block;margin-block-end:8px}.dialog .palette{gap:var(--_color-swatches-gap, 8px)}vvd-hex-input{min-width:0;flex:1 1 auto}vvd-hex-input::part(input){width:100%;height:100%;box-sizing:border-box;border:0 none;border-radius:8px;background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);outline:transparent;padding-inline:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4)}vvd-hex-input::part(input):focus-visible{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}vvd-hex-picker{width:auto;height:auto;gap:16px;inline-size:100%}vvd-hex-picker::part(saturation){border-radius:8px;block-size:120px}vvd-hex-picker::part(hue){flex:0 0 8px;border-radius:8px}vvd-hex-picker::part(hue-pointer){width:10px;height:10px}vvd-hex-picker::part(saturation-pointer){width:18px;height:18px}::part(popup-base){inline-size:max-content;min-block-size:var(--_color-picker-popup-min-inline-size, 264px);min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}", v = (o, e = 0, t = 1) => o > t ? t : o < e ? e : o, l = (o, e = 0, t = Math.pow(10, e)) => Math.round(t * o) / t, $e = (o) => Ee(E(o)), E = (o) => (o[0] === "#" && (o = o.substring(1)), o.length < 6 ? {
-  r: parseInt(o[0] + o[0], 16),
-  g: parseInt(o[1] + o[1], 16),
-  b: parseInt(o[2] + o[2], 16),
-  a: o.length === 4 ? l(parseInt(o[3] + o[3], 16) / 255, 2) : 1
+import { h as he } from "../bundled/index.js";
+import { B as ue, i as b } from "../bundled/base-color-picker.js";
+import { W as ve } from "../bundled/with-contextual-help.js";
+import { W as fe } from "../bundled/with-error-text.js";
+import { W as be } from "../bundled/with-success-text.js";
+import { T as me } from "../bundled/trapped-focus.js";
+import { T as ge, t as xe } from "../bundled/definition10.js";
+import { B as ye, b as Ce } from "../bundled/definition3.js";
+import { T as $e, t as ke } from "../bundled/definition11.js";
+import { r as v } from "../bundled/ref.js";
+import { w as E } from "../bundled/when.js";
+import { s as F } from "../bundled/slotted.js";
+import { r as we } from "../bundled/repeat.js";
+import { c as N } from "../bundled/class-names.js";
+const _e = ".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;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:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);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{display:inline-block;--_low-ink-color: var(--vvd-color-neutral-600)}.base{display:inline-block;min-inline-size:var(--_color-picker-min-inline-size, 280px)}.control{inline-size:100%}.button{display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:4px;margin:0;background-color:var(--button-color, var(--vvd-color-canvas-text));block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));color:var(--vvd-color-canvas);inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4);text-decoration:none;vertical-align:middle}.button.contrast{color:var(--vvd-color-canvas-text)}.button:not(.disabled){cursor:pointer}.button.disabled{background-color:var(--vvd-color-neutral-300);color:var(--vvd-color-neutral-500);cursor:not-allowed}.button:focus-visible{--focus-stroke-gap-color: transparent;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))}.button [data-vvd-component=icon]{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.dialog{display:flex;flex-direction:column;min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}.dialog .header{display:inline-flex;align-items:center;justify-content:space-between;padding-block:8px;padding-inline:16px}.dialog .header-title{font:var(--vvd-typography-base-extended-bold);margin-block:0}.dialog .body{display:flex;flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px}.dialog .hex-input-wrapper{display:flex;align-items:stretch;gap:8px}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:0 0 auto}.dialog .footer{padding:16px;border-top:1px solid var(--vvd-color-neutral-200)}.dialog .footer-header{margin-block-end:8px}.dialog .swatches-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.dialog .palette{gap:var(--_color-swatches-gap, 8px)}vvd-hex-input{min-width:0;flex:1 1 auto}vvd-hex-input::part(input),vvd-hex-input>input{width:100%;height:100%;box-sizing:border-box;border:0 none;border-radius:8px;background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);outline:transparent;padding-inline:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4)}vvd-hex-input::part(input):focus-visible,vvd-hex-input>input:focus-visible{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}vvd-hex-picker{width:auto;height:auto;gap:16px;inline-size:100%}vvd-hex-picker::part(saturation){border-radius:8px;block-size:120px}vvd-hex-picker::part(hue){flex:0 0 8px;border-radius:8px}vvd-hex-picker::part(hue-pointer){width:10px;height:10px}vvd-hex-picker::part(saturation-pointer){width:18px;height:18px}::part(popup-base){inline-size:max-content;min-block-size:var(--_color-picker-popup-min-inline-size, 264px);min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0 0 0 0)}", f = (r, e = 0, o = 1) => r > o ? o : r < e ? e : r, l = (r, e = 0, o = Math.pow(10, e)) => Math.round(o * r) / o, Se = (r) => Ie(P(r)), P = (r) => (r[0] === "#" && (r = r.substring(1)), r.length < 6 ? {
+  r: parseInt(r[0] + r[0], 16),
+  g: parseInt(r[1] + r[1], 16),
+  b: parseInt(r[2] + r[2], 16),
+  a: r.length === 4 ? l(parseInt(r[3] + r[3], 16) / 255, 2) : 1
 } : {
-  r: parseInt(o.substring(0, 2), 16),
-  g: parseInt(o.substring(2, 4), 16),
-  b: parseInt(o.substring(4, 6), 16),
-  a: o.length === 8 ? l(parseInt(o.substring(6, 8), 16) / 255, 2) : 1
-}), ke = (o) => Se(_e(o)), we = ({ h: o, s: e, v: t, a: s }) => {
-  const r = (200 - e) * t / 100;
+  r: parseInt(r.substring(0, 2), 16),
+  g: parseInt(r.substring(2, 4), 16),
+  b: parseInt(r.substring(4, 6), 16),
+  a: r.length === 8 ? l(parseInt(r.substring(6, 8), 16) / 255, 2) : 1
+}), Ee = (r) => He(Te(r)), Pe = ({ h: r, s: e, v: o, a: t }) => {
+  const s = (200 - e) * o / 100;
   return {
-    h: l(o),
-    s: l(r > 0 && r < 200 ? e * t / 100 / (r <= 100 ? r : 200 - r) * 100 : 0),
-    l: l(r / 2),
-    a: l(s, 2)
+    h: l(r),
+    s: l(s > 0 && s < 200 ? e * o / 100 / (s <= 100 ? s : 200 - s) * 100 : 0),
+    l: l(s / 2),
+    a: l(t, 2)
   };
-}, H = (o) => {
-  const { h: e, s: t, l: s } = we(o);
-  return `hsl(${e}, ${t}%, ${s}%)`;
-}, _e = ({ h: o, s: e, v: t, a: s }) => {
-  o = o / 360 * 6, e = e / 100, t = t / 100;
-  const r = Math.floor(o), a = t * (1 - e), i = t * (1 - (o - r) * e), C = t * (1 - (1 - o + r) * e), y = r % 6;
+}, T = (r) => {
+  const { h: e, s: o, l: t } = Pe(r);
+  return `hsl(${e}, ${o}%, ${t}%)`;
+}, Te = ({ h: r, s: e, v: o, a: t }) => {
+  r = r / 360 * 6, e = e / 100, o = o / 100;
+  const s = Math.floor(r), i = o * (1 - e), a = o * (1 - (r - s) * e), d = o * (1 - (1 - r + s) * e), C = s % 6;
   return {
-    r: l([t, i, a, a, C, t][y] * 255),
-    g: l([C, t, t, i, a, a][y] * 255),
-    b: l([a, a, C, t, t, i][y] * 255),
-    a: l(s, 2)
+    r: l([o, a, i, i, d, o][C] * 255),
+    g: l([d, o, o, a, i, i][C] * 255),
+    b: l([i, i, d, o, o, a][C] * 255),
+    a: l(t, 2)
   };
-}, b = (o) => {
-  const e = o.toString(16);
+}, m = (r) => {
+  const e = r.toString(16);
   return e.length < 2 ? "0" + e : e;
-}, Se = ({ r: o, g: e, b: t, a: s }) => {
-  const r = s < 1 ? b(l(s * 255)) : "";
-  return "#" + b(o) + b(e) + b(t) + r;
-}, Ee = ({ r: o, g: e, b: t, a: s }) => {
-  const r = Math.max(o, e, t), a = r - Math.min(o, e, t), i = a ? r === o ? (e - t) / a : r === e ? 2 + (t - o) / a : 4 + (o - e) / a : 0;
+}, He = ({ r, g: e, b: o, a: t }) => {
+  const s = t < 1 ? m(l(t * 255)) : "";
+  return "#" + m(r) + m(e) + m(o) + s;
+}, Ie = ({ r, g: e, b: o, a: t }) => {
+  const s = Math.max(r, e, o), i = s - Math.min(r, e, o), a = i ? s === r ? (e - o) / i : s === e ? 2 + (o - r) / i : 4 + (r - e) / i : 0;
   return {
-    h: l(60 * (i < 0 ? i + 6 : i)),
-    s: l(r ? a / r * 100 : 0),
-    v: l(r / 255 * 100),
-    a: s
+    h: l(60 * (a < 0 ? a + 6 : a)),
+    s: l(s ? i / s * 100 : 0),
+    v: l(s / 255 * 100),
+    a: t
   };
-}, U = (o, e) => {
-  if (o === e)
+}, U = (r, e) => {
+  if (r === e)
     return !0;
-  for (const t in o)
-    if (o[t] !== e[t])
+  for (const o in r)
+    if (r[o] !== e[o])
       return !1;
   return !0;
-}, He = (o, e) => o.toLowerCase() === e.toLowerCase() ? !0 : U(E(o), E(e)), N = {}, I = (o) => {
-  let e = N[o];
-  return e || (e = document.createElement("template"), e.innerHTML = o, N[o] = e), e;
-}, A = (o, e, t) => {
-  o.dispatchEvent(new CustomEvent(e, {
+}, ze = (r, e) => r.toLowerCase() === e.toLowerCase() ? !0 : U(P(r), P(e)), D = {}, A = (r) => {
+  let e = D[r];
+  return e || (e = document.createElement("template"), e.innerHTML = r, D[r] = e), e;
+}, M = (r, e, o) => {
+  r.dispatchEvent(new CustomEvent(e, {
     bubbles: !0,
-    detail: t
+    detail: o
   }));
 };
-let d = !1;
-const P = (o) => "touches" in o, Pe = (o) => d && !P(o) ? !1 : (d || (d = P(o)), !0), F = (o, e) => {
-  const t = P(e) ? e.touches[0] : e, s = o.el.getBoundingClientRect();
-  A(o.el, "move", o.getMove({
-    x: v((t.pageX - (s.left + window.pageXOffset)) / s.width),
-    y: v((t.pageY - (s.top + window.pageYOffset)) / s.height)
+let h = !1;
+const H = (r) => "touches" in r, Le = (r) => h && !H(r) ? !1 : (h || (h = H(r)), !0), B = (r, e) => {
+  const o = H(e) ? e.touches[0] : e, t = r.el.getBoundingClientRect();
+  M(r.el, "move", r.getMove({
+    x: f((o.pageX - (t.left + window.pageXOffset)) / t.width),
+    y: f((o.pageY - (t.top + window.pageYOffset)) / t.height)
   }));
-}, Te = (o, e) => {
-  const t = e.keyCode;
-  t > 40 || o.xy && t < 37 || t < 33 || (e.preventDefault(), A(o.el, "move", o.getMove({
-    x: t === 39 ? 0.01 : t === 37 ? -0.01 : t === 34 ? 0.05 : t === 33 ? -0.05 : t === 35 ? 1 : t === 36 ? -1 : 0,
-    y: t === 40 ? 0.01 : t === 38 ? -0.01 : 0
+}, Ae = (r, e) => {
+  const o = e.keyCode;
+  o > 40 || r.xy && o < 37 || o < 33 || (e.preventDefault(), M(r.el, "move", r.getMove({
+    x: o === 39 ? 0.01 : o === 37 ? -0.01 : o === 34 ? 0.05 : o === 33 ? -0.05 : o === 35 ? 1 : o === 36 ? -1 : 0,
+    y: o === 40 ? 0.01 : o === 38 ? -0.01 : 0
   }, !0)));
 };
 class Y {
-  constructor(e, t, s, r) {
-    const a = I(`<div role="slider" tabindex="0" part="${t}" ${s}><div part="${t}-pointer"></div></div>`);
-    e.appendChild(a.content.cloneNode(!0));
-    const i = e.querySelector(`[part=${t}]`);
-    i.addEventListener("mousedown", this), i.addEventListener("touchstart", this), i.addEventListener("keydown", this), this.el = i, this.xy = r, this.nodes = [i.firstChild, i];
+  constructor(e, o, t, s) {
+    const i = A(`<div role="slider" tabindex="0" part="${o}" ${t}><div part="${o}-pointer"></div></div>`);
+    e.appendChild(i.content.cloneNode(!0));
+    const a = e.querySelector(`[part=${o}]`);
+    a.addEventListener("mousedown", this), a.addEventListener("touchstart", this), a.addEventListener("keydown", this), this.el = a, this.xy = s, this.nodes = [a.firstChild, a];
   }
   set dragging(e) {
-    const t = e ? document.addEventListener : document.removeEventListener;
-    t(d ? "touchmove" : "mousemove", this), t(d ? "touchend" : "mouseup", this);
+    const o = e ? document.addEventListener : document.removeEventListener;
+    o(h ? "touchmove" : "mousemove", this), o(h ? "touchend" : "mouseup", this);
   }
   handleEvent(e) {
     switch (e.type) {
       case "mousedown":
       case "touchstart":
-        if (e.preventDefault(), !Pe(e) || !d && e.button != 0)
+        if (e.preventDefault(), !Le(e) || !h && e.button != 0)
           return;
-        this.el.focus(), F(this, e), this.dragging = !0;
+        this.el.focus(), B(this, e), this.dragging = !0;
         break;
       case "mousemove":
       case "touchmove":
-        e.preventDefault(), F(this, e);
+        e.preventDefault(), B(this, e);
         break;
       case "mouseup":
       case "touchend":
         this.dragging = !1;
         break;
       case "keydown":
-        Te(this, e);
+        Ae(this, e);
         break;
     }
   }
   style(e) {
-    e.forEach((t, s) => {
-      for (const r in t)
-        this.nodes[s].style.setProperty(r, t[r]);
+    e.forEach((o, t) => {
+      for (const s in o)
+        this.nodes[t].style.setProperty(s, o[s]);
     });
   }
 }
-class ze extends Y {
+class Me extends Y {
   constructor(e) {
     super(e, "hue", 'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"', !1);
   }
@@ -135,15 +138,15 @@ class ze extends Y {
     this.h = e, this.style([
       {
         left: `${e / 360 * 100}%`,
-        color: H({ h: e, s: 100, v: 100, a: 1 })
+        color: T({ h: e, s: 100, v: 100, a: 1 })
       }
     ]), this.el.setAttribute("aria-valuenow", `${l(e)}`);
   }
-  getMove(e, t) {
-    return { h: t ? v(this.h + e.x * 360, 0, 360) : 360 * e.x };
+  getMove(e, o) {
+    return { h: o ? f(this.h + e.x * 360, 0, 360) : 360 * e.x };
   }
 }
-class Ie extends Y {
+class Fe extends Y {
   constructor(e) {
     super(e, "saturation", 'aria-label="Color"', !0);
   }
@@ -152,44 +155,44 @@ class Ie extends Y {
       {
         top: `${100 - e.v}%`,
         left: `${e.s}%`,
-        color: H(e)
+        color: T(e)
       },
       {
-        "background-color": H({ h: e.h, s: 100, v: 100, a: 1 })
+        "background-color": T({ h: e.h, s: 100, v: 100, a: 1 })
       }
     ]), this.el.setAttribute("aria-valuetext", `Saturation ${l(e.s)}%, Brightness ${l(e.v)}%`);
   }
-  getMove(e, t) {
+  getMove(e, o) {
     return {
-      s: t ? v(this.hsva.s + e.x * 100, 0, 100) : e.x * 100,
-      v: t ? v(this.hsva.v - e.y * 100, 0, 100) : Math.round(100 - e.y * 100)
+      s: o ? f(this.hsva.s + e.x * 100, 0, 100) : e.x * 100,
+      v: o ? f(this.hsva.v - e.y * 100, 0, 100) : Math.round(100 - e.y * 100)
     };
   }
 }
-const Ae = ':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}', Le = "[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}", Me = "[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}", m = Symbol("same"), $ = Symbol("color"), O = Symbol("hsva"), k = Symbol("update"), B = Symbol("parts"), R = Symbol("css"), V = Symbol("sliders");
-let Ne = class extends HTMLElement {
+const Ne = ':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}', De = "[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}", Be = "[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}", g = Symbol("same"), $ = Symbol("color"), O = Symbol("hsva"), k = Symbol("update"), R = Symbol("parts"), K = Symbol("css"), V = Symbol("sliders");
+let Oe = class extends HTMLElement {
   static get observedAttributes() {
     return ["color"];
   }
-  get [R]() {
-    return [Ae, Le, Me];
+  get [K]() {
+    return [Ne, De, Be];
   }
   get [V]() {
-    return [Ie, ze];
+    return [Fe, Me];
   }
   get color() {
     return this[$];
   }
   set color(e) {
-    if (!this[m](e)) {
-      const t = this.colorModel.toHsva(e);
-      this[k](t), this[$] = e;
+    if (!this[g](e)) {
+      const o = this.colorModel.toHsva(e);
+      this[k](o), this[$] = e;
     }
   }
   constructor() {
     super();
-    const e = I(`<style>${this[R].join("")}</style>`), t = this.attachShadow({ mode: "open" });
-    t.appendChild(e.content.cloneNode(!0)), t.addEventListener("move", this), this[B] = this[V].map((s) => new s(t));
+    const e = A(`<style>${this[K].join("")}</style>`), o = this.attachShadow({ mode: "open" });
+    o.appendChild(e.content.cloneNode(!0)), o.addEventListener("move", this), this[R] = this[V].map((t) => new t(o));
   }
   connectedCallback() {
     if (this.hasOwnProperty("color")) {
@@ -197,73 +200,73 @@ let Ne = class extends HTMLElement {
       delete this.color, this.color = e;
     } else this.color || (this.color = this.colorModel.defaultColor);
   }
-  attributeChangedCallback(e, t, s) {
-    const r = this.colorModel.fromAttr(s);
-    this[m](r) || (this.color = r);
+  attributeChangedCallback(e, o, t) {
+    const s = this.colorModel.fromAttr(t);
+    this[g](s) || (this.color = s);
   }
   handleEvent(e) {
-    const t = this[O], s = { ...t, ...e.detail };
-    this[k](s);
-    let r;
-    !U(s, t) && !this[m](r = this.colorModel.fromHsva(s)) && (this[$] = r, A(this, "color-changed", { value: r }));
+    const o = this[O], t = { ...o, ...e.detail };
+    this[k](t);
+    let s;
+    !U(t, o) && !this[g](s = this.colorModel.fromHsva(t)) && (this[$] = s, M(this, "color-changed", { value: s }));
   }
-  [m](e) {
+  [g](e) {
     return this.color && this.colorModel.equal(e, this.color);
   }
   [k](e) {
-    this[O] = e, this[B].forEach((t) => t.update(e));
+    this[O] = e, this[R].forEach((o) => o.update(e));
   }
 };
-const Fe = {
+const Re = {
   defaultColor: "#000",
-  toHsva: $e,
-  fromHsva: ({ h: o, s: e, v: t }) => ke({ h: o, s: e, v: t, a: 1 }),
-  equal: He,
-  fromAttr: (o) => o
+  toHsva: Se,
+  fromHsva: ({ h: r, s: e, v: o }) => Ee({ h: r, s: e, v: o, a: 1 }),
+  equal: ze,
+  fromAttr: (r) => r
 };
-class Oe extends Ne {
+class Ke extends Oe {
   get colorModel() {
-    return Fe;
+    return Re;
   }
 }
-class Q extends Oe {
+class Q extends Ke {
 }
 customElements.define("hex-color-picker", Q);
-const Be = /^#?([0-9A-F]{3,8})$/i, w = (o, e) => {
-  const t = Be.exec(o), s = t ? t[1].length : 0;
-  return s === 3 || // '#rgb' format
-  s === 6 || // '#rrggbb' format
-  !!e && s === 4 || // '#rgba' format
-  !!e && s === 8;
-}, Re = I('<slot><input part="input" spellcheck="false"></slot>'), q = (o, e) => o.replace(/([^0-9A-F]+)/gi, "").substring(0, e ? 8 : 6), D = Symbol("alpha"), g = Symbol("color"), K = Symbol("saved"), _ = Symbol("input"), S = Symbol("init"), W = Symbol("prefix"), h = Symbol("update");
-class Ve extends HTMLElement {
+const Ve = /^#?([0-9A-F]{3,8})$/i, w = (r, e) => {
+  const o = Ve.exec(r), t = o ? o[1].length : 0;
+  return t === 3 || // '#rgb' format
+  t === 6 || // '#rrggbb' format
+  !!e && t === 4 || // '#rgba' format
+  !!e && t === 8;
+}, qe = A('<slot><input part="input" spellcheck="false"></slot>'), q = (r, e) => r.replace(/([^0-9A-F]+)/gi, "").substring(0, e ? 8 : 6), W = Symbol("alpha"), x = Symbol("color"), X = Symbol("saved"), _ = Symbol("input"), S = Symbol("init"), j = Symbol("prefix"), u = Symbol("update");
+class We extends HTMLElement {
   static get observedAttributes() {
     return ["alpha", "color", "prefixed"];
   }
   get color() {
-    return this[g];
+    return this[x];
   }
   set color(e) {
-    this[g] = e, this[h](e);
+    this[x] = e, this[u](e);
   }
   get alpha() {
-    return this[D];
+    return this[W];
   }
   set alpha(e) {
-    this[D] = e, this.toggleAttribute("alpha", e);
-    const t = this.color;
-    t && !w(t, e) && (this.color = t.startsWith("#") ? t.substring(0, t.length === 5 ? 4 : 7) : t.substring(0, t.length === 4 ? 3 : 6));
+    this[W] = e, this.toggleAttribute("alpha", e);
+    const o = this.color;
+    o && !w(o, e) && (this.color = o.startsWith("#") ? o.substring(0, o.length === 5 ? 4 : 7) : o.substring(0, o.length === 4 ? 3 : 6));
   }
   get prefixed() {
-    return this[W];
+    return this[j];
   }
   set prefixed(e) {
-    this[W] = e, this.toggleAttribute("prefixed", e), this[h](this.color);
+    this[j] = e, this.toggleAttribute("prefixed", e), this[u](this.color);
   }
   constructor() {
     super();
     const e = this.attachShadow({ mode: "open" });
-    e.appendChild(Re.content.cloneNode(!0)), e.firstElementChild.addEventListener("slotchange", () => this[S](e));
+    e.appendChild(qe.content.cloneNode(!0)), e.firstElementChild.addEventListener("slotchange", () => this[S](e));
   }
   connectedCallback() {
     if (this[S](this.shadowRoot), this.hasOwnProperty("alpha")) {
@@ -279,80 +282,82 @@ class Ve extends HTMLElement {
     if (this.hasOwnProperty("color")) {
       const e = this.color;
       delete this.color, this.color = e;
-    } else this.color == null ? this.color = this.getAttribute("color") || "" : this[g] && this[h](this[g]);
+    } else this.color == null ? this.color = this.getAttribute("color") || "" : this[x] && this[u](this[x]);
   }
   handleEvent(e) {
-    const t = e.target, { value: s } = t;
+    const o = e.target, { value: t } = o;
     switch (e.type) {
       case "input":
-        const r = q(s, this.alpha);
-        this[K] = this.color, (w(r, this.alpha) || s === "") && (this.color = r, this.dispatchEvent(new CustomEvent("color-changed", {
+        const s = q(t, this.alpha);
+        this[X] = this.color, (w(s, this.alpha) || t === "") && (this.color = s, this.dispatchEvent(new CustomEvent("color-changed", {
           bubbles: !0,
-          detail: { value: r ? "#" + r : "" }
+          detail: { value: s ? "#" + s : "" }
         })));
         break;
       case "blur":
-        s && !w(s, this.alpha) && (this.color = this[K]);
+        t && !w(t, this.alpha) && (this.color = this[X]);
     }
   }
-  attributeChangedCallback(e, t, s) {
-    e === "color" && this.color !== s && (this.color = s);
-    const r = s != null;
-    e === "alpha" && this.alpha !== r && (this.alpha = r), e === "prefixed" && this.prefixed !== r && (this.prefixed = r);
+  attributeChangedCallback(e, o, t) {
+    e === "color" && this.color !== t && (this.color = t);
+    const s = t != null;
+    e === "alpha" && this.alpha !== s && (this.alpha = s), e === "prefixed" && this.prefixed !== s && (this.prefixed = s);
   }
   [S](e) {
-    let t = this.querySelector("input");
-    if (!t) {
-      let s;
-      for (; s = this.firstChild; )
-        s.remove();
-      t = e.querySelector("input");
+    let o = this.querySelector("input");
+    if (!o) {
+      let t;
+      for (; t = this.firstChild; )
+        t.remove();
+      o = e.querySelector("input");
     }
-    t.addEventListener("input", this), t.addEventListener("blur", this), this[_] = t, this[h](this.color);
+    o.addEventListener("input", this), o.addEventListener("blur", this), this[_] = o, this[u](this.color);
   }
-  [h](e) {
+  [u](e) {
     this[_] && (this[_].value = e == null || e == "" ? "" : (this.prefixed ? "#" : "") + q(e, this.alpha));
   }
 }
-class Z extends Ve {
+class Z extends We {
 }
 customElements.define("hex-input", Z);
-var qe = Object.defineProperty, p = (o, e, t, s) => {
-  for (var r = void 0, a = o.length - 1, i; a >= 0; a--)
-    (i = o[a]) && (r = i(e, t, r) || r);
-  return r && qe(e, t, r), r;
+var Xe = Object.defineProperty, p = (r, e, o, t) => {
+  for (var s = void 0, i = r.length - 1, a; i >= 0; i--)
+    (a = r[i]) && (s = a(e, o, s) || s);
+  return s && Xe(e, o, s), s;
 };
-const T = "vvd-hex-picker", z = "vvd-hex-input";
-class De extends Q {
+const I = "vvd-hex-picker", z = "vvd-hex-input";
+class je extends Q {
   static {
     this.displayName = "VvdHexPicker";
   }
 }
-class Ke extends Z {
+class Ge extends Z {
   static {
     this.displayName = "VvdHexInput";
   }
 }
-customElements.get(T) || customElements.define(T, De);
-customElements.get(z) || customElements.define(z, Ke);
-const X = T, j = z;
-class c extends ue(
+customElements.get(I) || customElements.define(I, je);
+customElements.get(z) || customElements.define(z, Ge);
+const G = I, J = z;
+class c extends ve(
   ne(
-    ve(fe(de(he(ee))))
+    fe(
+      be(
+        de(me(ue(ee)))
+      )
+    )
   )
 ) {
   constructor() {
-    super(...arguments), this.disableSavedColors = !1, this.savedColors = [], this.maxSwatches = 6, this.copyIconName = "copy-2-line", this.#e = null, this._copyValueToClipboard = async (e) => {
+    super(...arguments), this.disableSavedColors = !1, this.savedColors = [], this.maxSwatches = 6, this.#t = (e) => {
+      this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl) || (this.open = !1);
+    }, this.copyIconName = "copy-2-line", this.#e = null, this._copyValueToClipboard = async (e) => {
       try {
-        await navigator.clipboard.writeText(e), this._setTemporaryCopyIcon("check-circle-line");
+        await navigator.clipboard.writeText(e), this._setTemporaryCopyIcon("check-circle-line"), this._ariaLiveDescription = this.locale.colorPicker.copySuccessMessage(e);
       } catch {
-        alert(this.locale?.colorPicker?.copyErrorText), this._setTemporaryCopyIcon("error-line");
+        alert(this.locale.colorPicker.copyErrorText), this._setTemporaryCopyIcon("error-line"), this._ariaLiveDescription = this.locale.colorPicker.copyErrorText;
       }
-    }, this.#t = (e) => {
-      this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl) || (this.open = !1);
-    }, this.#o = (e) => {
-      e.key === "Escape" && (this.open = !1);
-    };
+    }, this._ariaLiveDescription = "";
   }
   static {
     this.HEX_COLOR_PATTERN = /^#(([0-9a-fA-F]{2}){3}|([0-9a-fA-F]){3})$/;
@@ -371,6 +376,14 @@ class c extends ue(
   handleChange() {
     this.$emit("change");
   }
+  /**
+   * @internal
+   */
+  openChanged(e, o) {
+    o && this.isConnected && requestAnimationFrame(() => {
+      this._refreshCanvasColor();
+    });
+  }
   /**
    * @internal
    */
@@ -389,6 +402,55 @@ class c extends ue(
   _handleColorSaving() {
     this._saveCurrentColor();
   }
+  /**
+   * @internal
+   */
+  _saveCurrentColor() {
+    const e = this.value;
+    if (typeof e != "string" || !b(e)) return;
+    const o = Array.isArray(this.savedColors) ? [...this.savedColors] : [], t = o.findIndex((s) => s?.value === e);
+    t !== -1 && o.splice(t, 1), o.unshift({ value: e }), this.savedColors = o.slice(0, this._maxSwatchesNormalized), this._setSavedColors(this.savedColors);
+  }
+  /**
+   * @internal
+   */
+  _loadSavedColors() {
+    try {
+      const e = localStorage.getItem(this._savedColorsStorageKey);
+      if (!e) return [];
+      const o = JSON.parse(e);
+      return Array.isArray(o) ? o.filter(
+        (t) => t && typeof t.value == "string" && b(t.value)
+      ).map((t) => ({
+        value: t.value,
+        label: typeof t.label == "string" ? t.label : void 0
+      })) : [];
+    } catch {
+      return [];
+    }
+  }
+  /**
+   * @internal
+   */
+  _setSavedColors(e) {
+    try {
+      localStorage.setItem(
+        this._savedColorsStorageKey,
+        JSON.stringify(e)
+      );
+    } catch {
+    }
+  }
+  /**
+   * Get all color swatches combined, both from swatches property and saved colors
+   * @internal
+   */
+  get allSwatches() {
+    const e = Array.isArray(this.swatches) ? this.swatches : [], o = Array.isArray(this.savedColors) ? this.savedColors : [], t = /* @__PURE__ */ new Set(), s = [], i = (a) => {
+      !a || typeof a.value != "string" || !b(a.value) || t.has(a.value) || (t.add(a.value), s.push(a));
+    };
+    return this.disableSavedColors || o.forEach(i), e.forEach(i), s.slice(0, this._maxSwatchesNormalized);
+  }
   /**
    * @internal
    */
@@ -411,21 +473,21 @@ class c extends ue(
   /**
    * @internal
    */
-  valueChanged(e, t) {
-    this._vcHexPickerEl && typeof t == "string" && (this._vcHexPickerEl.color = t), this._vcHexInputEl && typeof t == "string" && (this._vcHexInputEl.color = t);
+  valueChanged(e, o) {
+    this._vcHexPickerEl && typeof o == "string" && (this._vcHexPickerEl.color = o), this._vcHexInputEl && typeof o == "string" && (this._vcHexInputEl.color = o);
   }
   /**
    * @internal
    */
   _onTextFieldInput(e) {
-    const t = e.currentTarget;
-    this.value = t.value;
+    const o = e.currentTarget;
+    this.value = o.value;
   }
   /**
    * @internal
    */
   get _buttonColor() {
-    return this._canvasColor || this._refreshCanvasColor(), this.value && f(this.value) ? this.value : "var(--vvd-color-canvas-text)";
+    return this._canvasColor || this._refreshCanvasColor(), this.value && b(this.value) ? this.value : "var(--vvd-color-canvas-text)";
   }
   /**
    * @internal
@@ -442,207 +504,210 @@ class c extends ue(
   /**
    * @internal
    */
-  _isInPath(e, t) {
-    if (!t) return !1;
-    const s = e.composedPath?.();
-    return !!(s && s.includes(t));
-  }
-  #e;
-  /**
-   * @internal
-   */
-  _setTemporaryCopyIcon(e, t = 2e3) {
-    this.copyIconName = e, this.#e && clearTimeout(this.#e), this.#e = setTimeout(() => {
-      this.copyIconName = "copy-2-line", this.#e = null;
-    }, t);
+  _isInPath(e, o) {
+    if (!o) return !1;
+    const t = e.composedPath?.();
+    return !!(t && t.includes(o));
   }
+  #t;
   connectedCallback() {
-    super.connectedCallback(), this._refreshCanvasColor(), this.savedColors = this._loadSavedColors(), document.addEventListener("mousedown", this.#t, !0), document.addEventListener("keydown", this.#o);
+    super.connectedCallback(), this.savedColors = this._loadSavedColors(), document.addEventListener("mousedown", this.#t, !0);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), document.removeEventListener(
       "mousedown",
       this.#t,
       !0
-    ), document.removeEventListener("keydown", this.#o);
+    );
   }
-  #t;
-  #o;
+  #e;
   /**
    * @internal
    */
-  _saveCurrentColor() {
-    const e = this.value;
-    if (typeof e != "string" || !f(e)) return;
-    const t = Array.isArray(this.savedColors) ? [...this.savedColors] : [], s = t.findIndex((r) => r?.value === e);
-    s !== -1 && t.splice(s, 1), t.unshift({ value: e }), this.savedColors = t.slice(0, this._maxSwatchesNormalized), this._setSavedColors(this.savedColors);
+  _setTemporaryCopyIcon(e, o = 2e3) {
+    this.copyIconName = e, this.#e && clearTimeout(this.#e), this.#e = setTimeout(() => {
+      this.copyIconName = "copy-2-line", this.#e = null;
+    }, o);
   }
+  // --- Trapped focus ---
   /**
    * @internal
    */
-  _loadSavedColors() {
-    try {
-      const e = localStorage.getItem(this._savedColorsStorageKey);
-      if (!e) return [];
-      const t = JSON.parse(e);
-      return Array.isArray(t) ? t.filter(
-        (s) => s && typeof s.value == "string" && f(s.value)
-      ).map((s) => ({
-        value: s.value,
-        label: typeof s.label == "string" ? s.label : void 0
-      })) : [];
-    } catch {
-      return [];
-    }
+  _onBaseKeydown(e) {
+    return this.open && he(e) ? (this.open = !1, !1) : !this._trappedFocus(e, () => this._focusableElsWithinDialog());
   }
   /**
    * @internal
    */
-  _setSavedColors(e) {
-    try {
-      localStorage.setItem(
-        this._savedColorsStorageKey,
-        JSON.stringify(e)
-      );
-    } catch {
+  _focusableElsWithinDialog() {
+    return this._popupEl.querySelectorAll(
+      'button:not([role="gridcell"]), [data-vvd-component="button"], vwc-button:not([role="gridcell"])'
+    );
+  }
+  /**
+   * @internal
+   */
+  _handleCellKeydown(e, o, t, s) {
+    if (e.key === "Tab") {
+      e.preventDefault();
+      const i = this._focusableElsWithinDialog(), a = Array.prototype.indexOf.call(
+        i,
+        e.currentTarget
+      ), d = e.shiftKey ? (a - 1 + i.length) % i.length : (a + 1) % i.length;
+      return i[d]?.focus(), !1;
     }
+    return super._handleCellKeydown(e, o, t, s);
   }
   /**
-   * Get all color swatches combined, both from swatches property and saved colors
    * @internal
    */
-  get allSwatches() {
-    const e = Array.isArray(this.swatches) ? this.swatches : [], t = Array.isArray(this.savedColors) ? this.savedColors : [], s = /* @__PURE__ */ new Set(), r = [], a = (i) => {
-      !i || typeof i.value != "string" || !f(i.value) || s.has(i.value) || (s.add(i.value), r.push(i));
-    };
-    return this.disableSavedColors || t.forEach(a), e.forEach(a), r.slice(0, this._maxSwatchesNormalized);
+  _handleSwatchSelection(e) {
+    this.value !== e && (this._ariaLiveDescription = this.locale.colorPicker.selectionSuccessMessage(e)), super._handleSwatchSelection(e);
   }
 }
 p([
-  x
+  y
 ], c.prototype, "placeholder");
 p([
-  x({ attribute: "saved-colors-key" })
+  y({ attribute: "saved-colors-key" })
 ], c.prototype, "savedColorsKey");
 p([
-  x({
+  y({
     mode: "boolean",
     attribute: "disable-saved-colors"
   })
 ], c.prototype, "disableSavedColors");
 p([
-  G
+  L
 ], c.prototype, "savedColors");
 p([
-  x({
+  y({
     attribute: "max-swatches",
     mode: "fromView",
     converter: te
   })
 ], c.prototype, "maxSwatches");
 p([
-  G
+  L
 ], c.prototype, "copyIconName");
-function We(o, e) {
+p([
+  L
+], c.prototype, "_ariaLiveDescription");
+function Je(r, e) {
   return n`
-		<${o} 
+		<${r} 
 			id="text-field"
-			class="${(s) => M("control")}"
+			class="${(t) => N("control")}"
 			pattern="${c.HEX_COLOR_PATTERN.source}"
 			maxlength="7"
-			label="${(s) => s.label}"
-			:value="${(s) => s.value}"
-			placeholder="${(s) => s.placeholder}"
-			helper-text="${(s) => s.helperText}"
-			error-text="${(s) => s.errorValidationMessage}"
-			success-text="${(s) => s.successText}"
-			?disabled="${(s) => s.disabled}"
-			?required="${(s) => s.required}"
-			@input='${(s, r) => s._onTextFieldInput(r.event)}'
-			@change="${(s) => s.handleChange()}"
-			@blur="${(s) => {
-    s.$emit("blur", void 0, { bubbles: !1 });
+			label="${(t) => t.label}"
+			:value="${(t) => t.value}"
+			placeholder="${(t) => t.placeholder}"
+			helper-text="${(t) => t.helperText}"
+			error-text="${(t) => t.errorValidationMessage}"
+			success-text="${(t) => t.successText}"
+			?disabled="${(t) => t.disabled}"
+			?required="${(t) => t.required}"
+			@input='${(t, s) => t._onTextFieldInput(s.event)}'
+			@change="${(t) => t.handleChange()}"
+			@blur="${(t) => {
+    t.$emit("blur", void 0, { bubbles: !1 });
   }}"
-			@focus="${(s) => {
-    s.$emit("focus", void 0, { bubbles: !1 });
+			@focus="${(t) => {
+    t.$emit("focus", void 0, { bubbles: !1 });
   }}"
 			${pe()}
-			${u("_textFieldEl")}
+			${v("_textFieldEl")}
 		>
 			<button 
-				aria-label="${(s) => s.locale.colorPicker.pickerButtonLabel}"
-				class="button ${(s) => M(
-    s._applyContrastClass(s._buttonColor) ? "contrast" : "",
-    s.disabled ? "disabled" : ""
+				aria-label="${(t) => t.locale.colorPicker.pickerButtonLabel}"
+				aria-expanded="${(t) => t.open}"
+  			aria-haspopup="dialog"
+				class="button ${(t) => N(
+    t._applyContrastClass(t._buttonColor) ? "contrast" : "",
+    t.disabled ? "disabled" : ""
   )}" 
-				style="--button-color: ${(s) => s._buttonColor};" 
-				?disabled="${(s) => s.disabled}"
-				@click="${(s) => s._onButtonClick()}"
+				style="--button-color: ${(t) => t._buttonColor};" 
+				?disabled="${(t) => t.disabled}"
+				@click="${(t) => t._onButtonClick()}"
 				slot="action-items" 
-				${u("_buttonEl")}>
+				${v("_buttonEl")}>
 				<${e} name="edit-line"></${e}>
 			</button>
 			<slot
-				slot="${(s) => s._helperTextSlottedContent?.length ? "helper-text" : void 0}"
+				slot="${(t) => t._helperTextSlottedContent?.length ? "helper-text" : void 0}"
 				name="helper-text"
-				${L("_helperTextSlottedContent")}
+				${F("_helperTextSlottedContent")}
 			></slot>
 			<slot
-				slot='${(s) => s._contextualHelpSlottedContent?.length ? "contextual-help" : void 0}'
+				slot='${(t) => t._contextualHelpSlottedContent?.length ? "contextual-help" : void 0}'
 				name='contextual-help'
-				${L("_contextualHelpSlottedContent")}
+				${F("_contextualHelpSlottedContent")}
 			></slot>
-		</${o}>
+		</${r}>
 	`;
 }
-function Xe(o, e) {
+function Ue(r, e) {
   return n`
 		<div class="header">
-			<span class="header-title" id="color-picker-title">
-				<slot name="popup-text">${(t) => t.locale.colorPicker.popupLabel}</slot>
-			</span>
-			<${o} size="condensed" 
-				aria-label="${(t) => t.locale.colorPicker.closeButtonLabel}" 
-				@click="${(t) => t._handleCloseRequest()}">
+			<h2 class="header-title" id="color-picker-title">
+				<slot name="popup-text">${(o) => o.locale.colorPicker.popupLabel}</slot>
+			</h2>
+			<${r} size="condensed" 
+				aria-label="${(o) => o.locale.colorPicker.closeButtonLabel}" 
+				@click="${(o) => o._handleCloseRequest()}">
 				<${e} slot="icon" name="close-line"></${e}>
-			</${o}>
+			</${r}>
 		</div>
 	`;
 }
-function je(o, e) {
+function Ye(r, e, o) {
   return n`
 		<div class="body">
-			<${n.partial(X)}
+			<${n.partial(G)}
 				part="hex-picker"
 				color="${(t) => t.value}"
 				@color-changed="${(t, s) => t._onPickerColorChanged(s.event)}"
-				${u("_vcHexPickerEl")}
-			></${n.partial(X)}>
+				${v("_vcHexPickerEl")}
+			></${n.partial(G)}>
 			<div class="hex-input-wrapper">
-				<${n.partial(j)}
+				<${n.partial(J)}
 					part="hex-input"
 					prefixed
 					color="${(t) => t.value}"
 					@color-changed="${(t, s) => t._onPickerColorChanged(s.event)}"
-					${u("_vcHexInputEl")}
-				></${n.partial(j)}>
-				<${o} size="normal" 
-					aria-label="${(t) => t.locale.colorPicker.copyButtonLabel}" 
-					@click="${(t) => t._copyValueToClipboard(t.value)}">
-					<${e} slot="icon" name="${(t) => t.copyIconName}"></${e}>
+					${v("_vcHexInputEl")}
+				>
+					<input name="hex-code-input" aria-label="${(t) => t.locale.colorPicker.hexInputLabel}" 
+						placeholder="${(t) => t.placeholder}"
+    				@blur="${(t, s) => s.event.stopImmediatePropagation()}"
+						part="input">
+				</${n.partial(J)}>
+				<${o} placement="top" 
+					text="${(t) => t.locale.colorPicker.copyButtonLabel}" 
+					exportparts="vvd-theme-alternate">
+					<${r} 
+						slot="anchor" size="normal" 
+						aria-label="${(t) => t.locale.colorPicker.copyButtonLabel}" 
+						@click="${(t) => t._copyValueToClipboard(t.value)}">
+						<${e} slot="icon" name="${(t) => t.copyIconName}"></${e}>
+					</${r}>
 				</${o}>
 			</div>
 		</div>
 	`;
 }
-function Ge(o, e) {
+function Qe(r, e, o) {
   return n`
 		<div class="footer">
-			<span class="footer-title" id="color-picker-footer-title"
-				><slot name="swatches-text"
-					>${(t) => t.locale.colorPicker.swatchesLabel}</slot
-				></span
-			>
+			<div class="footer-header">
+				<span class="footer-title" id="color-picker-footer-title"
+					><slot name="swatches-text"
+						>${(t) => t.locale.colorPicker.swatchesLabel}</slot
+					></span
+				>
+				${E((t) => !t.disableSavedColors, Ze())}
+			</div>
 			<div
 				class="palette"
 				role="grid"
@@ -651,76 +716,97 @@ function Ge(o, e) {
 				style="--swatches-per-row: ${(t) => t._getRowLength()};"
 				aria-labelledby="color-picker-footer-title"
 			>
-				${Ce(
+				${we(
     (t) => t.allSwatches,
-    (t) => t._renderColorSwatch(e),
+    (t) => t._renderColorSwatch(e, o),
     { positioning: !0 }
   )}
-				${J(
+				${E(
     (t) => !t.disableSavedColors,
     n`
-					<${o}
-						appearance="outlined"
-						size="super-condensed"
-						role="gridcell"
-						tabindex="${(t) => t.allSwatches.length ? "-1" : "0"}"
-						aria-label="${(t) => t.locale.colorPicker.saveButtonLabel}"
-						@click="${(t) => t._saveCurrentColor()}"
-						@keydown="${(t, s) => t._handleCellKeydown(
+						<${o} placement="top" 
+							text="${(t) => t.locale.colorPicker.saveButtonLabel}" 
+							exportparts="vvd-theme-alternate">
+							<${r}
+								slot="anchor"
+								appearance="outlined"
+								size="super-condensed"
+								role="gridcell"
+								tabindex="${(t) => t.allSwatches.length ? "-1" : "0"}"
+								aria-label="${(t) => t.locale.colorPicker.saveButtonLabel}"
+								@click="${(t) => t._saveCurrentColor()}"
+								@keydown="${(t, s) => t._handleCellKeydown(
       s.event,
       t.value,
       t.allSwatches.length,
       !0
     )}">
-					>
-						<${e} slot="icon" name="plus-line"></${e}>
-					</${o}>
-				`
+								<${e} slot="icon" name="plus-line"></${e}>
+							</${r}>
+						</${o}>
+					`
   )}
 			</div>
 		</div>
 	`;
 }
-const Je = (o) => {
-  const e = o.tagFor(be), t = o.tagFor(ie), s = o.tagFor(re), r = o.tagFor(ge);
+function Ze() {
   return n`
-		<div class="base">
-			${We(e, t)}
-			<${s}
+		<span
+			id="swatches-count"
+			class="swatches-count"
+			aria-label="${(r) => r.locale.colorPicker.maxSwatchesMessage(
+    r.allSwatches.length,
+    r.maxSwatches
+  )}"
+			>${(r) => `${r.allSwatches.length}/${r.maxSwatches}`}</span
+		>
+	`;
+}
+const et = (r) => {
+  const e = r.tagFor(ge), o = r.tagFor(ie), t = r.tagFor(se), s = r.tagFor(ye), i = r.tagFor($e);
+  return n`
+		<div class="base" @keydown="${(a, { event: d }) => a._onBaseKeydown(d)}">
+			<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
+				${(a) => a._ariaLiveDescription}
+			</span>
+			${Je(e, o)}
+			<${t}
 				:open="${(a) => a.open}"
 				:anchor="${(a) => a._buttonEl}"
 				placement="top"
 				offset="10" 
-				${u("_popupEl")}>
+				${v("_popupEl")}>
 				<div class="dialog" 
 					role="dialog" 
 					aria-modal="true" 
 					aria-labelledby="color-picker-title">
-					${Xe(r, t)}
-					${je(r, t)}
-					${J(
+					${Ue(s, o)}
+					${Ye(s, o, i)}
+					${E(
     (a) => !a.disableSavedColors || a.allSwatches.length > 0,
-    Ge(r, t)
+    Qe(s, o, i)
   )}
 				</div>
-			</${s}>
+			</${t}>
 		</div>
 	`;
-}, Ue = se(
+}, tt = re(
   "color-picker",
   c,
-  Je,
+  et,
   [
     ae,
     le,
-    me,
     xe,
+    Ce,
+    ke,
     ce
   ],
   {
-    styles: ye
+    styles: _e
   }
-), Ye = oe(
-  Ue
+), ot = oe(
+  tt
 );
-Ye();
+ot();