@cruglobal/cornerstone-components 0.7.0 → 0.7.1

package/dist/bundled/chunks/chunk.AHGRUSDK.js

@@ -1,2269 +0,0 @@
-/*! Cornerstone Components 0.7.0 - MIT licensed. See LICENSE.md and NOTICE. */
-import {
-  getSwatchLabel,
-  parseCssVar,
-  resolveCssVar
-} from "./chunk.DCMNNLPD.js";
-import {
-  drag
-} from "./chunk.VESZRMIV.js";
-import {
-  visually_hidden_styles_default
-} from "./chunk.VBNHA2WB.js";
-import {
-  isTopDismissible,
-  registerDismissible,
-  unregisterDismissible
-} from "./chunk.VE36HSG2.js";
-import {
-  RequiredValidator
-} from "./chunk.JWCSDME6.js";
-import {
-  form_control_styles_default
-} from "./chunk.LWG5H7OI.js";
-import {
-  color_picker_styles_default
-} from "./chunk.BEMZVWA4.js";
-import {
-  HasSlotController
-} from "./chunk.IHXNGREP.js";
-import {
-  clamp
-} from "./chunk.V6RGSF6J.js";
-import {
-  CornerstoneFormAssociatedElement
-} from "./chunk.HNXB5BK2.js";
-import {
-  CsInvalidEvent
-} from "./chunk.ZBHTMSD7.js";
-import {
-  size_styles_default
-} from "./chunk.WMLOKPMQ.js";
-import {
-  o as o3
-} from "./chunk.PKFLKOSS.js";
-import {
-  o as o2
-} from "./chunk.RZ5QECBK.js";
-import {
-  waitForEvent
-} from "./chunk.QRJXWBC2.js";
-import {
-  animateWithClass
-} from "./chunk.CKMYRTBN.js";
-import {
-  e as e2
-} from "./chunk.VKLPFGMH.js";
-import {
-  watch
-} from "./chunk.N6DONW5L.js";
-import {
-  customElement,
-  e,
-  n,
-  r,
-  t
-} from "./chunk.6GJWBDJU.js";
-import {
-  LocalizeController
-} from "./chunk.HGW5EEZU.js";
-import {
-  o
-} from "./chunk.4XDNAFUH.js";
-import {
-  b
-} from "./chunk.IPM67WBE.js";
-import {
-  __decorateClass
-} from "./chunk.4QJR2RKX.js";
-
-// ../../node_modules/@ctrl/tinycolor/dist/module/util.js
-function bound01(n2, max) {
-  if (isOnePointZero(n2)) {
-    n2 = "100%";
-  }
-  const isPercent = isPercentage(n2);
-  n2 = max === 360 ? n2 : Math.min(max, Math.max(0, parseFloat(n2)));
-  if (isPercent) {
-    n2 = parseInt(String(n2 * max), 10) / 100;
-  }
-  if (Math.abs(n2 - max) < 1e-6) {
-    return 1;
-  }
-  if (max === 360) {
-    n2 = (n2 < 0 ? n2 % max + max : n2 % max) / parseFloat(String(max));
-  } else {
-    n2 = n2 % max / parseFloat(String(max));
-  }
-  return n2;
-}
-function clamp01(val) {
-  return Math.min(1, Math.max(0, val));
-}
-function isOnePointZero(n2) {
-  return typeof n2 === "string" && n2.indexOf(".") !== -1 && parseFloat(n2) === 1;
-}
-function isPercentage(n2) {
-  return typeof n2 === "string" && n2.indexOf("%") !== -1;
-}
-function boundAlpha(a) {
-  a = parseFloat(a);
-  if (isNaN(a) || a < 0 || a > 1) {
-    a = 1;
-  }
-  return a;
-}
-function convertToPercentage(n2) {
-  if (Number(n2) <= 1) {
-    return `${Number(n2) * 100}%`;
-  }
-  return n2;
-}
-function pad2(c) {
-  return c.length === 1 ? "0" + c : String(c);
-}
-
-// ../../node_modules/@ctrl/tinycolor/dist/module/conversion.js
-function rgbToRgb(r2, g, b2) {
-  return {
-    r: bound01(r2, 255) * 255,
-    g: bound01(g, 255) * 255,
-    b: bound01(b2, 255) * 255
-  };
-}
-function rgbToHsl(r2, g, b2) {
-  r2 = bound01(r2, 255);
-  g = bound01(g, 255);
-  b2 = bound01(b2, 255);
-  const max = Math.max(r2, g, b2);
-  const min = Math.min(r2, g, b2);
-  let h = 0;
-  let s = 0;
-  const l = (max + min) / 2;
-  if (max === min) {
-    s = 0;
-    h = 0;
-  } else {
-    const d = max - min;
-    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    switch (max) {
-      case r2:
-        h = (g - b2) / d + (g < b2 ? 6 : 0);
-        break;
-      case g:
-        h = (b2 - r2) / d + 2;
-        break;
-      case b2:
-        h = (r2 - g) / d + 4;
-        break;
-      default:
-        break;
-    }
-    h /= 6;
-  }
-  return { h, s, l };
-}
-function hue2rgb(p, q, t2) {
-  if (t2 < 0) {
-    t2 += 1;
-  }
-  if (t2 > 1) {
-    t2 -= 1;
-  }
-  if (t2 < 1 / 6) {
-    return p + (q - p) * (6 * t2);
-  }
-  if (t2 < 1 / 2) {
-    return q;
-  }
-  if (t2 < 2 / 3) {
-    return p + (q - p) * (2 / 3 - t2) * 6;
-  }
-  return p;
-}
-function hslToRgb(h, s, l) {
-  let r2;
-  let g;
-  let b2;
-  h = bound01(h, 360);
-  s = bound01(s, 100);
-  l = bound01(l, 100);
-  if (s === 0) {
-    g = l;
-    b2 = l;
-    r2 = l;
-  } else {
-    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    const p = 2 * l - q;
-    r2 = hue2rgb(p, q, h + 1 / 3);
-    g = hue2rgb(p, q, h);
-    b2 = hue2rgb(p, q, h - 1 / 3);
-  }
-  return { r: r2 * 255, g: g * 255, b: b2 * 255 };
-}
-function rgbToHsv(r2, g, b2) {
-  r2 = bound01(r2, 255);
-  g = bound01(g, 255);
-  b2 = bound01(b2, 255);
-  const max = Math.max(r2, g, b2);
-  const min = Math.min(r2, g, b2);
-  let h = 0;
-  const v = max;
-  const d = max - min;
-  const s = max === 0 ? 0 : d / max;
-  if (max === min) {
-    h = 0;
-  } else {
-    switch (max) {
-      case r2:
-        h = (g - b2) / d + (g < b2 ? 6 : 0);
-        break;
-      case g:
-        h = (b2 - r2) / d + 2;
-        break;
-      case b2:
-        h = (r2 - g) / d + 4;
-        break;
-      default:
-        break;
-    }
-    h /= 6;
-  }
-  return { h, s, v };
-}
-function hsvToRgb(h, s, v) {
-  h = bound01(h, 360) * 6;
-  s = bound01(s, 100);
-  v = bound01(v, 100);
-  const i = Math.floor(h);
-  const f = h - i;
-  const p = v * (1 - s);
-  const q = v * (1 - f * s);
-  const t2 = v * (1 - (1 - f) * s);
-  const mod = i % 6;
-  const r2 = [v, q, p, p, t2, v][mod];
-  const g = [t2, v, v, q, p, p][mod];
-  const b2 = [p, p, t2, v, v, q][mod];
-  return { r: r2 * 255, g: g * 255, b: b2 * 255 };
-}
-function rgbToHex(r2, g, b2, allow3Char) {
-  const hex = [
-    pad2(Math.round(r2).toString(16)),
-    pad2(Math.round(g).toString(16)),
-    pad2(Math.round(b2).toString(16))
-  ];
-  if (allow3Char && hex[0].startsWith(hex[0].charAt(1)) && hex[1].startsWith(hex[1].charAt(1)) && hex[2].startsWith(hex[2].charAt(1))) {
-    return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
-  }
-  return hex.join("");
-}
-function rgbaToHex(r2, g, b2, a, allow4Char) {
-  const hex = [
-    pad2(Math.round(r2).toString(16)),
-    pad2(Math.round(g).toString(16)),
-    pad2(Math.round(b2).toString(16)),
-    pad2(convertDecimalToHex(a))
-  ];
-  if (allow4Char && hex[0].startsWith(hex[0].charAt(1)) && hex[1].startsWith(hex[1].charAt(1)) && hex[2].startsWith(hex[2].charAt(1)) && hex[3].startsWith(hex[3].charAt(1))) {
-    return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
-  }
-  return hex.join("");
-}
-function cmykToRgb(c, m, y, k) {
-  const cConv = c / 100;
-  const mConv = m / 100;
-  const yConv = y / 100;
-  const kConv = k / 100;
-  const r2 = 255 * (1 - cConv) * (1 - kConv);
-  const g = 255 * (1 - mConv) * (1 - kConv);
-  const b2 = 255 * (1 - yConv) * (1 - kConv);
-  return { r: r2, g, b: b2 };
-}
-function rgbToCmyk(r2, g, b2) {
-  let c = 1 - r2 / 255;
-  let m = 1 - g / 255;
-  let y = 1 - b2 / 255;
-  let k = Math.min(c, m, y);
-  if (k === 1) {
-    c = 0;
-    m = 0;
-    y = 0;
-  } else {
-    c = (c - k) / (1 - k) * 100;
-    m = (m - k) / (1 - k) * 100;
-    y = (y - k) / (1 - k) * 100;
-  }
-  k *= 100;
-  return {
-    c: Math.round(c),
-    m: Math.round(m),
-    y: Math.round(y),
-    k: Math.round(k)
-  };
-}
-function convertDecimalToHex(d) {
-  return Math.round(parseFloat(d) * 255).toString(16);
-}
-function convertHexToDecimal(h) {
-  return parseIntFromHex(h) / 255;
-}
-function parseIntFromHex(val) {
-  return parseInt(val, 16);
-}
-function numberInputToObject(color) {
-  return {
-    r: color >> 16,
-    g: (color & 65280) >> 8,
-    b: color & 255
-  };
-}
-
-// ../../node_modules/@ctrl/tinycolor/dist/module/css-color-names.js
-var names = {
-  aliceblue: "#f0f8ff",
-  antiquewhite: "#faebd7",
-  aqua: "#00ffff",
-  aquamarine: "#7fffd4",
-  azure: "#f0ffff",
-  beige: "#f5f5dc",
-  bisque: "#ffe4c4",
-  black: "#000000",
-  blanchedalmond: "#ffebcd",
-  blue: "#0000ff",
-  blueviolet: "#8a2be2",
-  brown: "#a52a2a",
-  burlywood: "#deb887",
-  cadetblue: "#5f9ea0",
-  chartreuse: "#7fff00",
-  chocolate: "#d2691e",
-  coral: "#ff7f50",
-  cornflowerblue: "#6495ed",
-  cornsilk: "#fff8dc",
-  crimson: "#dc143c",
-  cyan: "#00ffff",
-  darkblue: "#00008b",
-  darkcyan: "#008b8b",
-  darkgoldenrod: "#b8860b",
-  darkgray: "#a9a9a9",
-  darkgreen: "#006400",
-  darkgrey: "#a9a9a9",
-  darkkhaki: "#bdb76b",
-  darkmagenta: "#8b008b",
-  darkolivegreen: "#556b2f",
-  darkorange: "#ff8c00",
-  darkorchid: "#9932cc",
-  darkred: "#8b0000",
-  darksalmon: "#e9967a",
-  darkseagreen: "#8fbc8f",
-  darkslateblue: "#483d8b",
-  darkslategray: "#2f4f4f",
-  darkslategrey: "#2f4f4f",
-  darkturquoise: "#00ced1",
-  darkviolet: "#9400d3",
-  deeppink: "#ff1493",
-  deepskyblue: "#00bfff",
-  dimgray: "#696969",
-  dimgrey: "#696969",
-  dodgerblue: "#1e90ff",
-  firebrick: "#b22222",
-  floralwhite: "#fffaf0",
-  forestgreen: "#228b22",
-  fuchsia: "#ff00ff",
-  gainsboro: "#dcdcdc",
-  ghostwhite: "#f8f8ff",
-  goldenrod: "#daa520",
-  gold: "#ffd700",
-  gray: "#808080",
-  green: "#008000",
-  greenyellow: "#adff2f",
-  grey: "#808080",
-  honeydew: "#f0fff0",
-  hotpink: "#ff69b4",
-  indianred: "#cd5c5c",
-  indigo: "#4b0082",
-  ivory: "#fffff0",
-  khaki: "#f0e68c",
-  lavenderblush: "#fff0f5",
-  lavender: "#e6e6fa",
-  lawngreen: "#7cfc00",
-  lemonchiffon: "#fffacd",
-  lightblue: "#add8e6",
-  lightcoral: "#f08080",
-  lightcyan: "#e0ffff",
-  lightgoldenrodyellow: "#fafad2",
-  lightgray: "#d3d3d3",
-  lightgreen: "#90ee90",
-  lightgrey: "#d3d3d3",
-  lightpink: "#ffb6c1",
-  lightsalmon: "#ffa07a",
-  lightseagreen: "#20b2aa",
-  lightskyblue: "#87cefa",
-  lightslategray: "#778899",
-  lightslategrey: "#778899",
-  lightsteelblue: "#b0c4de",
-  lightyellow: "#ffffe0",
-  lime: "#00ff00",
-  limegreen: "#32cd32",
-  linen: "#faf0e6",
-  magenta: "#ff00ff",
-  maroon: "#800000",
-  mediumaquamarine: "#66cdaa",
-  mediumblue: "#0000cd",
-  mediumorchid: "#ba55d3",
-  mediumpurple: "#9370db",
-  mediumseagreen: "#3cb371",
-  mediumslateblue: "#7b68ee",
-  mediumspringgreen: "#00fa9a",
-  mediumturquoise: "#48d1cc",
-  mediumvioletred: "#c71585",
-  midnightblue: "#191970",
-  mintcream: "#f5fffa",
-  mistyrose: "#ffe4e1",
-  moccasin: "#ffe4b5",
-  navajowhite: "#ffdead",
-  navy: "#000080",
-  oldlace: "#fdf5e6",
-  olive: "#808000",
-  olivedrab: "#6b8e23",
-  orange: "#ffa500",
-  orangered: "#ff4500",
-  orchid: "#da70d6",
-  palegoldenrod: "#eee8aa",
-  palegreen: "#98fb98",
-  paleturquoise: "#afeeee",
-  palevioletred: "#db7093",
-  papayawhip: "#ffefd5",
-  peachpuff: "#ffdab9",
-  peru: "#cd853f",
-  pink: "#ffc0cb",
-  plum: "#dda0dd",
-  powderblue: "#b0e0e6",
-  purple: "#800080",
-  rebeccapurple: "#663399",
-  red: "#ff0000",
-  rosybrown: "#bc8f8f",
-  royalblue: "#4169e1",
-  saddlebrown: "#8b4513",
-  salmon: "#fa8072",
-  sandybrown: "#f4a460",
-  seagreen: "#2e8b57",
-  seashell: "#fff5ee",
-  sienna: "#a0522d",
-  silver: "#c0c0c0",
-  skyblue: "#87ceeb",
-  slateblue: "#6a5acd",
-  slategray: "#708090",
-  slategrey: "#708090",
-  snow: "#fffafa",
-  springgreen: "#00ff7f",
-  steelblue: "#4682b4",
-  tan: "#d2b48c",
-  teal: "#008080",
-  thistle: "#d8bfd8",
-  tomato: "#ff6347",
-  turquoise: "#40e0d0",
-  violet: "#ee82ee",
-  wheat: "#f5deb3",
-  white: "#ffffff",
-  whitesmoke: "#f5f5f5",
-  yellow: "#ffff00",
-  yellowgreen: "#9acd32"
-};
-
-// ../../node_modules/@ctrl/tinycolor/dist/module/format-input.js
-function inputToRGB(color) {
-  let rgb = { r: 0, g: 0, b: 0 };
-  let a = 1;
-  let s = null;
-  let v = null;
-  let l = null;
-  let ok = false;
-  let format = false;
-  if (typeof color === "string") {
-    color = stringInputToObject(color);
-  }
-  if (typeof color === "object") {
-    if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
-      rgb = rgbToRgb(color.r, color.g, color.b);
-      ok = true;
-      format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
-    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
-      s = convertToPercentage(color.s);
-      v = convertToPercentage(color.v);
-      rgb = hsvToRgb(color.h, s, v);
-      ok = true;
-      format = "hsv";
-    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
-      s = convertToPercentage(color.s);
-      l = convertToPercentage(color.l);
-      rgb = hslToRgb(color.h, s, l);
-      ok = true;
-      format = "hsl";
-    } else if (isValidCSSUnit(color.c) && isValidCSSUnit(color.m) && isValidCSSUnit(color.y) && isValidCSSUnit(color.k)) {
-      rgb = cmykToRgb(color.c, color.m, color.y, color.k);
-      ok = true;
-      format = "cmyk";
-    }
-    if (Object.prototype.hasOwnProperty.call(color, "a")) {
-      a = color.a;
-    }
-  }
-  a = boundAlpha(a);
-  return {
-    ok,
-    format: color.format || format,
-    r: Math.min(255, Math.max(rgb.r, 0)),
-    g: Math.min(255, Math.max(rgb.g, 0)),
-    b: Math.min(255, Math.max(rgb.b, 0)),
-    a
-  };
-}
-var CSS_INTEGER = "[-\\+]?\\d+%?";
-var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
-var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
-var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
-var PERMISSIVE_MATCH4 = (
-  // eslint-disable-next-line prettier/prettier
-  "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"
-);
-var matchers = {
-  CSS_UNIT: new RegExp(CSS_UNIT),
-  rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
-  rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
-  hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
-  hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
-  hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
-  hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
-  cmyk: new RegExp("cmyk" + PERMISSIVE_MATCH4),
-  hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
-  hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
-  hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
-  hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
-};
-function stringInputToObject(color) {
-  color = color.trim().toLowerCase();
-  if (color.length === 0) {
-    return false;
-  }
-  let named = false;
-  if (names[color]) {
-    color = names[color];
-    named = true;
-  } else if (color === "transparent") {
-    return { r: 0, g: 0, b: 0, a: 0, format: "name" };
-  }
-  let match = matchers.rgb.exec(color);
-  if (match) {
-    return { r: match[1], g: match[2], b: match[3] };
-  }
-  match = matchers.rgba.exec(color);
-  if (match) {
-    return { r: match[1], g: match[2], b: match[3], a: match[4] };
-  }
-  match = matchers.hsl.exec(color);
-  if (match) {
-    return { h: match[1], s: match[2], l: match[3] };
-  }
-  match = matchers.hsla.exec(color);
-  if (match) {
-    return { h: match[1], s: match[2], l: match[3], a: match[4] };
-  }
-  match = matchers.hsv.exec(color);
-  if (match) {
-    return { h: match[1], s: match[2], v: match[3] };
-  }
-  match = matchers.hsva.exec(color);
-  if (match) {
-    return { h: match[1], s: match[2], v: match[3], a: match[4] };
-  }
-  match = matchers.cmyk.exec(color);
-  if (match) {
-    return {
-      c: match[1],
-      m: match[2],
-      y: match[3],
-      k: match[4]
-    };
-  }
-  match = matchers.hex8.exec(color);
-  if (match) {
-    return {
-      r: parseIntFromHex(match[1]),
-      g: parseIntFromHex(match[2]),
-      b: parseIntFromHex(match[3]),
-      a: convertHexToDecimal(match[4]),
-      format: named ? "name" : "hex8"
-    };
-  }
-  match = matchers.hex6.exec(color);
-  if (match) {
-    return {
-      r: parseIntFromHex(match[1]),
-      g: parseIntFromHex(match[2]),
-      b: parseIntFromHex(match[3]),
-      format: named ? "name" : "hex"
-    };
-  }
-  match = matchers.hex4.exec(color);
-  if (match) {
-    return {
-      r: parseIntFromHex(match[1] + match[1]),
-      g: parseIntFromHex(match[2] + match[2]),
-      b: parseIntFromHex(match[3] + match[3]),
-      a: convertHexToDecimal(match[4] + match[4]),
-      format: named ? "name" : "hex8"
-    };
-  }
-  match = matchers.hex3.exec(color);
-  if (match) {
-    return {
-      r: parseIntFromHex(match[1] + match[1]),
-      g: parseIntFromHex(match[2] + match[2]),
-      b: parseIntFromHex(match[3] + match[3]),
-      format: named ? "name" : "hex"
-    };
-  }
-  return false;
-}
-function isValidCSSUnit(color) {
-  if (typeof color === "number") {
-    return !Number.isNaN(color);
-  }
-  return matchers.CSS_UNIT.test(color);
-}
-
-// ../../node_modules/@ctrl/tinycolor/dist/module/index.js
-var TinyColor = class _TinyColor {
-  constructor(color = "", opts = {}) {
-    if (color instanceof _TinyColor) {
-      return color;
-    }
-    if (typeof color === "number") {
-      color = numberInputToObject(color);
-    }
-    this.originalInput = color;
-    const rgb = inputToRGB(color);
-    this.originalInput = color;
-    this.r = rgb.r;
-    this.g = rgb.g;
-    this.b = rgb.b;
-    this.a = rgb.a;
-    this.roundA = Math.round(100 * this.a) / 100;
-    this.format = opts.format ?? rgb.format;
-    this.gradientType = opts.gradientType;
-    if (this.r < 1) {
-      this.r = Math.round(this.r);
-    }
-    if (this.g < 1) {
-      this.g = Math.round(this.g);
-    }
-    if (this.b < 1) {
-      this.b = Math.round(this.b);
-    }
-    this.isValid = rgb.ok;
-  }
-  isDark() {
-    return this.getBrightness() < 128;
-  }
-  isLight() {
-    return !this.isDark();
-  }
-  /**
-   * Returns the perceived brightness of the color, from 0-255.
-   */
-  getBrightness() {
-    const rgb = this.toRgb();
-    return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3;
-  }
-  /**
-   * Returns the perceived luminance of a color, from 0-1.
-   */
-  getLuminance() {
-    const rgb = this.toRgb();
-    let R;
-    let G;
-    let B;
-    const RsRGB = rgb.r / 255;
-    const GsRGB = rgb.g / 255;
-    const BsRGB = rgb.b / 255;
-    if (RsRGB <= 0.03928) {
-      R = RsRGB / 12.92;
-    } else {
-      R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);
-    }
-    if (GsRGB <= 0.03928) {
-      G = GsRGB / 12.92;
-    } else {
-      G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);
-    }
-    if (BsRGB <= 0.03928) {
-      B = BsRGB / 12.92;
-    } else {
-      B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);
-    }
-    return 0.2126 * R + 0.7152 * G + 0.0722 * B;
-  }
-  /**
-   * Returns the alpha value of a color, from 0-1.
-   */
-  getAlpha() {
-    return this.a;
-  }
-  /**
-   * Sets the alpha value on the current color.
-   *
-   * @param alpha - The new alpha value. The accepted range is 0-1.
-   */
-  setAlpha(alpha) {
-    this.a = boundAlpha(alpha);
-    this.roundA = Math.round(100 * this.a) / 100;
-    return this;
-  }
-  /**
-   * Returns whether the color is monochrome.
-   */
-  isMonochrome() {
-    const { s } = this.toHsl();
-    return s === 0;
-  }
-  /**
-   * Returns the object as a HSVA object.
-   */
-  toHsv() {
-    const hsv = rgbToHsv(this.r, this.g, this.b);
-    return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this.a };
-  }
-  /**
-   * Returns the hsva values interpolated into a string with the following format:
-   * "hsva(xxx, xxx, xxx, xx)".
-   */
-  toHsvString() {
-    const hsv = rgbToHsv(this.r, this.g, this.b);
-    const h = Math.round(hsv.h * 360);
-    const s = Math.round(hsv.s * 100);
-    const v = Math.round(hsv.v * 100);
-    return this.a === 1 ? `hsv(${h}, ${s}%, ${v}%)` : `hsva(${h}, ${s}%, ${v}%, ${this.roundA})`;
-  }
-  /**
-   * Returns the object as a HSLA object.
-   */
-  toHsl() {
-    const hsl = rgbToHsl(this.r, this.g, this.b);
-    return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this.a };
-  }
-  /**
-   * Returns the hsla values interpolated into a string with the following format:
-   * "hsla(xxx, xxx, xxx, xx)".
-   */
-  toHslString() {
-    const hsl = rgbToHsl(this.r, this.g, this.b);
-    const h = Math.round(hsl.h * 360);
-    const s = Math.round(hsl.s * 100);
-    const l = Math.round(hsl.l * 100);
-    return this.a === 1 ? `hsl(${h}, ${s}%, ${l}%)` : `hsla(${h}, ${s}%, ${l}%, ${this.roundA})`;
-  }
-  /**
-   * Returns the hex value of the color.
-   * @param allow3Char will shorten hex value to 3 char if possible
-   */
-  toHex(allow3Char = false) {
-    return rgbToHex(this.r, this.g, this.b, allow3Char);
-  }
-  /**
-   * Returns the hex value of the color -with a # prefixed.
-   * @param allow3Char will shorten hex value to 3 char if possible
-   */
-  toHexString(allow3Char = false) {
-    return "#" + this.toHex(allow3Char);
-  }
-  /**
-   * Returns the hex 8 value of the color.
-   * @param allow4Char will shorten hex value to 4 char if possible
-   */
-  toHex8(allow4Char = false) {
-    return rgbaToHex(this.r, this.g, this.b, this.a, allow4Char);
-  }
-  /**
-   * Returns the hex 8 value of the color -with a # prefixed.
-   * @param allow4Char will shorten hex value to 4 char if possible
-   */
-  toHex8String(allow4Char = false) {
-    return "#" + this.toHex8(allow4Char);
-  }
-  /**
-   * Returns the shorter hex value of the color depends on its alpha -with a # prefixed.
-   * @param allowShortChar will shorten hex value to 3 or 4 char if possible
-   */
-  toHexShortString(allowShortChar = false) {
-    return this.a === 1 ? this.toHexString(allowShortChar) : this.toHex8String(allowShortChar);
-  }
-  /**
-   * Returns the object as a RGBA object.
-   */
-  toRgb() {
-    return {
-      r: Math.round(this.r),
-      g: Math.round(this.g),
-      b: Math.round(this.b),
-      a: this.a
-    };
-  }
-  /**
-   * Returns the RGBA values interpolated into a string with the following format:
-   * "RGBA(xxx, xxx, xxx, xx)".
-   */
-  toRgbString() {
-    const r2 = Math.round(this.r);
-    const g = Math.round(this.g);
-    const b2 = Math.round(this.b);
-    return this.a === 1 ? `rgb(${r2}, ${g}, ${b2})` : `rgba(${r2}, ${g}, ${b2}, ${this.roundA})`;
-  }
-  /**
-   * Returns the object as a RGBA object.
-   */
-  toPercentageRgb() {
-    const fmt = (x) => `${Math.round(bound01(x, 255) * 100)}%`;
-    return {
-      r: fmt(this.r),
-      g: fmt(this.g),
-      b: fmt(this.b),
-      a: this.a
-    };
-  }
-  /**
-   * Returns the RGBA relative values interpolated into a string
-   */
-  toPercentageRgbString() {
-    const rnd = (x) => Math.round(bound01(x, 255) * 100);
-    return this.a === 1 ? `rgb(${rnd(this.r)}%, ${rnd(this.g)}%, ${rnd(this.b)}%)` : `rgba(${rnd(this.r)}%, ${rnd(this.g)}%, ${rnd(this.b)}%, ${this.roundA})`;
-  }
-  toCmyk() {
-    return {
-      ...rgbToCmyk(this.r, this.g, this.b)
-    };
-  }
-  toCmykString() {
-    const { c, m, y, k } = rgbToCmyk(this.r, this.g, this.b);
-    return `cmyk(${c}, ${m}, ${y}, ${k})`;
-  }
-  /**
-   * The 'real' name of the color -if there is one.
-   */
-  toName() {
-    if (this.a === 0) {
-      return "transparent";
-    }
-    if (this.a < 1) {
-      return false;
-    }
-    const hex = "#" + rgbToHex(this.r, this.g, this.b, false);
-    for (const [key, value] of Object.entries(names)) {
-      if (hex === value) {
-        return key;
-      }
-    }
-    return false;
-  }
-  toString(format) {
-    const formatSet = Boolean(format);
-    format = format ?? this.format;
-    let formattedString = false;
-    const hasAlpha = this.a < 1 && this.a >= 0;
-    const needsAlphaFormat = !formatSet && hasAlpha && (format.startsWith("hex") || format === "name");
-    if (needsAlphaFormat) {
-      if (format === "name" && this.a === 0) {
-        return this.toName();
-      }
-      return this.toRgbString();
-    }
-    if (format === "rgb") {
-      formattedString = this.toRgbString();
-    }
-    if (format === "prgb") {
-      formattedString = this.toPercentageRgbString();
-    }
-    if (format === "hex" || format === "hex6") {
-      formattedString = this.toHexString();
-    }
-    if (format === "hex3") {
-      formattedString = this.toHexString(true);
-    }
-    if (format === "hex4") {
-      formattedString = this.toHex8String(true);
-    }
-    if (format === "hex8") {
-      formattedString = this.toHex8String();
-    }
-    if (format === "name") {
-      formattedString = this.toName();
-    }
-    if (format === "hsl") {
-      formattedString = this.toHslString();
-    }
-    if (format === "hsv") {
-      formattedString = this.toHsvString();
-    }
-    if (format === "cmyk") {
-      formattedString = this.toCmykString();
-    }
-    return formattedString || this.toHexString();
-  }
-  toNumber() {
-    return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
-  }
-  clone() {
-    return new _TinyColor(this.toString());
-  }
-  /**
-   * Lighten the color a given amount. Providing 100 will always return white.
-   * @param amount - valid between 1-100
-   */
-  lighten(amount = 10) {
-    const hsl = this.toHsl();
-    hsl.l += amount / 100;
-    hsl.l = clamp01(hsl.l);
-    return new _TinyColor(hsl);
-  }
-  /**
-   * Brighten the color a given amount, from 0 to 100.
-   * @param amount - valid between 1-100
-   */
-  brighten(amount = 10) {
-    const rgb = this.toRgb();
-    rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
-    rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
-    rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
-    return new _TinyColor(rgb);
-  }
-  /**
-   * Darken the color a given amount, from 0 to 100.
-   * Providing 100 will always return black.
-   * @param amount - valid between 1-100
-   */
-  darken(amount = 10) {
-    const hsl = this.toHsl();
-    hsl.l -= amount / 100;
-    hsl.l = clamp01(hsl.l);
-    return new _TinyColor(hsl);
-  }
-  /**
-   * Mix the color with pure white, from 0 to 100.
-   * Providing 0 will do nothing, providing 100 will always return white.
-   * @param amount - valid between 1-100
-   */
-  tint(amount = 10) {
-    return this.mix("white", amount);
-  }
-  /**
-   * Mix the color with pure black, from 0 to 100.
-   * Providing 0 will do nothing, providing 100 will always return black.
-   * @param amount - valid between 1-100
-   */
-  shade(amount = 10) {
-    return this.mix("black", amount);
-  }
-  /**
-   * Desaturate the color a given amount, from 0 to 100.
-   * Providing 100 will is the same as calling greyscale
-   * @param amount - valid between 1-100
-   */
-  desaturate(amount = 10) {
-    const hsl = this.toHsl();
-    hsl.s -= amount / 100;
-    hsl.s = clamp01(hsl.s);
-    return new _TinyColor(hsl);
-  }
-  /**
-   * Saturate the color a given amount, from 0 to 100.
-   * @param amount - valid between 1-100
-   */
-  saturate(amount = 10) {
-    const hsl = this.toHsl();
-    hsl.s += amount / 100;
-    hsl.s = clamp01(hsl.s);
-    return new _TinyColor(hsl);
-  }
-  /**
-   * Completely desaturates a color into greyscale.
-   * Same as calling `desaturate(100)`
-   */
-  greyscale() {
-    return this.desaturate(100);
-  }
-  /**
-   * Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
-   * Values outside of this range will be wrapped into this range.
-   */
-  spin(amount) {
-    const hsl = this.toHsl();
-    const hue = (hsl.h + amount) % 360;
-    hsl.h = hue < 0 ? 360 + hue : hue;
-    return new _TinyColor(hsl);
-  }
-  /**
-   * Mix the current color a given amount with another color, from 0 to 100.
-   * 0 means no mixing (return current color).
-   */
-  mix(color, amount = 50) {
-    const rgb1 = this.toRgb();
-    const rgb2 = new _TinyColor(color).toRgb();
-    const p = amount / 100;
-    const rgba = {
-      r: (rgb2.r - rgb1.r) * p + rgb1.r,
-      g: (rgb2.g - rgb1.g) * p + rgb1.g,
-      b: (rgb2.b - rgb1.b) * p + rgb1.b,
-      a: (rgb2.a - rgb1.a) * p + rgb1.a
-    };
-    return new _TinyColor(rgba);
-  }
-  analogous(results = 6, slices = 30) {
-    const hsl = this.toHsl();
-    const part = 360 / slices;
-    const ret = [this];
-    for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results; ) {
-      hsl.h = (hsl.h + part) % 360;
-      ret.push(new _TinyColor(hsl));
-    }
-    return ret;
-  }
-  /**
-   * taken from https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js
-   */
-  complement() {
-    const hsl = this.toHsl();
-    hsl.h = (hsl.h + 180) % 360;
-    return new _TinyColor(hsl);
-  }
-  monochromatic(results = 6) {
-    const hsv = this.toHsv();
-    const { h } = hsv;
-    const { s } = hsv;
-    let { v } = hsv;
-    const res = [];
-    const modification = 1 / results;
-    while (results--) {
-      res.push(new _TinyColor({ h, s, v }));
-      v = (v + modification) % 1;
-    }
-    return res;
-  }
-  splitcomplement() {
-    const hsl = this.toHsl();
-    const { h } = hsl;
-    return [
-      this,
-      new _TinyColor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l }),
-      new _TinyColor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l })
-    ];
-  }
-  /**
-   * Compute how the color would appear on a background
-   */
-  onBackground(background) {
-    const fg = this.toRgb();
-    const bg = new _TinyColor(background).toRgb();
-    const alpha = fg.a + bg.a * (1 - fg.a);
-    return new _TinyColor({
-      r: (fg.r * fg.a + bg.r * bg.a * (1 - fg.a)) / alpha,
-      g: (fg.g * fg.a + bg.g * bg.a * (1 - fg.a)) / alpha,
-      b: (fg.b * fg.a + bg.b * bg.a * (1 - fg.a)) / alpha,
-      a: alpha
-    });
-  }
-  /**
-   * Alias for `polyad(3)`
-   */
-  triad() {
-    return this.polyad(3);
-  }
-  /**
-   * Alias for `polyad(4)`
-   */
-  tetrad() {
-    return this.polyad(4);
-  }
-  /**
-   * Get polyad colors, like (for 1, 2, 3, 4, 5, 6, 7, 8, etc...)
-   * monad, dyad, triad, tetrad, pentad, hexad, heptad, octad, etc...
-   */
-  polyad(n2) {
-    const hsl = this.toHsl();
-    const { h } = hsl;
-    const result = [this];
-    const increment = 360 / n2;
-    for (let i = 1; i < n2; i++) {
-      result.push(new _TinyColor({ h: (h + i * increment) % 360, s: hsl.s, l: hsl.l }));
-    }
-    return result;
-  }
-  /**
-   * compare color vs current color
-   */
-  equals(color) {
-    const comparedColor = new _TinyColor(color);
-    if (this.format === "cmyk" || comparedColor.format === "cmyk") {
-      return this.toCmykString() === comparedColor.toCmykString();
-    }
-    return this.toRgbString() === comparedColor.toRgbString();
-  }
-};
-
-// src/components/color-picker/color-picker.ts
-var CsColorPicker = class extends CornerstoneFormAssociatedElement {
-  constructor() {
-    super();
-    this.hasSlotController = new HasSlotController(this, "hint", "label");
-    this.isSafeValue = false;
-    this.localize = new LocalizeController(this);
-    this.hasFocus = false;
-    this.isDraggingGridHandle = false;
-    this.inputValue = "";
-    this.hue = 0;
-    this.isEmpty = true;
-    this.saturation = 100;
-    this.brightness = 100;
-    this.alpha = 100;
-    this.resolvedSwatchVars = /* @__PURE__ */ new Map();
-    this._value = null;
-    this.defaultValue = this.getAttribute("value") || null;
-    this.ssrLabel = false;
-    this.ssrHint = false;
-    this.hasEyeDropper = false;
-    this.label = "";
-    this.hint = "";
-    this.format = "hex";
-    this.size = "m";
-    this.placement = "bottom-start";
-    this.withoutFormatToggle = false;
-    this.name = null;
-    this.disabled = false;
-    this.open = false;
-    this.opacity = false;
-    this.uppercase = false;
-    this.swatches = "";
-    this.required = false;
-    this.handleFocusIn = () => {
-      this.hasFocus = true;
-    };
-    this.handleFocusOut = () => {
-      this.hasFocus = false;
-    };
-    this.reportValidityAfterShow = () => {
-      this.removeEventListener("invalid", this.emitInvalid);
-      this.reportValidity();
-      this.addEventListener("invalid", this.emitInvalid);
-    };
-    this.handleKeyDown = (event) => {
-      if (this.open && event.key === "Escape" && isTopDismissible(this)) {
-        event.stopPropagation();
-        this.hide();
-        this.focus();
-      }
-    };
-    this.handleDocumentKeyDown = (event) => {
-      if (event.key === "Escape" && this.open && isTopDismissible(this)) {
-        event.stopPropagation();
-        this.focus();
-        this.hide();
-        return;
-      }
-      if (event.key === "Tab") {
-        setTimeout(() => {
-          const activeElement = this.getRootNode() instanceof ShadowRoot ? document.activeElement?.shadowRoot?.activeElement : document.activeElement;
-          if (activeElement?.closest(this.tagName.toLowerCase()) !== this) {
-            this.hide();
-          }
-        });
-      }
-    };
-    this.handleDocumentMouseDown = (event) => {
-      const path = event.composedPath();
-      const isInsideRelevantArea = path.some(
-        (element) => element instanceof Element && (element.closest(".color-picker") || element === this.trigger)
-      );
-      if (!isInsideRelevantArea) {
-        this.hide();
-      }
-    };
-    if (!o) {
-      this.addEventListener("focusin", this.handleFocusIn);
-      this.addEventListener("focusout", this.handleFocusOut);
-    }
-    this.opacity = this.hasAttribute("opacity");
-    this.uppercase = this.hasAttribute("uppercase");
-    const format = this.getAttribute("format");
-    if (format === "rgb" || format === "hsl" || format === "hsv") {
-      this.format = format;
-    }
-    this.handleValueChange("", this.value || "");
-  }
-  static get validators() {
-    return [...super.validators, RequiredValidator()];
-  }
-  // @TODO: This is a hacky way to show the "Please fill out this field", do we want the old behavior where it opens the dropdown?
-  //   or is the new behavior okay?
-  get validationTarget() {
-    if (this.popup?.active) {
-      return this.input;
-    }
-    return this.trigger;
-  }
-  /** The current value of the input, submitted as a name/value pair with form data. */
-  get value() {
-    if (this.valueHasChanged) {
-      return this._value;
-    }
-    return this._value ?? this.defaultValue;
-  }
-  set value(val) {
-    if (this._value === val) {
-      return;
-    }
-    this.valueHasChanged = true;
-    this._value = val;
-  }
-  /**
-   * @internal
-   */
-  updateFormValue(value) {
-    if (value == null) {
-      this.setValue("", null);
-      return;
-    }
-    super.updateFormValue(value);
-  }
-  handleCopy() {
-    this.input.select();
-    document.execCommand("copy");
-    this.previewButton.focus();
-    this.previewButton.classList.add("preview-color-copied");
-    this.previewButton.addEventListener("animationend", () => {
-      this.previewButton.classList.remove("preview-color-copied");
-    });
-  }
-  handleFormatToggle() {
-    const formats = ["hex", "rgb", "hsl", "hsv"];
-    const nextIndex = (formats.indexOf(this.format) + 1) % formats.length;
-    this.format = formats[nextIndex];
-    this.setColor(this.value || "");
-    this.updateComplete.then(() => {
-      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-      this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
-    });
-  }
-  handleAlphaDrag(event) {
-    const container = this.shadowRoot.querySelector(".slider.alpha");
-    const handle = container.querySelector(".slider-handle");
-    const { width } = container.getBoundingClientRect();
-    let initialValue = this.value;
-    let currentValue = this.value;
-    handle.focus();
-    event.preventDefault();
-    drag(container, {
-      onMove: (x) => {
-        this.alpha = clamp(x / width * 100, 0, 100);
-        this.syncValues();
-        if (this.value !== currentValue) {
-          currentValue = this.value;
-          this.updateComplete.then(() => {
-            this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
-          });
-        }
-      },
-      onStop: () => {
-        if (this.value !== initialValue) {
-          initialValue = this.value;
-          this.updateComplete.then(() => {
-            this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-          });
-        }
-      },
-      initialEvent: event
-    });
-  }
-  handleHueDrag(event) {
-    const container = this.shadowRoot.querySelector(".slider.hue");
-    const handle = container.querySelector(".slider-handle");
-    const { width } = container.getBoundingClientRect();
-    let initialValue = this.value;
-    let currentValue = this.value;
-    handle.focus();
-    event.preventDefault();
-    drag(container, {
-      onMove: (x) => {
-        this.hue = clamp(x / width * 360, 0, 360);
-        this.syncValues();
-        if (this.value !== currentValue) {
-          currentValue = this.value;
-          this.updateComplete.then(() => {
-            this.dispatchEvent(new InputEvent("input"));
-          });
-        }
-      },
-      onStop: () => {
-        if (this.value !== initialValue) {
-          initialValue = this.value;
-          this.updateComplete.then(() => {
-            this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-          });
-        }
-      },
-      initialEvent: event
-    });
-  }
-  handleGridDrag(event) {
-    const grid = this.shadowRoot.querySelector(".grid");
-    const handle = grid.querySelector(".grid-handle");
-    const { width, height } = grid.getBoundingClientRect();
-    let initialValue = this.value;
-    let currentValue = this.value;
-    handle.focus();
-    event.preventDefault();
-    this.isDraggingGridHandle = true;
-    drag(grid, {
-      onMove: (x, y) => {
-        this.saturation = clamp(x / width * 100, 0, 100);
-        this.brightness = clamp(100 - y / height * 100, 0, 100);
-        this.syncValues();
-        if (this.value !== currentValue) {
-          currentValue = this.value;
-          this.updateComplete.then(() => {
-            this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
-          });
-        }
-      },
-      onStop: () => {
-        this.isDraggingGridHandle = false;
-        if (this.value !== initialValue) {
-          initialValue = this.value;
-          this.updateComplete.then(() => {
-            this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-          });
-        }
-      },
-      initialEvent: event
-    });
-  }
-  handleAlphaKeyDown(event) {
-    const increment = event.shiftKey ? 10 : 1;
-    const oldValue = this.value;
-    if (event.key === "ArrowLeft") {
-      event.preventDefault();
-      this.alpha = clamp(this.alpha - increment, 0, 100);
-      this.syncValues();
-    }
-    if (event.key === "ArrowRight") {
-      event.preventDefault();
-      this.alpha = clamp(this.alpha + increment, 0, 100);
-      this.syncValues();
-    }
-    if (event.key === "Home") {
-      event.preventDefault();
-      this.alpha = 0;
-      this.syncValues();
-    }
-    if (event.key === "End") {
-      event.preventDefault();
-      this.alpha = 100;
-      this.syncValues();
-    }
-    if (this.value !== oldValue) {
-      this.updateComplete.then(() => {
-        this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
-        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-      });
-    }
-  }
-  handleHueKeyDown(event) {
-    const increment = event.shiftKey ? 10 : 1;
-    const oldValue = this.value;
-    if (event.key === "ArrowLeft") {
-      event.preventDefault();
-      this.hue = clamp(this.hue - increment, 0, 360);
-      this.syncValues();
-    }
-    if (event.key === "ArrowRight") {
-      event.preventDefault();
-      this.hue = clamp(this.hue + increment, 0, 360);
-      this.syncValues();
-    }
-    if (event.key === "Home") {
-      event.preventDefault();
-      this.hue = 0;
-      this.syncValues();
-    }
-    if (event.key === "End") {
-      event.preventDefault();
-      this.hue = 360;
-      this.syncValues();
-    }
-    if (this.value !== oldValue) {
-      this.updateComplete.then(() => {
-        this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
-        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-      });
-    }
-  }
-  handleGridKeyDown(event) {
-    const increment = event.shiftKey ? 10 : 1;
-    const oldValue = this.value;
-    if (event.key === "ArrowLeft") {
-      event.preventDefault();
-      this.saturation = clamp(this.saturation - increment, 0, 100);
-      this.syncValues();
-    }
-    if (event.key === "ArrowRight") {
-      event.preventDefault();
-      this.saturation = clamp(this.saturation + increment, 0, 100);
-      this.syncValues();
-    }
-    if (event.key === "ArrowUp") {
-      event.preventDefault();
-      this.brightness = clamp(this.brightness + increment, 0, 100);
-      this.syncValues();
-    }
-    if (event.key === "ArrowDown") {
-      event.preventDefault();
-      this.brightness = clamp(this.brightness - increment, 0, 100);
-      this.syncValues();
-    }
-    if (this.value !== oldValue) {
-      this.updateComplete.then(() => {
-        this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
-        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-      });
-    }
-  }
-  handleInputChange(event) {
-    const target = event.target;
-    const oldValue = this.value;
-    event.stopPropagation();
-    if (this.input.value) {
-      this.setColor(target.value);
-      target.value = this.value || "";
-    } else {
-      this.value = "";
-    }
-    if (this.value !== oldValue) {
-      this.updateComplete.then(() => {
-        this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
-        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-      });
-    }
-  }
-  handleInputInput(event) {
-    this.updateValidity();
-    event.stopPropagation();
-  }
-  handleInputKeyDown(event) {
-    if (event.key === "Enter") {
-      const oldValue = this.value;
-      if (this.input.value) {
-        this.setColor(this.input.value);
-        this.input.value = this.value;
-        if (this.value !== oldValue) {
-          this.updateComplete.then(() => {
-            this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
-            this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-          });
-        }
-        setTimeout(() => this.input.select());
-      } else {
-        this.hue = 0;
-      }
-    }
-  }
-  handleTouchMove(event) {
-    event.preventDefault();
-  }
-  parseColor(colorString) {
-    if (!colorString || colorString.trim() === "") {
-      return null;
-    }
-    const color = new TinyColor(colorString);
-    if (!color.isValid) {
-      return null;
-    }
-    const hslColor = color.toHsl();
-    const rgb = color.toRgb();
-    const hsvColor = color.toHsv();
-    if (!rgb || rgb.r == null || rgb.g == null || rgb.b == null) {
-      return null;
-    }
-    const hsl = {
-      h: hslColor.h || 0,
-      s: (hslColor.s || 0) * 100,
-      l: (hslColor.l || 0) * 100,
-      a: hslColor.a || 0
-    };
-    const hex = color.toHexString();
-    const hexa = color.toHex8String();
-    const hsv = {
-      h: hsvColor.h || 0,
-      s: (hsvColor.s || 0) * 100,
-      v: (hsvColor.v || 0) * 100,
-      a: hsvColor.a || 0
-    };
-    return {
-      hsl: {
-        h: hsl.h,
-        s: hsl.s,
-        l: hsl.l,
-        string: this.setLetterCase(`hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`)
-      },
-      hsla: {
-        h: hsl.h,
-        s: hsl.s,
-        l: hsl.l,
-        a: hsl.a,
-        string: this.setLetterCase(
-          `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${hsl.a.toFixed(2).toString()})`
-        )
-      },
-      hsv: {
-        h: hsv.h,
-        s: hsv.s,
-        v: hsv.v,
-        string: this.setLetterCase(`hsv(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%)`)
-      },
-      hsva: {
-        h: hsv.h,
-        s: hsv.s,
-        v: hsv.v,
-        a: hsv.a,
-        string: this.setLetterCase(
-          `hsva(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%, ${hsv.a.toFixed(2).toString()})`
-        )
-      },
-      rgb: {
-        r: rgb.r,
-        g: rgb.g,
-        b: rgb.b,
-        string: this.setLetterCase(`rgb(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)})`)
-      },
-      rgba: {
-        r: rgb.r,
-        g: rgb.g,
-        b: rgb.b,
-        a: rgb.a || 0,
-        string: this.setLetterCase(
-          `rgba(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)}, ${(rgb.a || 0).toFixed(2).toString()})`
-        )
-      },
-      hex: this.setLetterCase(hex),
-      hexa: this.setLetterCase(hexa)
-    };
-  }
-  setColor(colorString) {
-    const newColor = this.parseColor(colorString);
-    if (newColor === null) {
-      return false;
-    }
-    this.hue = newColor.hsva.h;
-    this.saturation = newColor.hsva.s;
-    this.brightness = newColor.hsva.v;
-    this.alpha = this.opacity ? newColor.hsva.a * 100 : 100;
-    this.syncValues();
-    return true;
-  }
-  setLetterCase(string) {
-    if (typeof string !== "string") {
-      return "";
-    }
-    return this.uppercase ? string.toUpperCase() : string.toLowerCase();
-  }
-  async syncValues() {
-    const currentColor = this.parseColor(
-      `hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})`
-    );
-    if (currentColor === null) {
-      return;
-    }
-    if (this.format === "hsl") {
-      this.inputValue = this.opacity ? currentColor.hsla.string : currentColor.hsl.string;
-    } else if (this.format === "rgb") {
-      this.inputValue = this.opacity ? currentColor.rgba.string : currentColor.rgb.string;
-    } else if (this.format === "hsv") {
-      this.inputValue = this.opacity ? currentColor.hsva.string : currentColor.hsv.string;
-    } else {
-      this.inputValue = this.opacity ? currentColor.hexa : currentColor.hex;
-    }
-    this.isSafeValue = true;
-    this.value = this.inputValue;
-    await this.updateComplete;
-    this.isSafeValue = false;
-  }
-  handleAfterHide() {
-    this.previewButton.classList.remove("preview-color-copied");
-    this.updateValidity();
-  }
-  handleAfterShow() {
-    this.updateValidity();
-  }
-  handleEyeDropper() {
-    if (!this.hasEyeDropper) {
-      return;
-    }
-    const eyeDropper = new EyeDropper();
-    eyeDropper.open().then((colorSelectionResult) => {
-      const oldValue = this.value;
-      this.setColor(colorSelectionResult.sRGBHex);
-      if (this.value !== oldValue) {
-        this.updateComplete.then(() => {
-          this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
-          this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-        });
-      }
-    }).catch(() => {
-    });
-  }
-  selectSwatch(color) {
-    const oldValue = this.value;
-    if (!this.disabled) {
-      this.setColor(color);
-      if (this.value !== oldValue) {
-        this.updateComplete.then(() => {
-          this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true }));
-          this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-        });
-      }
-    }
-  }
-  /** The `swatches` property in whichever of its three forms it was given, as `{ color, label }` objects. */
-  getNormalizedSwatches() {
-    if (Array.isArray(this.swatches)) {
-      return this.swatches.map(
-        (swatch) => typeof swatch === "string" ? { color: swatch, label: getSwatchLabel(swatch) } : swatch
-      );
-    }
-    return this.swatches.split(";").map((color) => color.trim()).filter((color) => color !== "").map((color) => ({ color, label: getSwatchLabel(color) }));
-  }
-  /**
-   * Resolves every `var()` swatch against the picker's own computed style, so a theme class or custom property set on
-   * any ancestor applies. Client only: it runs after the first render, which is after hydration, so the server and the
-   * first client render agree on leaving these swatches out.
-   */
-  resolveSwatchVars() {
-    const styles = getComputedStyle(this);
-    const resolved = /* @__PURE__ */ new Map();
-    for (const { color } of this.getNormalizedSwatches()) {
-      const value = resolveCssVar(styles, color);
-      if (value !== null) {
-        resolved.set(color, value);
-      }
-    }
-    if (resolved.size > 0 || this.resolvedSwatchVars.size > 0) {
-      this.resolvedSwatchVars = resolved;
-    }
-  }
-  /** Generates a hex string from HSV values. Hue must be 0-360. All other arguments must be 0-100. */
-  getHexString(hue, saturation, brightness, alpha = 100) {
-    const color = new TinyColor(`hsva(${hue}, ${saturation}%, ${brightness}%, ${alpha / 100})`);
-    if (!color.isValid) {
-      return "";
-    }
-    return color.toHex8String();
-  }
-  // Prevents nested components from leaking events
-  stopNestedEventPropagation(event) {
-    event.stopImmediatePropagation();
-  }
-  handleFormatChange() {
-    this.syncValues();
-  }
-  handleOpacityChange() {
-    this.alpha = 100;
-  }
-  willUpdate(changedProperties) {
-    if (changedProperties.has("value") || changedProperties.has("defaultValue")) {
-      this.handleValueChange(changedProperties.get("value") || "", this.value || "");
-    }
-    if (!o && this.hasUpdated && (changedProperties.has("swatches") || changedProperties.has("open") && this.open)) {
-      this.resolveSwatchVars();
-    }
-    super.willUpdate(changedProperties);
-  }
-  handleValueChange(oldValue, newValue) {
-    this.isEmpty = !newValue;
-    if (!newValue) {
-      this.hue = 0;
-      this.saturation = 0;
-      this.brightness = 100;
-      this.alpha = 100;
-    }
-    if (!this.isSafeValue) {
-      const newColor = this.parseColor(newValue);
-      if (newColor !== null) {
-        this.inputValue = this.value || "";
-        this.hue = newColor.hsva.h;
-        this.saturation = newColor.hsva.s;
-        this.brightness = newColor.hsva.v;
-        this.alpha = this.opacity ? newColor.hsva.a * 100 : 100;
-        this.syncValues();
-      } else {
-        this.inputValue = oldValue ?? "";
-      }
-    }
-    this.requestUpdate();
-  }
-  /** Sets focus on the color picker. */
-  focus(options) {
-    this.trigger.focus(options);
-  }
-  /** Removes focus from the color picker. */
-  blur() {
-    const elementToBlur = this.trigger;
-    if (this.hasFocus) {
-      elementToBlur.focus({ preventScroll: true });
-      elementToBlur.blur();
-    }
-    if (this.popup?.active) {
-      this.hide();
-    }
-  }
-  /** Returns the current value as a string in the specified format. */
-  getFormattedValue(format = "hex") {
-    const currentColor = this.parseColor(
-      `hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})`
-    );
-    if (currentColor === null) {
-      return "";
-    }
-    switch (format) {
-      case "hex":
-        return currentColor.hex;
-      case "hexa":
-        return currentColor.hexa;
-      case "rgb":
-        return currentColor.rgb.string;
-      case "rgba":
-        return currentColor.rgba.string;
-      case "hsl":
-        return currentColor.hsl.string;
-      case "hsla":
-        return currentColor.hsla.string;
-      case "hsv":
-        return currentColor.hsv.string;
-      case "hsva":
-        return currentColor.hsva.string;
-      default:
-        return "";
-    }
-  }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity() {
-    if (!this.validity.valid && !this.open) {
-      this.addEventListener("cs-after-show", this.reportValidityAfterShow, { once: true });
-      this.show();
-      if (!this.disabled) {
-        this.dispatchEvent(new CsInvalidEvent());
-      }
-      return false;
-    }
-    return super.reportValidity();
-  }
-  formResetCallback() {
-    this.value = this.defaultValue;
-    super.formResetCallback();
-  }
-  firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-    this.hasEyeDropper = "EyeDropper" in window;
-    this.resolveSwatchVars();
-  }
-  handleTriggerClick() {
-    if (this.open) {
-      this.hide();
-    } else {
-      this.show();
-      this.focus();
-    }
-  }
-  async handleTriggerKeyDown(event) {
-    if ([" ", "Enter"].includes(event.key)) {
-      event.preventDefault();
-      this.handleTriggerClick();
-      return;
-    }
-  }
-  handleTriggerKeyUp(event) {
-    if (event.key === " ") {
-      event.preventDefault();
-    }
-  }
-  updateAccessibleTrigger() {
-    const accessibleTrigger = this.trigger;
-    if (accessibleTrigger) {
-      accessibleTrigger.setAttribute("aria-haspopup", "true");
-      accessibleTrigger.setAttribute("aria-expanded", this.open ? "true" : "false");
-    }
-  }
-  /** Shows the color picker panel. */
-  async show() {
-    if (this.open) {
-      return void 0;
-    }
-    this.open = true;
-    return waitForEvent(this, "cs-after-show");
-  }
-  /** Hides the color picker panel */
-  async hide() {
-    if (!this.open) {
-      return void 0;
-    }
-    this.open = false;
-    return waitForEvent(this, "cs-after-hide");
-  }
-  addOpenListeners() {
-    this.base.addEventListener("keydown", this.handleKeyDown);
-    document.addEventListener("keydown", this.handleDocumentKeyDown);
-    document.addEventListener("mousedown", this.handleDocumentMouseDown);
-    registerDismissible(this);
-  }
-  removeOpenListeners() {
-    if (this.base) {
-      this.base.removeEventListener("keydown", this.handleKeyDown);
-    }
-    document.removeEventListener("keydown", this.handleDocumentKeyDown);
-    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
-    unregisterDismissible(this);
-  }
-  async handleOpenChange() {
-    if (this.disabled) {
-      this.open = false;
-      return;
-    }
-    this.updateAccessibleTrigger();
-    if (this.open) {
-      this.dispatchEvent(new CustomEvent("cs-show"));
-      this.addOpenListeners();
-      await this.updateComplete;
-      this.base.hidden = false;
-      this.popup.active = true;
-      await animateWithClass(this.popup.popup, "show-with-scale");
-      this.dispatchEvent(new CustomEvent("cs-after-show"));
-    } else {
-      this.dispatchEvent(new CustomEvent("cs-hide"));
-      this.removeOpenListeners();
-      await animateWithClass(this.popup.popup, "hide-with-scale");
-      this.base.hidden = true;
-      this.popup.active = false;
-      this.dispatchEvent(new CustomEvent("cs-after-hide"));
-    }
-  }
-  render() {
-    const isEmpty = this.isEmpty;
-    const hasLabelSlot = this.hasSlotController.test("label", "ssrLabel");
-    const hasHintSlot = this.hasSlotController.test("hint", "ssrHint");
-    const hasLabel = this.label ? true : !!hasLabelSlot;
-    const hasHint = this.hint ? true : !!hasHintSlot;
-    const gridHandleX = this.saturation;
-    const gridHandleY = 100 - this.brightness;
-    const normalizedSwatches = this.getNormalizedSwatches();
-    const colorPicker = b`
-      <div
-        part="color-picker"
-        class=${e2({
-      "color-picker": true
-    })}
-        aria-disabled=${this.disabled ? "true" : "false"}
-        tabindex="-1"
-      >
-        <div
-          part="grid"
-          class="grid"
-          style=${o2({ backgroundColor: this.getHexString(this.hue, 100, 100) })}
-          @pointerdown=${this.handleGridDrag}
-          @touchmove=${this.handleTouchMove}
-        >
-          <span
-            part="grid-handle"
-            class=${e2({
-      "grid-handle": true,
-      "grid-handle-dragging": this.isDraggingGridHandle
-    })}
-            style=${o2({
-      top: `${gridHandleY}%`,
-      left: `${gridHandleX}%`,
-      backgroundColor: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha)
-    })}
-            role="application"
-            aria-label="HSV"
-            tabindex=${o3(this.disabled ? void 0 : "0")}
-            @keydown=${this.handleGridKeyDown}
-          ></span>
-        </div>
-
-        <div class="controls">
-          <div class="sliders">
-            <div
-              part="slider hue-slider"
-              class="hue slider"
-              @pointerdown=${this.handleHueDrag}
-              @touchmove=${this.handleTouchMove}
-            >
-              <span
-                part="slider-handle hue-slider-handle"
-                class="slider-handle"
-                style=${o2({
-      left: `${this.hue === 0 ? 0 : 100 / (360 / this.hue)}%`,
-      backgroundColor: this.getHexString(this.hue, 100, 100)
-    })}
-                role="slider"
-                aria-label="hue"
-                aria-orientation="horizontal"
-                aria-valuemin="0"
-                aria-valuemax="360"
-                aria-valuenow=${`${Math.round(this.hue)}`}
-                tabindex=${o3(this.disabled ? void 0 : "0")}
-                @keydown=${this.handleHueKeyDown}
-              ></span>
-            </div>
-
-            ${this.opacity ? b`
-                    <div
-                      part="slider opacity-slider"
-                      class="alpha slider transparent-bg"
-                      @pointerdown="${this.handleAlphaDrag}"
-                      @touchmove=${this.handleTouchMove}
-                    >
-                      <div
-                        class="alpha-gradient"
-                        style=${o2({
-      backgroundImage: `linear-gradient(
-                          to right,
-                          ${this.getHexString(this.hue, this.saturation, this.brightness, 0)} 0%,
-                          ${this.getHexString(this.hue, this.saturation, this.brightness, 100)} 100%
-                        )`
-    })}
-                      ></div>
-                      <span
-                        part="slider-handle opacity-slider-handle"
-                        class="slider-handle"
-                        style=${o2({
-      left: `${this.alpha}%`,
-      backgroundColor: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha)
-    })}
-                        role="slider"
-                        aria-label="alpha"
-                        aria-orientation="horizontal"
-                        aria-valuemin="0"
-                        aria-valuemax="100"
-                        aria-valuenow=${Math.round(this.alpha)}
-                        tabindex=${o3(this.disabled ? void 0 : "0")}
-                        @keydown=${this.handleAlphaKeyDown}
-                      ></span>
-                    </div>
-                  ` : ""}
-          </div>
-
-          <button
-            type="button"
-            part="preview"
-            class="preview transparent-bg"
-            aria-label=${this.localize.term("copy")}
-            style=${o2({
-      "--preview-color": this.getHexString(this.hue, this.saturation, this.brightness, this.alpha)
-    })}
-            @click=${this.handleCopy}
-          ></button>
-        </div>
-
-        <div class="user-input" aria-live="polite">
-          <cs-input
-            part="input"
-            type="text"
-            name=${this.name}
-            size="s"
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-            spellcheck="false"
-            .value=${isEmpty ? "" : this.inputValue}
-            value=${isEmpty ? "" : this.inputValue}
-            ?required=${this.required}
-            ?disabled=${this.disabled}
-            aria-label=${this.localize.term("currentValue")}
-            @keydown=${this.handleInputKeyDown}
-            @change=${this.handleInputChange}
-            @input=${this.handleInputInput}
-            @blur=${this.stopNestedEventPropagation}
-            @focus=${this.stopNestedEventPropagation}
-          ></cs-input>
-
-          <cs-button-group>
-            ${!this.withoutFormatToggle ? b`
-                    <cs-button
-                      part="format-button"
-                      size="s"
-                      appearance="outlined"
-                      aria-label=${this.localize.term("toggleColorFormat")}
-                      exportparts="
-                      button:format-button__button,
-                      start:format-button__start,
-                      label:format-button__label,
-                      end:format-button__end,
-                      caret:format-button__caret
-                    "
-                      @click=${this.handleFormatToggle}
-                      @blur=${this.stopNestedEventPropagation}
-                      @focus=${this.stopNestedEventPropagation}
-                    >
-                      ${this.setLetterCase(this.format)}
-                    </cs-button>
-                  ` : ""}
-            ${this.hasEyeDropper ? b`
-                    <cs-button
-                      part="eyedropper-button"
-                      size="s"
-                      appearance="outlined"
-                      exportparts="
-                      button:eyedropper-button__button,
-                      start:eyedropper-button__start,
-                      label:eyedropper-button__label,
-                      end:eyedropper-button__end,
-                      caret:eyedropper-button__caret
-                    "
-                      @click=${this.handleEyeDropper}
-                      @blur=${this.stopNestedEventPropagation}
-                      @focus=${this.stopNestedEventPropagation}
-                    >
-                      <cs-icon
-                        library="system"
-                        name="colorize"
-                        label=${this.localize.term("selectAColorFromTheScreen")}
-                      ></cs-icon>
-                    </cs-button>
-                  ` : ""}
-          </cs-button-group>
-        </div>
-
-        ${normalizedSwatches.length > 0 ? b`
-                <div part="swatches" class="swatches">
-                  ${normalizedSwatches.map((swatch) => {
-      const color = parseCssVar(swatch.color) ? this.resolvedSwatchVars.get(swatch.color) : swatch.color;
-      const parsedColor = color ? this.parseColor(color) : null;
-      if (!color || !parsedColor) {
-        return "";
-      }
-      return b`
-                      <div
-                        part="swatch"
-                        class="swatch transparent-bg"
-                        tabindex=${o3(this.disabled ? void 0 : "0")}
-                        role="button"
-                        aria-label=${swatch.label}
-                        @click=${() => this.selectSwatch(color)}
-                        @keydown=${(event) => {
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          this.selectSwatch(color);
-        }
-      }}
-                      >
-                        <div class="swatch-color" style=${o2({ backgroundColor: parsedColor.hexa })}></div>
-                      </div>
-                    `;
-    })}
-                </div>
-              ` : ""}
-      </div>
-    `;
-    return b`
-      <div
-        class=${e2({
-      container: true,
-      "form-control": true,
-      "form-control-has-label": hasLabel
-    })}
-        part="trigger-container form-control"
-      >
-        <div
-          part="form-control-label"
-          class=${e2({
-      label: true,
-      "has-label": hasLabel
-    })}
-          id="form-control-label"
-        >
-          <slot name="label">${this.label}</slot>
-        </div>
-
-        <button
-          id="trigger"
-          part="trigger form-control-input"
-          class=${e2({
-      trigger: true,
-      "trigger-empty": isEmpty,
-      "transparent-bg": true,
-      "form-control-input": true
-    })}
-          style=${o2({
-      color: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha)
-    })}
-          type="button"
-          aria-labelledby="form-control-label"
-          aria-describedby="hint"
-          .disabled=${this.disabled}
-          @click=${this.handleTriggerClick}
-          @keydown=${this.handleTriggerKeyDown}
-          @keyup=${this.handleTriggerKeyUp}
-        ></button>
-
-        <slot
-          id="hint"
-          name="hint"
-          part="hint"
-          class=${e2({
-      "has-slotted": hasHint
-    })}
-          >${this.hint}</slot
-        >
-      </div>
-
-      <cs-popup
-        class="color-popup"
-        anchor="trigger"
-        placement=${this.placement}
-        distance="0"
-        skidding="0"
-        flip
-        flip-fallback-strategy="best-fit"
-        shift
-        shift-padding="10"
-        aria-disabled=${this.disabled ? "true" : "false"}
-        @cs-after-show=${this.handleAfterShow}
-        @cs-after-hide=${this.handleAfterHide}
-      >
-        ${colorPicker}
-      </cs-popup>
-    `;
-  }
-};
-CsColorPicker.css = [visually_hidden_styles_default, size_styles_default, form_control_styles_default, color_picker_styles_default];
-CsColorPicker.shadowRootOptions = { ...CornerstoneFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
-__decorateClass([
-  e('[part~="color-picker"]')
-], CsColorPicker.prototype, "base", 2);
-__decorateClass([
-  e('[part~="input"]')
-], CsColorPicker.prototype, "input", 2);
-__decorateClass([
-  e('[part~="form-control-label"]')
-], CsColorPicker.prototype, "triggerLabel", 2);
-__decorateClass([
-  e('[part~="form-control-input"]')
-], CsColorPicker.prototype, "triggerButton", 2);
-__decorateClass([
-  e(".color-popup")
-], CsColorPicker.prototype, "popup", 2);
-__decorateClass([
-  e('[part~="preview"]')
-], CsColorPicker.prototype, "previewButton", 2);
-__decorateClass([
-  e('[part~="trigger"]')
-], CsColorPicker.prototype, "trigger", 2);
-__decorateClass([
-  r()
-], CsColorPicker.prototype, "hasFocus", 2);
-__decorateClass([
-  r()
-], CsColorPicker.prototype, "isDraggingGridHandle", 2);
-__decorateClass([
-  r()
-], CsColorPicker.prototype, "inputValue", 2);
-__decorateClass([
-  r()
-], CsColorPicker.prototype, "hue", 2);
-__decorateClass([
-  r()
-], CsColorPicker.prototype, "isEmpty", 2);
-__decorateClass([
-  r()
-], CsColorPicker.prototype, "saturation", 2);
-__decorateClass([
-  r()
-], CsColorPicker.prototype, "brightness", 2);
-__decorateClass([
-  r()
-], CsColorPicker.prototype, "alpha", 2);
-__decorateClass([
-  r()
-], CsColorPicker.prototype, "resolvedSwatchVars", 2);
-__decorateClass([
-  r()
-], CsColorPicker.prototype, "value", 1);
-__decorateClass([
-  n({ attribute: "value", reflect: true })
-], CsColorPicker.prototype, "defaultValue", 2);
-__decorateClass([
-  n({ attribute: "ssr-label", reflect: true, type: Boolean })
-], CsColorPicker.prototype, "ssrLabel", 2);
-__decorateClass([
-  n({ attribute: "ssr-hint", reflect: true, type: Boolean })
-], CsColorPicker.prototype, "ssrHint", 2);
-__decorateClass([
-  r()
-], CsColorPicker.prototype, "hasEyeDropper", 2);
-__decorateClass([
-  n()
-], CsColorPicker.prototype, "label", 2);
-__decorateClass([
-  n({ attribute: "hint" })
-], CsColorPicker.prototype, "hint", 2);
-__decorateClass([
-  n()
-], CsColorPicker.prototype, "format", 2);
-__decorateClass([
-  n({ reflect: true })
-], CsColorPicker.prototype, "size", 2);
-__decorateClass([
-  n({ reflect: true })
-], CsColorPicker.prototype, "placement", 2);
-__decorateClass([
-  n({ attribute: "without-format-toggle", type: Boolean })
-], CsColorPicker.prototype, "withoutFormatToggle", 2);
-__decorateClass([
-  n({ reflect: true })
-], CsColorPicker.prototype, "name", 2);
-__decorateClass([
-  n({ type: Boolean })
-], CsColorPicker.prototype, "disabled", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], CsColorPicker.prototype, "open", 2);
-__decorateClass([
-  n({ type: Boolean })
-], CsColorPicker.prototype, "opacity", 2);
-__decorateClass([
-  n({ type: Boolean })
-], CsColorPicker.prototype, "uppercase", 2);
-__decorateClass([
-  n()
-], CsColorPicker.prototype, "swatches", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], CsColorPicker.prototype, "required", 2);
-__decorateClass([
-  t({ passive: false })
-], CsColorPicker.prototype, "handleTouchMove", 1);
-__decorateClass([
-  watch("format", { waitUntilFirstUpdate: true })
-], CsColorPicker.prototype, "handleFormatChange", 1);
-__decorateClass([
-  watch("opacity", { waitUntilFirstUpdate: true })
-], CsColorPicker.prototype, "handleOpacityChange", 1);
-__decorateClass([
-  watch("value")
-], CsColorPicker.prototype, "handleValueChange", 1);
-__decorateClass([
-  watch("open", { waitUntilFirstUpdate: true })
-], CsColorPicker.prototype, "handleOpenChange", 1);
-CsColorPicker = __decorateClass([
-  customElement("cs-color-picker")
-], CsColorPicker);
-CsColorPicker.disableWarning?.("change-in-update");
-
-export {
-  CsColorPicker
-};