@viur/shoelace 0.6.0-v2.7.0

package/cdn/chunks/chunk.QROGLSX3.js

@@ -0,0 +1,1823 @@
+import {
+  SlVisuallyHidden
+} from "./chunk.47T4SDAB.js";
+import {
+  SlInput
+} from "./chunk.AMW2CUY7.js";
+import {
+  drag
+} from "./chunk.A4SOQOK5.js";
+import {
+  o as o2
+} from "./chunk.SZKNRUEG.js";
+import {
+  SlDropdown
+} from "./chunk.BWTADKJQ.js";
+import {
+  defaultValue
+} from "./chunk.AN3OKR4G.js";
+import {
+  color_picker_styles_default
+} from "./chunk.PKBCJX3Z.js";
+import {
+  clamp
+} from "./chunk.HF7GESMZ.js";
+import {
+  SlButton
+} from "./chunk.AXZL4H3G.js";
+import {
+  FormControlController
+} from "./chunk.JSRSPD5T.js";
+import {
+  SlButtonGroup
+} from "./chunk.WBFGPJHO.js";
+import {
+  LocalizeController
+} from "./chunk.LZA5Z3YQ.js";
+import {
+  l
+} from "./chunk.K23BJXX5.js";
+import {
+  o
+} from "./chunk.PRLG4CH7.js";
+import {
+  SlIcon
+} from "./chunk.MVGPVKZ2.js";
+import {
+  watch
+} from "./chunk.ZULLN4MK.js";
+import {
+  ShoelaceElement,
+  e2 as e,
+  i,
+  t
+} from "./chunk.KVOM77ML.js";
+import {
+  x
+} from "./chunk.5OEG7HB2.js";
+import {
+  __decorateClass
+} from "./chunk.WAUPTNVG.js";
+
+// node_modules/@ctrl/tinycolor/dist/module/util.js
+function bound01(n, max) {
+  if (isOnePointZero(n)) {
+    n = "100%";
+  }
+  var isPercent = isPercentage(n);
+  n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
+  if (isPercent) {
+    n = parseInt(String(n * max), 10) / 100;
+  }
+  if (Math.abs(n - max) < 1e-6) {
+    return 1;
+  }
+  if (max === 360) {
+    n = (n < 0 ? n % max + max : n % max) / parseFloat(String(max));
+  } else {
+    n = n % max / parseFloat(String(max));
+  }
+  return n;
+}
+function clamp01(val) {
+  return Math.min(1, Math.max(0, val));
+}
+function isOnePointZero(n) {
+  return typeof n === "string" && n.indexOf(".") !== -1 && parseFloat(n) === 1;
+}
+function isPercentage(n) {
+  return typeof n === "string" && n.indexOf("%") !== -1;
+}
+function boundAlpha(a) {
+  a = parseFloat(a);
+  if (isNaN(a) || a < 0 || a > 1) {
+    a = 1;
+  }
+  return a;
+}
+function convertToPercentage(n) {
+  if (n <= 1) {
+    return "".concat(Number(n) * 100, "%");
+  }
+  return n;
+}
+function pad2(c) {
+  return c.length === 1 ? "0" + c : String(c);
+}
+
+// node_modules/@ctrl/tinycolor/dist/module/conversion.js
+function rgbToRgb(r, g, b) {
+  return {
+    r: bound01(r, 255) * 255,
+    g: bound01(g, 255) * 255,
+    b: bound01(b, 255) * 255
+  };
+}
+function rgbToHsl(r, g, b) {
+  r = bound01(r, 255);
+  g = bound01(g, 255);
+  b = bound01(b, 255);
+  var max = Math.max(r, g, b);
+  var min = Math.min(r, g, b);
+  var h = 0;
+  var s = 0;
+  var l2 = (max + min) / 2;
+  if (max === min) {
+    s = 0;
+    h = 0;
+  } else {
+    var d = max - min;
+    s = l2 > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+      default:
+        break;
+    }
+    h /= 6;
+  }
+  return { h, s, l: l2 };
+}
+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, l2) {
+  var r;
+  var g;
+  var b;
+  h = bound01(h, 360);
+  s = bound01(s, 100);
+  l2 = bound01(l2, 100);
+  if (s === 0) {
+    g = l2;
+    b = l2;
+    r = l2;
+  } else {
+    var q = l2 < 0.5 ? l2 * (1 + s) : l2 + s - l2 * s;
+    var p = 2 * l2 - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  return { r: r * 255, g: g * 255, b: b * 255 };
+}
+function rgbToHsv(r, g, b) {
+  r = bound01(r, 255);
+  g = bound01(g, 255);
+  b = bound01(b, 255);
+  var max = Math.max(r, g, b);
+  var min = Math.min(r, g, b);
+  var h = 0;
+  var v = max;
+  var d = max - min;
+  var s = max === 0 ? 0 : d / max;
+  if (max === min) {
+    h = 0;
+  } else {
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - 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);
+  var i2 = Math.floor(h);
+  var f = h - i2;
+  var p = v * (1 - s);
+  var q = v * (1 - f * s);
+  var t2 = v * (1 - (1 - f) * s);
+  var mod = i2 % 6;
+  var r = [v, q, p, p, t2, v][mod];
+  var g = [t2, v, v, q, p, p][mod];
+  var b = [p, p, t2, v, v, q][mod];
+  return { r: r * 255, g: g * 255, b: b * 255 };
+}
+function rgbToHex(r, g, b, allow3Char) {
+  var hex = [
+    pad2(Math.round(r).toString(16)),
+    pad2(Math.round(g).toString(16)),
+    pad2(Math.round(b).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(r, g, b, a, allow4Char) {
+  var hex = [
+    pad2(Math.round(r).toString(16)),
+    pad2(Math.round(g).toString(16)),
+    pad2(Math.round(b).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 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) {
+  var rgb = { r: 0, g: 0, b: 0 };
+  var a = 1;
+  var s = null;
+  var v = null;
+  var l2 = null;
+  var ok = false;
+  var 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);
+      l2 = convertToPercentage(color.l);
+      rgb = hslToRgb(color.h, s, l2);
+      ok = true;
+      format = "hsl";
+    }
+    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 = "(?:".concat(CSS_NUMBER, ")|(?:").concat(CSS_INTEGER, ")");
+var PERMISSIVE_MATCH3 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?");
+var PERMISSIVE_MATCH4 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(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),
+  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;
+  }
+  var 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" };
+  }
+  var 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.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) {
+  return Boolean(matchers.CSS_UNIT.exec(String(color)));
+}
+
+// node_modules/@ctrl/tinycolor/dist/module/index.js
+var TinyColor = (
+  /** @class */
+  function() {
+    function TinyColor2(color, opts) {
+      if (color === void 0) {
+        color = "";
+      }
+      if (opts === void 0) {
+        opts = {};
+      }
+      var _a;
+      if (color instanceof TinyColor2) {
+        return color;
+      }
+      if (typeof color === "number") {
+        color = numberInputToObject(color);
+      }
+      this.originalInput = color;
+      var 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 = (_a = opts.format) !== null && _a !== void 0 ? _a : 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;
+    }
+    TinyColor2.prototype.isDark = function() {
+      return this.getBrightness() < 128;
+    };
+    TinyColor2.prototype.isLight = function() {
+      return !this.isDark();
+    };
+    TinyColor2.prototype.getBrightness = function() {
+      var rgb = this.toRgb();
+      return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3;
+    };
+    TinyColor2.prototype.getLuminance = function() {
+      var rgb = this.toRgb();
+      var R;
+      var G;
+      var B;
+      var RsRGB = rgb.r / 255;
+      var GsRGB = rgb.g / 255;
+      var 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;
+    };
+    TinyColor2.prototype.getAlpha = function() {
+      return this.a;
+    };
+    TinyColor2.prototype.setAlpha = function(alpha) {
+      this.a = boundAlpha(alpha);
+      this.roundA = Math.round(100 * this.a) / 100;
+      return this;
+    };
+    TinyColor2.prototype.isMonochrome = function() {
+      var s = this.toHsl().s;
+      return s === 0;
+    };
+    TinyColor2.prototype.toHsv = function() {
+      var hsv = rgbToHsv(this.r, this.g, this.b);
+      return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this.a };
+    };
+    TinyColor2.prototype.toHsvString = function() {
+      var hsv = rgbToHsv(this.r, this.g, this.b);
+      var h = Math.round(hsv.h * 360);
+      var s = Math.round(hsv.s * 100);
+      var v = Math.round(hsv.v * 100);
+      return this.a === 1 ? "hsv(".concat(h, ", ").concat(s, "%, ").concat(v, "%)") : "hsva(".concat(h, ", ").concat(s, "%, ").concat(v, "%, ").concat(this.roundA, ")");
+    };
+    TinyColor2.prototype.toHsl = function() {
+      var hsl = rgbToHsl(this.r, this.g, this.b);
+      return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this.a };
+    };
+    TinyColor2.prototype.toHslString = function() {
+      var hsl = rgbToHsl(this.r, this.g, this.b);
+      var h = Math.round(hsl.h * 360);
+      var s = Math.round(hsl.s * 100);
+      var l2 = Math.round(hsl.l * 100);
+      return this.a === 1 ? "hsl(".concat(h, ", ").concat(s, "%, ").concat(l2, "%)") : "hsla(".concat(h, ", ").concat(s, "%, ").concat(l2, "%, ").concat(this.roundA, ")");
+    };
+    TinyColor2.prototype.toHex = function(allow3Char) {
+      if (allow3Char === void 0) {
+        allow3Char = false;
+      }
+      return rgbToHex(this.r, this.g, this.b, allow3Char);
+    };
+    TinyColor2.prototype.toHexString = function(allow3Char) {
+      if (allow3Char === void 0) {
+        allow3Char = false;
+      }
+      return "#" + this.toHex(allow3Char);
+    };
+    TinyColor2.prototype.toHex8 = function(allow4Char) {
+      if (allow4Char === void 0) {
+        allow4Char = false;
+      }
+      return rgbaToHex(this.r, this.g, this.b, this.a, allow4Char);
+    };
+    TinyColor2.prototype.toHex8String = function(allow4Char) {
+      if (allow4Char === void 0) {
+        allow4Char = false;
+      }
+      return "#" + this.toHex8(allow4Char);
+    };
+    TinyColor2.prototype.toRgb = function() {
+      return {
+        r: Math.round(this.r),
+        g: Math.round(this.g),
+        b: Math.round(this.b),
+        a: this.a
+      };
+    };
+    TinyColor2.prototype.toRgbString = function() {
+      var r = Math.round(this.r);
+      var g = Math.round(this.g);
+      var b = Math.round(this.b);
+      return this.a === 1 ? "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")") : "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(this.roundA, ")");
+    };
+    TinyColor2.prototype.toPercentageRgb = function() {
+      var fmt = function(x2) {
+        return "".concat(Math.round(bound01(x2, 255) * 100), "%");
+      };
+      return {
+        r: fmt(this.r),
+        g: fmt(this.g),
+        b: fmt(this.b),
+        a: this.a
+      };
+    };
+    TinyColor2.prototype.toPercentageRgbString = function() {
+      var rnd = function(x2) {
+        return Math.round(bound01(x2, 255) * 100);
+      };
+      return this.a === 1 ? "rgb(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%)") : "rgba(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%, ").concat(this.roundA, ")");
+    };
+    TinyColor2.prototype.toName = function() {
+      if (this.a === 0) {
+        return "transparent";
+      }
+      if (this.a < 1) {
+        return false;
+      }
+      var hex = "#" + rgbToHex(this.r, this.g, this.b, false);
+      for (var _i = 0, _a = Object.entries(names); _i < _a.length; _i++) {
+        var _b = _a[_i], key = _b[0], value = _b[1];
+        if (hex === value) {
+          return key;
+        }
+      }
+      return false;
+    };
+    TinyColor2.prototype.toString = function(format) {
+      var formatSet = Boolean(format);
+      format = format !== null && format !== void 0 ? format : this.format;
+      var formattedString = false;
+      var hasAlpha = this.a < 1 && this.a >= 0;
+      var 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();
+      }
+      return formattedString || this.toHexString();
+    };
+    TinyColor2.prototype.toNumber = function() {
+      return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
+    };
+    TinyColor2.prototype.clone = function() {
+      return new TinyColor2(this.toString());
+    };
+    TinyColor2.prototype.lighten = function(amount) {
+      if (amount === void 0) {
+        amount = 10;
+      }
+      var hsl = this.toHsl();
+      hsl.l += amount / 100;
+      hsl.l = clamp01(hsl.l);
+      return new TinyColor2(hsl);
+    };
+    TinyColor2.prototype.brighten = function(amount) {
+      if (amount === void 0) {
+        amount = 10;
+      }
+      var 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 TinyColor2(rgb);
+    };
+    TinyColor2.prototype.darken = function(amount) {
+      if (amount === void 0) {
+        amount = 10;
+      }
+      var hsl = this.toHsl();
+      hsl.l -= amount / 100;
+      hsl.l = clamp01(hsl.l);
+      return new TinyColor2(hsl);
+    };
+    TinyColor2.prototype.tint = function(amount) {
+      if (amount === void 0) {
+        amount = 10;
+      }
+      return this.mix("white", amount);
+    };
+    TinyColor2.prototype.shade = function(amount) {
+      if (amount === void 0) {
+        amount = 10;
+      }
+      return this.mix("black", amount);
+    };
+    TinyColor2.prototype.desaturate = function(amount) {
+      if (amount === void 0) {
+        amount = 10;
+      }
+      var hsl = this.toHsl();
+      hsl.s -= amount / 100;
+      hsl.s = clamp01(hsl.s);
+      return new TinyColor2(hsl);
+    };
+    TinyColor2.prototype.saturate = function(amount) {
+      if (amount === void 0) {
+        amount = 10;
+      }
+      var hsl = this.toHsl();
+      hsl.s += amount / 100;
+      hsl.s = clamp01(hsl.s);
+      return new TinyColor2(hsl);
+    };
+    TinyColor2.prototype.greyscale = function() {
+      return this.desaturate(100);
+    };
+    TinyColor2.prototype.spin = function(amount) {
+      var hsl = this.toHsl();
+      var hue = (hsl.h + amount) % 360;
+      hsl.h = hue < 0 ? 360 + hue : hue;
+      return new TinyColor2(hsl);
+    };
+    TinyColor2.prototype.mix = function(color, amount) {
+      if (amount === void 0) {
+        amount = 50;
+      }
+      var rgb1 = this.toRgb();
+      var rgb2 = new TinyColor2(color).toRgb();
+      var p = amount / 100;
+      var 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 TinyColor2(rgba);
+    };
+    TinyColor2.prototype.analogous = function(results, slices) {
+      if (results === void 0) {
+        results = 6;
+      }
+      if (slices === void 0) {
+        slices = 30;
+      }
+      var hsl = this.toHsl();
+      var part = 360 / slices;
+      var ret = [this];
+      for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results; ) {
+        hsl.h = (hsl.h + part) % 360;
+        ret.push(new TinyColor2(hsl));
+      }
+      return ret;
+    };
+    TinyColor2.prototype.complement = function() {
+      var hsl = this.toHsl();
+      hsl.h = (hsl.h + 180) % 360;
+      return new TinyColor2(hsl);
+    };
+    TinyColor2.prototype.monochromatic = function(results) {
+      if (results === void 0) {
+        results = 6;
+      }
+      var hsv = this.toHsv();
+      var h = hsv.h;
+      var s = hsv.s;
+      var v = hsv.v;
+      var res = [];
+      var modification = 1 / results;
+      while (results--) {
+        res.push(new TinyColor2({ h, s, v }));
+        v = (v + modification) % 1;
+      }
+      return res;
+    };
+    TinyColor2.prototype.splitcomplement = function() {
+      var hsl = this.toHsl();
+      var h = hsl.h;
+      return [
+        this,
+        new TinyColor2({ h: (h + 72) % 360, s: hsl.s, l: hsl.l }),
+        new TinyColor2({ h: (h + 216) % 360, s: hsl.s, l: hsl.l })
+      ];
+    };
+    TinyColor2.prototype.onBackground = function(background) {
+      var fg = this.toRgb();
+      var bg = new TinyColor2(background).toRgb();
+      return new TinyColor2({
+        r: bg.r + (fg.r - bg.r) * fg.a,
+        g: bg.g + (fg.g - bg.g) * fg.a,
+        b: bg.b + (fg.b - bg.b) * fg.a
+      });
+    };
+    TinyColor2.prototype.triad = function() {
+      return this.polyad(3);
+    };
+    TinyColor2.prototype.tetrad = function() {
+      return this.polyad(4);
+    };
+    TinyColor2.prototype.polyad = function(n) {
+      var hsl = this.toHsl();
+      var h = hsl.h;
+      var result = [this];
+      var increment = 360 / n;
+      for (var i2 = 1; i2 < n; i2++) {
+        result.push(new TinyColor2({ h: (h + i2 * increment) % 360, s: hsl.s, l: hsl.l }));
+      }
+      return result;
+    };
+    TinyColor2.prototype.equals = function(color) {
+      return this.toRgbString() === new TinyColor2(color).toRgbString();
+    };
+    return TinyColor2;
+  }()
+);
+
+// src/components/color-picker/color-picker.component.ts
+var hasEyeDropper = "EyeDropper" in window;
+var SlColorPicker = class extends ShoelaceElement {
+  constructor() {
+    super();
+    this.formControlController = new FormControlController(this);
+    this.isSafeValue = false;
+    this.localize = new LocalizeController(this);
+    this.hasFocus = false;
+    this.isDraggingGridHandle = false;
+    this.isEmpty = false;
+    this.inputValue = "";
+    this.hue = 0;
+    this.saturation = 100;
+    this.brightness = 100;
+    this.alpha = 100;
+    this.value = "";
+    this.defaultValue = "";
+    this.label = "";
+    this.format = "hex";
+    this.inline = false;
+    this.size = "medium";
+    this.noFormatToggle = false;
+    this.name = "";
+    this.disabled = false;
+    this.hoist = false;
+    this.opacity = false;
+    this.uppercase = false;
+    this.swatches = "";
+    this.form = "";
+    this.required = false;
+    this.handleFocusIn = () => {
+      this.hasFocus = true;
+      this.emit("sl-focus");
+    };
+    this.handleFocusOut = () => {
+      this.hasFocus = false;
+      this.emit("sl-blur");
+    };
+    this.addEventListener("focusin", this.handleFocusIn);
+    this.addEventListener("focusout", this.handleFocusOut);
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.input.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+  firstUpdated() {
+    this.input.updateComplete.then(() => {
+      this.formControlController.updateValidity();
+    });
+  }
+  handleCopy() {
+    this.input.select();
+    document.execCommand("copy");
+    this.previewButton.focus();
+    this.previewButton.classList.add("color-picker__preview-color--copied");
+    this.previewButton.addEventListener("animationend", () => {
+      this.previewButton.classList.remove("color-picker__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.emit("sl-change");
+    this.emit("sl-input");
+  }
+  handleAlphaDrag(event) {
+    const container = this.shadowRoot.querySelector(".color-picker__slider.color-picker__alpha");
+    const handle = container.querySelector(".color-picker__slider-handle");
+    const { width } = container.getBoundingClientRect();
+    let oldValue = this.value;
+    handle.focus();
+    event.preventDefault();
+    drag(container, {
+      onMove: (x2) => {
+        this.alpha = clamp(x2 / width * 100, 0, 100);
+        this.syncValues();
+        if (this.value !== oldValue) {
+          oldValue = this.value;
+          this.emit("sl-change");
+          this.emit("sl-input");
+        }
+      },
+      initialEvent: event
+    });
+  }
+  handleHueDrag(event) {
+    const container = this.shadowRoot.querySelector(".color-picker__slider.color-picker__hue");
+    const handle = container.querySelector(".color-picker__slider-handle");
+    const { width } = container.getBoundingClientRect();
+    let oldValue = this.value;
+    handle.focus();
+    event.preventDefault();
+    drag(container, {
+      onMove: (x2) => {
+        this.hue = clamp(x2 / width * 360, 0, 360);
+        this.syncValues();
+        if (this.value !== oldValue) {
+          oldValue = this.value;
+          this.emit("sl-change");
+          this.emit("sl-input");
+        }
+      },
+      initialEvent: event
+    });
+  }
+  handleGridDrag(event) {
+    const grid = this.shadowRoot.querySelector(".color-picker__grid");
+    const handle = grid.querySelector(".color-picker__grid-handle");
+    const { width, height } = grid.getBoundingClientRect();
+    let oldValue = this.value;
+    handle.focus();
+    event.preventDefault();
+    this.isDraggingGridHandle = true;
+    drag(grid, {
+      onMove: (x2, y) => {
+        this.saturation = clamp(x2 / width * 100, 0, 100);
+        this.brightness = clamp(100 - y / height * 100, 0, 100);
+        this.syncValues();
+        if (this.value !== oldValue) {
+          oldValue = this.value;
+          this.emit("sl-change");
+          this.emit("sl-input");
+        }
+      },
+      onStop: () => this.isDraggingGridHandle = false,
+      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.emit("sl-change");
+      this.emit("sl-input");
+    }
+  }
+  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.emit("sl-change");
+      this.emit("sl-input");
+    }
+  }
+  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.emit("sl-change");
+      this.emit("sl-input");
+    }
+  }
+  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.emit("sl-change");
+      this.emit("sl-input");
+    }
+  }
+  handleInputInput(event) {
+    this.formControlController.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.emit("sl-change");
+          this.emit("sl-input");
+        }
+        setTimeout(() => this.input.select());
+      } else {
+        this.hue = 0;
+      }
+    }
+  }
+  handleInputInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  handleTouchMove(event) {
+    event.preventDefault();
+  }
+  parseColor(colorString) {
+    const color = new TinyColor(colorString);
+    if (!color.isValid) {
+      return null;
+    }
+    const hslColor = color.toHsl();
+    const hsl = {
+      h: hslColor.h,
+      s: hslColor.s * 100,
+      l: hslColor.l * 100,
+      a: hslColor.a
+    };
+    const rgb = color.toRgb();
+    const hex = color.toHexString();
+    const hexa = color.toHex8String();
+    const hsvColor = color.toHsv();
+    const hsv = {
+      h: hsvColor.h,
+      s: hsvColor.s * 100,
+      v: hsvColor.v * 100,
+      a: hsvColor.a
+    };
+    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,
+        string: this.setLetterCase(
+          `rgba(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)}, ${rgb.a.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("color-picker__preview-color--copied");
+  }
+  handleEyeDropper() {
+    if (!hasEyeDropper) {
+      return;
+    }
+    const eyeDropper = new EyeDropper();
+    eyeDropper.open().then((colorSelectionResult) => {
+      const oldValue = this.value;
+      this.setColor(colorSelectionResult.sRGBHex);
+      if (this.value !== oldValue) {
+        this.emit("sl-change");
+        this.emit("sl-input");
+      }
+    }).catch(() => {
+    });
+  }
+  selectSwatch(color) {
+    const oldValue = this.value;
+    if (!this.disabled) {
+      this.setColor(color);
+      if (this.value !== oldValue) {
+        this.emit("sl-change");
+        this.emit("sl-input");
+      }
+    }
+  }
+  /** 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;
+  }
+  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 = newColor.hsva.a * 100;
+        this.syncValues();
+      } else {
+        this.inputValue = oldValue != null ? oldValue : "";
+      }
+    }
+  }
+  /** Sets focus on the color picker. */
+  focus(options) {
+    if (this.inline) {
+      this.base.focus(options);
+    } else {
+      this.trigger.focus(options);
+    }
+  }
+  /** Removes focus from the color picker. */
+  blur() {
+    var _a;
+    const elementToBlur = this.inline ? this.base : this.trigger;
+    if (this.hasFocus) {
+      elementToBlur.focus({ preventScroll: true });
+      elementToBlur.blur();
+    }
+    if ((_a = this.dropdown) == null ? void 0 : _a.open) {
+      this.dropdown.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 but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    if (!this.inline && !this.validity.valid) {
+      this.dropdown.show();
+      this.addEventListener("sl-after-show", () => this.input.reportValidity(), { once: true });
+      if (!this.disabled) {
+        this.formControlController.emitInvalidEvent();
+      }
+      return false;
+    }
+    return this.input.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  render() {
+    const gridHandleX = this.saturation;
+    const gridHandleY = 100 - this.brightness;
+    const swatches = Array.isArray(this.swatches) ? this.swatches : this.swatches.split(";").filter((color) => color.trim() !== "");
+    const colorPicker = x`
+      <div
+        part="base"
+        class=${o({
+      "color-picker": true,
+      "color-picker--inline": this.inline,
+      "color-picker--disabled": this.disabled,
+      "color-picker--focused": this.hasFocus
+    })}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-labelledby="label"
+        tabindex=${this.inline ? "0" : "-1"}
+      >
+        ${this.inline ? x`
+              <sl-visually-hidden id="label">
+                <slot name="label">${this.label}</slot>
+              </sl-visually-hidden>
+            ` : null}
+
+        <div
+          part="grid"
+          class="color-picker__grid"
+          style=${o2({ backgroundColor: this.getHexString(this.hue, 100, 100) })}
+          @pointerdown=${this.handleGridDrag}
+          @touchmove=${this.handleTouchMove}
+        >
+          <span
+            part="grid-handle"
+            class=${o({
+      "color-picker__grid-handle": true,
+      "color-picker__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=${l(this.disabled ? void 0 : "0")}
+            @keydown=${this.handleGridKeyDown}
+          ></span>
+        </div>
+
+        <div class="color-picker__controls">
+          <div class="color-picker__sliders">
+            <div
+              part="slider hue-slider"
+              class="color-picker__hue color-picker__slider"
+              @pointerdown=${this.handleHueDrag}
+              @touchmove=${this.handleTouchMove}
+            >
+              <span
+                part="slider-handle hue-slider-handle"
+                class="color-picker__slider-handle"
+                style=${o2({
+      left: `${this.hue === 0 ? 0 : 100 / (360 / this.hue)}%`
+    })}
+                role="slider"
+                aria-label="hue"
+                aria-orientation="horizontal"
+                aria-valuemin="0"
+                aria-valuemax="360"
+                aria-valuenow=${`${Math.round(this.hue)}`}
+                tabindex=${l(this.disabled ? void 0 : "0")}
+                @keydown=${this.handleHueKeyDown}
+              ></span>
+            </div>
+
+            ${this.opacity ? x`
+                  <div
+                    part="slider opacity-slider"
+                    class="color-picker__alpha color-picker__slider color-picker__transparent-bg"
+                    @pointerdown="${this.handleAlphaDrag}"
+                    @touchmove=${this.handleTouchMove}
+                  >
+                    <div
+                      class="color-picker__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="color-picker__slider-handle"
+                      style=${o2({
+      left: `${this.alpha}%`
+    })}
+                      role="slider"
+                      aria-label="alpha"
+                      aria-orientation="horizontal"
+                      aria-valuemin="0"
+                      aria-valuemax="100"
+                      aria-valuenow=${Math.round(this.alpha)}
+                      tabindex=${l(this.disabled ? void 0 : "0")}
+                      @keydown=${this.handleAlphaKeyDown}
+                    ></span>
+                  </div>
+                ` : ""}
+          </div>
+
+          <button
+            type="button"
+            part="preview"
+            class="color-picker__preview color-picker__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="color-picker__user-input" aria-live="polite">
+          <sl-input
+            part="input"
+            type="text"
+            name=${this.name}
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="off"
+            spellcheck="false"
+            value=${this.isEmpty ? "" : this.inputValue}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            aria-label=${this.localize.term("currentValue")}
+            @keydown=${this.handleInputKeyDown}
+            @sl-change=${this.handleInputChange}
+            @sl-input=${this.handleInputInput}
+            @sl-invalid=${this.handleInputInvalid}
+            @sl-blur=${this.stopNestedEventPropagation}
+            @sl-focus=${this.stopNestedEventPropagation}
+          ></sl-input>
+
+          <sl-button-group>
+            ${!this.noFormatToggle ? x`
+                  <sl-button
+                    part="format-button"
+                    aria-label=${this.localize.term("toggleColorFormat")}
+                    exportparts="
+                      base:format-button__base,
+                      prefix:format-button__prefix,
+                      label:format-button__label,
+                      suffix:format-button__suffix,
+                      caret:format-button__caret
+                    "
+                    @click=${this.handleFormatToggle}
+                    @sl-blur=${this.stopNestedEventPropagation}
+                    @sl-focus=${this.stopNestedEventPropagation}
+                  >
+                    ${this.setLetterCase(this.format)}
+                  </sl-button>
+                ` : ""}
+            ${hasEyeDropper ? x`
+                  <sl-button
+                    part="eye-dropper-button"
+                    exportparts="
+                      base:eye-dropper-button__base,
+                      prefix:eye-dropper-button__prefix,
+                      label:eye-dropper-button__label,
+                      suffix:eye-dropper-button__suffix,
+                      caret:eye-dropper-button__caret
+                    "
+                    @click=${this.handleEyeDropper}
+                    @sl-blur=${this.stopNestedEventPropagation}
+                    @sl-focus=${this.stopNestedEventPropagation}
+                  >
+                    <sl-icon
+                      library="system"
+                      name="eyedropper"
+                      label=${this.localize.term("selectAColorFromTheScreen")}
+                    ></sl-icon>
+                  </sl-button>
+                ` : ""}
+          </sl-button-group>
+        </div>
+
+        ${swatches.length > 0 ? x`
+              <div part="swatches" class="color-picker__swatches">
+                ${swatches.map((swatch) => {
+      const parsedColor = this.parseColor(swatch);
+      if (!parsedColor) {
+        console.error(`Unable to parse swatch color: "${swatch}"`, this);
+        return "";
+      }
+      return x`
+                    <div
+                      part="swatch"
+                      class="color-picker__swatch color-picker__transparent-bg"
+                      tabindex=${l(this.disabled ? void 0 : "0")}
+                      role="button"
+                      aria-label=${swatch}
+                      @click=${() => this.selectSwatch(swatch)}
+                      @keydown=${(event) => !this.disabled && event.key === "Enter" && this.setColor(parsedColor.hexa)}
+                    >
+                      <div
+                        class="color-picker__swatch-color"
+                        style=${o2({ backgroundColor: parsedColor.hexa })}
+                      ></div>
+                    </div>
+                  `;
+    })}
+              </div>
+            ` : ""}
+      </div>
+    `;
+    if (this.inline) {
+      return colorPicker;
+    }
+    return x`
+      <sl-dropdown
+        class="color-dropdown"
+        aria-disabled=${this.disabled ? "true" : "false"}
+        .containing-element=${this}
+        ?disabled=${this.disabled}
+        ?hoist=${this.hoist}
+        @sl-after-hide=${this.handleAfterHide}
+      >
+        <button
+          part="trigger"
+          slot="trigger"
+          class=${o({
+      "color-dropdown__trigger": true,
+      "color-dropdown__trigger--disabled": this.disabled,
+      "color-dropdown__trigger--small": this.size === "small",
+      "color-dropdown__trigger--medium": this.size === "medium",
+      "color-dropdown__trigger--large": this.size === "large",
+      "color-dropdown__trigger--empty": this.isEmpty,
+      "color-dropdown__trigger--focused": this.hasFocus,
+      "color-picker__transparent-bg": true
+    })}
+          style=${o2({
+      color: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha)
+    })}
+          type="button"
+        >
+          <sl-visually-hidden>
+            <slot name="label">${this.label}</slot>
+          </sl-visually-hidden>
+        </button>
+        ${colorPicker}
+      </sl-dropdown>
+    `;
+  }
+};
+SlColorPicker.styles = color_picker_styles_default;
+SlColorPicker.dependencies = {
+  "sl-button-group": SlButtonGroup,
+  "sl-button": SlButton,
+  "sl-dropdown": SlDropdown,
+  "sl-icon": SlIcon,
+  "sl-input": SlInput,
+  "sl-visually-hidden": SlVisuallyHidden
+};
+__decorateClass([
+  i('[part~="base"]')
+], SlColorPicker.prototype, "base", 2);
+__decorateClass([
+  i('[part~="input"]')
+], SlColorPicker.prototype, "input", 2);
+__decorateClass([
+  i(".color-dropdown")
+], SlColorPicker.prototype, "dropdown", 2);
+__decorateClass([
+  i('[part~="preview"]')
+], SlColorPicker.prototype, "previewButton", 2);
+__decorateClass([
+  i('[part~="trigger"]')
+], SlColorPicker.prototype, "trigger", 2);
+__decorateClass([
+  t()
+], SlColorPicker.prototype, "hasFocus", 2);
+__decorateClass([
+  t()
+], SlColorPicker.prototype, "isDraggingGridHandle", 2);
+__decorateClass([
+  t()
+], SlColorPicker.prototype, "isEmpty", 2);
+__decorateClass([
+  t()
+], SlColorPicker.prototype, "inputValue", 2);
+__decorateClass([
+  t()
+], SlColorPicker.prototype, "hue", 2);
+__decorateClass([
+  t()
+], SlColorPicker.prototype, "saturation", 2);
+__decorateClass([
+  t()
+], SlColorPicker.prototype, "brightness", 2);
+__decorateClass([
+  t()
+], SlColorPicker.prototype, "alpha", 2);
+__decorateClass([
+  e()
+], SlColorPicker.prototype, "value", 2);
+__decorateClass([
+  defaultValue()
+], SlColorPicker.prototype, "defaultValue", 2);
+__decorateClass([
+  e()
+], SlColorPicker.prototype, "label", 2);
+__decorateClass([
+  e()
+], SlColorPicker.prototype, "format", 2);
+__decorateClass([
+  e({ type: Boolean, reflect: true })
+], SlColorPicker.prototype, "inline", 2);
+__decorateClass([
+  e({ reflect: true })
+], SlColorPicker.prototype, "size", 2);
+__decorateClass([
+  e({ attribute: "no-format-toggle", type: Boolean })
+], SlColorPicker.prototype, "noFormatToggle", 2);
+__decorateClass([
+  e()
+], SlColorPicker.prototype, "name", 2);
+__decorateClass([
+  e({ type: Boolean, reflect: true })
+], SlColorPicker.prototype, "disabled", 2);
+__decorateClass([
+  e({ type: Boolean })
+], SlColorPicker.prototype, "hoist", 2);
+__decorateClass([
+  e({ type: Boolean })
+], SlColorPicker.prototype, "opacity", 2);
+__decorateClass([
+  e({ type: Boolean })
+], SlColorPicker.prototype, "uppercase", 2);
+__decorateClass([
+  e()
+], SlColorPicker.prototype, "swatches", 2);
+__decorateClass([
+  e({ reflect: true })
+], SlColorPicker.prototype, "form", 2);
+__decorateClass([
+  e({ type: Boolean, reflect: true })
+], SlColorPicker.prototype, "required", 2);
+__decorateClass([
+  watch("format", { waitUntilFirstUpdate: true })
+], SlColorPicker.prototype, "handleFormatChange", 1);
+__decorateClass([
+  watch("opacity", { waitUntilFirstUpdate: true })
+], SlColorPicker.prototype, "handleOpacityChange", 1);
+__decorateClass([
+  watch("value")
+], SlColorPicker.prototype, "handleValueChange", 1);
+
+export {
+  SlColorPicker
+};