@luzmo/lucero 1.0.1-alpha.3 → 1.0.1-alpha.30

package/components/index-HjQa8tew.js

@@ -1,1174 +0,0 @@
-/*! * Lucero - The design system for Luzmo.
- * 
- * Copyright © 2025 Luzmo
- * All rights reserved.
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
- * This license allows users with a current active Luzmo account to use Lucero.
- * This license terminates automatically if a user no longer has an active Luzmo account.
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
- * 
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- * */
-import { r as W, x as j, n as v } from "./base-WsynuqaS.js";
-import { e as T } from "./query-D_KR_GUc.js";
-import { o as C } from "./if-defined-DOaE2coe.js";
-import { o as q } from "./style-map-IgqIKvlE.js";
-import "./color-handle/index.js";
-import { F as U } from "./focusable-BxtpnzWp.js";
-import { L as V } from "./language-resolution-8yZa5r_P.js";
-import { s as G } from "./streaming-listener-CP-JE6Fa.js";
-function c(r, t) {
-  K(r) && (r = "100%");
-  const e = X(r);
-  return r = t === 360 ? r : Math.min(t, Math.max(0, parseFloat(r))), e && (r = parseInt(String(r * t), 10) / 100), Math.abs(r - t) < 1e-6 ? 1 : (t === 360 ? r = (r < 0 ? r % t + t : r % t) / parseFloat(String(t)) : r = r % t / parseFloat(String(t)), r);
-}
-function w(r) {
-  return Math.min(1, Math.max(0, r));
-}
-function K(r) {
-  return typeof r == "string" && r.indexOf(".") !== -1 && parseFloat(r) === 1;
-}
-function X(r) {
-  return typeof r == "string" && r.indexOf("%") !== -1;
-}
-function L(r) {
-  return r = parseFloat(r), (isNaN(r) || r < 0 || r > 1) && (r = 1), r;
-}
-function S(r) {
-  return Number(r) <= 1 ? `${Number(r) * 100}%` : r;
-}
-function k(r) {
-  return r.length === 1 ? "0" + r : String(r);
-}
-function Y(r, t, e) {
-  return {
-    r: c(r, 255) * 255,
-    g: c(t, 255) * 255,
-    b: c(e, 255) * 255
-  };
-}
-function A(r, t, e) {
-  r = c(r, 255), t = c(t, 255), e = c(e, 255);
-  const s = Math.max(r, t, e), o = Math.min(r, t, e);
-  let i = 0, n = 0;
-  const a = (s + o) / 2;
-  if (s === o)
-    n = 0, i = 0;
-  else {
-    const l = s - o;
-    switch (n = a > 0.5 ? l / (2 - s - o) : l / (s + o), s) {
-      case r:
-        i = (t - e) / l + (t < e ? 6 : 0);
-        break;
-      case t:
-        i = (e - r) / l + 2;
-        break;
-      case e:
-        i = (r - t) / l + 4;
-        break;
-    }
-    i /= 6;
-  }
-  return { h: i, s: n, l: a };
-}
-function R(r, t, e) {
-  return e < 0 && (e += 1), e > 1 && (e -= 1), e < 1 / 6 ? r + (t - r) * (6 * e) : e < 1 / 2 ? t : e < 2 / 3 ? r + (t - r) * (2 / 3 - e) * 6 : r;
-}
-function Z(r, t, e) {
-  let s, o, i;
-  if (r = c(r, 360), t = c(t, 100), e = c(e, 100), t === 0)
-    o = e, i = e, s = e;
-  else {
-    const n = e < 0.5 ? e * (1 + t) : e + t - e * t, a = 2 * e - n;
-    s = R(a, n, r + 1 / 3), o = R(a, n, r), i = R(a, n, r - 1 / 3);
-  }
-  return { r: s * 255, g: o * 255, b: i * 255 };
-}
-function F(r, t, e) {
-  r = c(r, 255), t = c(t, 255), e = c(e, 255);
-  const s = Math.max(r, t, e), o = Math.min(r, t, e);
-  let i = 0;
-  const n = s, a = s - o, l = s === 0 ? 0 : a / s;
-  if (s === o)
-    i = 0;
-  else {
-    switch (s) {
-      case r:
-        i = (t - e) / a + (t < e ? 6 : 0);
-        break;
-      case t:
-        i = (e - r) / a + 2;
-        break;
-      case e:
-        i = (r - t) / a + 4;
-        break;
-    }
-    i /= 6;
-  }
-  return { h: i, s: l, v: n };
-}
-function J(r, t, e) {
-  r = c(r, 360) * 6, t = c(t, 100), e = c(e, 100);
-  const s = Math.floor(r), o = r - s, i = e * (1 - t), n = e * (1 - o * t), a = e * (1 - (1 - o) * t), l = s % 6, m = [e, n, i, i, a, e][l], u = [a, e, e, n, i, i][l], y = [i, i, a, e, e, n][l];
-  return { r: m * 255, g: u * 255, b: y * 255 };
-}
-function E(r, t, e, s) {
-  const o = [
-    k(Math.round(r).toString(16)),
-    k(Math.round(t).toString(16)),
-    k(Math.round(e).toString(16))
-  ];
-  return s && o[0].startsWith(o[0].charAt(1)) && o[1].startsWith(o[1].charAt(1)) && o[2].startsWith(o[2].charAt(1)) ? o[0].charAt(0) + o[1].charAt(0) + o[2].charAt(0) : o.join("");
-}
-function Q(r, t, e, s, o) {
-  const i = [
-    k(Math.round(r).toString(16)),
-    k(Math.round(t).toString(16)),
-    k(Math.round(e).toString(16)),
-    k(et(s))
-  ];
-  return o && i[0].startsWith(i[0].charAt(1)) && i[1].startsWith(i[1].charAt(1)) && i[2].startsWith(i[2].charAt(1)) && i[3].startsWith(i[3].charAt(1)) ? i[0].charAt(0) + i[1].charAt(0) + i[2].charAt(0) + i[3].charAt(0) : i.join("");
-}
-function tt(r, t, e, s) {
-  const o = r / 100, i = t / 100, n = e / 100, a = s / 100, l = 255 * (1 - o) * (1 - a), m = 255 * (1 - i) * (1 - a), u = 255 * (1 - n) * (1 - a);
-  return { r: l, g: m, b: u };
-}
-function _(r, t, e) {
-  let s = 1 - r / 255, o = 1 - t / 255, i = 1 - e / 255, n = Math.min(s, o, i);
-  return n === 1 ? (s = 0, o = 0, i = 0) : (s = (s - n) / (1 - n) * 100, o = (o - n) / (1 - n) * 100, i = (i - n) / (1 - n) * 100), n *= 100, {
-    c: Math.round(s),
-    m: Math.round(o),
-    y: Math.round(i),
-    k: Math.round(n)
-  };
-}
-function et(r) {
-  return Math.round(parseFloat(r) * 255).toString(16);
-}
-function I(r) {
-  return g(r) / 255;
-}
-function g(r) {
-  return parseInt(r, 16);
-}
-function rt(r) {
-  return {
-    r: r >> 16,
-    g: (r & 65280) >> 8,
-    b: r & 255
-  };
-}
-const P = {
-  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"
-};
-function st(r) {
-  let t = { r: 0, g: 0, b: 0 }, e = 1, s = null, o = null, i = null, n = !1, a = !1;
-  return typeof r == "string" && (r = nt(r)), typeof r == "object" && (f(r.r) && f(r.g) && f(r.b) ? (t = Y(r.r, r.g, r.b), n = !0, a = String(r.r).substr(-1) === "%" ? "prgb" : "rgb") : f(r.h) && f(r.s) && f(r.v) ? (s = S(r.s), o = S(r.v), t = J(r.h, s, o), n = !0, a = "hsv") : f(r.h) && f(r.s) && f(r.l) ? (s = S(r.s), i = S(r.l), t = Z(r.h, s, i), n = !0, a = "hsl") : f(r.c) && f(r.m) && f(r.y) && f(r.k) && (t = tt(r.c, r.m, r.y, r.k), n = !0, a = "cmyk"), Object.prototype.hasOwnProperty.call(r, "a") && (e = r.a)), e = L(e), {
-    ok: n,
-    format: r.format || a,
-    r: Math.min(255, Math.max(t.r, 0)),
-    g: Math.min(255, Math.max(t.g, 0)),
-    b: Math.min(255, Math.max(t.b, 0)),
-    a: e
-  };
-}
-const it = "[-\\+]?\\d+%?", ot = "[-\\+]?\\d*\\.\\d+%?", x = "(?:" + ot + ")|(?:" + it + ")", z = "[\\s|\\(]+(" + x + ")[,|\\s]+(" + x + ")[,|\\s]+(" + x + ")\\s*\\)?", M = (
-  // eslint-disable-next-line prettier/prettier
-  "[\\s|\\(]+(" + x + ")[,|\\s]+(" + x + ")[,|\\s]+(" + x + ")[,|\\s]+(" + x + ")\\s*\\)?"
-), p = {
-  CSS_UNIT: new RegExp(x),
-  rgb: new RegExp("rgb" + z),
-  rgba: new RegExp("rgba" + M),
-  hsl: new RegExp("hsl" + z),
-  hsla: new RegExp("hsla" + M),
-  hsv: new RegExp("hsv" + z),
-  hsva: new RegExp("hsva" + M),
-  cmyk: new RegExp("cmyk" + M),
-  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 nt(r) {
-  if (r = r.trim().toLowerCase(), r.length === 0)
-    return !1;
-  let t = !1;
-  if (P[r])
-    r = P[r], t = !0;
-  else if (r === "transparent")
-    return { r: 0, g: 0, b: 0, a: 0, format: "name" };
-  let e = p.rgb.exec(r);
-  return e ? { r: e[1], g: e[2], b: e[3] } : (e = p.rgba.exec(r), e ? { r: e[1], g: e[2], b: e[3], a: e[4] } : (e = p.hsl.exec(r), e ? { h: e[1], s: e[2], l: e[3] } : (e = p.hsla.exec(r), e ? { h: e[1], s: e[2], l: e[3], a: e[4] } : (e = p.hsv.exec(r), e ? { h: e[1], s: e[2], v: e[3] } : (e = p.hsva.exec(r), e ? { h: e[1], s: e[2], v: e[3], a: e[4] } : (e = p.cmyk.exec(r), e ? {
-    c: e[1],
-    m: e[2],
-    y: e[3],
-    k: e[4]
-  } : (e = p.hex8.exec(r), e ? {
-    r: g(e[1]),
-    g: g(e[2]),
-    b: g(e[3]),
-    a: I(e[4]),
-    format: t ? "name" : "hex8"
-  } : (e = p.hex6.exec(r), e ? {
-    r: g(e[1]),
-    g: g(e[2]),
-    b: g(e[3]),
-    format: t ? "name" : "hex"
-  } : (e = p.hex4.exec(r), e ? {
-    r: g(e[1] + e[1]),
-    g: g(e[2] + e[2]),
-    b: g(e[3] + e[3]),
-    a: I(e[4] + e[4]),
-    format: t ? "name" : "hex8"
-  } : (e = p.hex3.exec(r), e ? {
-    r: g(e[1] + e[1]),
-    g: g(e[2] + e[2]),
-    b: g(e[3] + e[3]),
-    format: t ? "name" : "hex"
-  } : !1))))))))));
-}
-function f(r) {
-  return typeof r == "number" ? !Number.isNaN(r) : p.CSS_UNIT.test(r);
-}
-class h {
-  constructor(t = "", e = {}) {
-    if (t instanceof h)
-      return t;
-    typeof t == "number" && (t = rt(t)), this.originalInput = t;
-    const s = st(t);
-    this.originalInput = t, this.r = s.r, this.g = s.g, this.b = s.b, this.a = s.a, this.roundA = Math.round(100 * this.a) / 100, this.format = e.format ?? s.format, this.gradientType = e.gradientType, this.r < 1 && (this.r = Math.round(this.r)), this.g < 1 && (this.g = Math.round(this.g)), this.b < 1 && (this.b = Math.round(this.b)), this.isValid = s.ok;
-  }
-  isDark() {
-    return this.getBrightness() < 128;
-  }
-  isLight() {
-    return !this.isDark();
-  }
-  /**
-   * Returns the perceived brightness of the color, from 0-255.
-   */
-  getBrightness() {
-    const t = this.toRgb();
-    return (t.r * 299 + t.g * 587 + t.b * 114) / 1e3;
-  }
-  /**
-   * Returns the perceived luminance of a color, from 0-1.
-   */
-  getLuminance() {
-    const t = this.toRgb();
-    let e, s, o;
-    const i = t.r / 255, n = t.g / 255, a = t.b / 255;
-    return i <= 0.03928 ? e = i / 12.92 : e = Math.pow((i + 0.055) / 1.055, 2.4), n <= 0.03928 ? s = n / 12.92 : s = Math.pow((n + 0.055) / 1.055, 2.4), a <= 0.03928 ? o = a / 12.92 : o = Math.pow((a + 0.055) / 1.055, 2.4), 0.2126 * e + 0.7152 * s + 0.0722 * o;
-  }
-  /**
-   * 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(t) {
-    return this.a = L(t), this.roundA = Math.round(100 * this.a) / 100, this;
-  }
-  /**
-   * Returns whether the color is monochrome.
-   */
-  isMonochrome() {
-    const { s: t } = this.toHsl();
-    return t === 0;
-  }
-  /**
-   * Returns the object as a HSVA object.
-   */
-  toHsv() {
-    const t = F(this.r, this.g, this.b);
-    return { h: t.h * 360, s: t.s, v: t.v, a: this.a };
-  }
-  /**
-   * Returns the hsva values interpolated into a string with the following format:
-   * "hsva(xxx, xxx, xxx, xx)".
-   */
-  toHsvString() {
-    const t = F(this.r, this.g, this.b), e = Math.round(t.h * 360), s = Math.round(t.s * 100), o = Math.round(t.v * 100);
-    return this.a === 1 ? `hsv(${e}, ${s}%, ${o}%)` : `hsva(${e}, ${s}%, ${o}%, ${this.roundA})`;
-  }
-  /**
-   * Returns the object as a HSLA object.
-   */
-  toHsl() {
-    const t = A(this.r, this.g, this.b);
-    return { h: t.h * 360, s: t.s, l: t.l, a: this.a };
-  }
-  /**
-   * Returns the hsla values interpolated into a string with the following format:
-   * "hsla(xxx, xxx, xxx, xx)".
-   */
-  toHslString() {
-    const t = A(this.r, this.g, this.b), e = Math.round(t.h * 360), s = Math.round(t.s * 100), o = Math.round(t.l * 100);
-    return this.a === 1 ? `hsl(${e}, ${s}%, ${o}%)` : `hsla(${e}, ${s}%, ${o}%, ${this.roundA})`;
-  }
-  /**
-   * Returns the hex value of the color.
-   * @param allow3Char will shorten hex value to 3 char if possible
-   */
-  toHex(t = !1) {
-    return E(this.r, this.g, this.b, t);
-  }
-  /**
-   * Returns the hex value of the color -with a # prefixed.
-   * @param allow3Char will shorten hex value to 3 char if possible
-   */
-  toHexString(t = !1) {
-    return "#" + this.toHex(t);
-  }
-  /**
-   * Returns the hex 8 value of the color.
-   * @param allow4Char will shorten hex value to 4 char if possible
-   */
-  toHex8(t = !1) {
-    return Q(this.r, this.g, this.b, this.a, t);
-  }
-  /**
-   * Returns the hex 8 value of the color -with a # prefixed.
-   * @param allow4Char will shorten hex value to 4 char if possible
-   */
-  toHex8String(t = !1) {
-    return "#" + this.toHex8(t);
-  }
-  /**
-   * 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(t = !1) {
-    return this.a === 1 ? this.toHexString(t) : this.toHex8String(t);
-  }
-  /**
-   * 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 t = Math.round(this.r), e = Math.round(this.g), s = Math.round(this.b);
-    return this.a === 1 ? `rgb(${t}, ${e}, ${s})` : `rgba(${t}, ${e}, ${s}, ${this.roundA})`;
-  }
-  /**
-   * Returns the object as a RGBA object.
-   */
-  toPercentageRgb() {
-    const t = (e) => `${Math.round(c(e, 255) * 100)}%`;
-    return {
-      r: t(this.r),
-      g: t(this.g),
-      b: t(this.b),
-      a: this.a
-    };
-  }
-  /**
-   * Returns the RGBA relative values interpolated into a string
-   */
-  toPercentageRgbString() {
-    const t = (e) => Math.round(c(e, 255) * 100);
-    return this.a === 1 ? `rgb(${t(this.r)}%, ${t(this.g)}%, ${t(this.b)}%)` : `rgba(${t(this.r)}%, ${t(this.g)}%, ${t(this.b)}%, ${this.roundA})`;
-  }
-  toCmyk() {
-    return {
-      ..._(this.r, this.g, this.b)
-    };
-  }
-  toCmykString() {
-    const { c: t, m: e, y: s, k: o } = _(this.r, this.g, this.b);
-    return `cmyk(${t}, ${e}, ${s}, ${o})`;
-  }
-  /**
-   * The 'real' name of the color -if there is one.
-   */
-  toName() {
-    if (this.a === 0)
-      return "transparent";
-    if (this.a < 1)
-      return !1;
-    const t = "#" + E(this.r, this.g, this.b, !1);
-    for (const [e, s] of Object.entries(P))
-      if (t === s)
-        return e;
-    return !1;
-  }
-  toString(t) {
-    const e = !!t;
-    t = t ?? this.format;
-    let s = !1;
-    const o = this.a < 1 && this.a >= 0;
-    return !e && o && (t.startsWith("hex") || t === "name") ? t === "name" && this.a === 0 ? this.toName() : this.toRgbString() : (t === "rgb" && (s = this.toRgbString()), t === "prgb" && (s = this.toPercentageRgbString()), (t === "hex" || t === "hex6") && (s = this.toHexString()), t === "hex3" && (s = this.toHexString(!0)), t === "hex4" && (s = this.toHex8String(!0)), t === "hex8" && (s = this.toHex8String()), t === "name" && (s = this.toName()), t === "hsl" && (s = this.toHslString()), t === "hsv" && (s = this.toHsvString()), t === "cmyk" && (s = this.toCmykString()), s || this.toHexString());
-  }
-  toNumber() {
-    return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
-  }
-  clone() {
-    return new h(this.toString());
-  }
-  /**
-   * Lighten the color a given amount. Providing 100 will always return white.
-   * @param amount - valid between 1-100
-   */
-  lighten(t = 10) {
-    const e = this.toHsl();
-    return e.l += t / 100, e.l = w(e.l), new h(e);
-  }
-  /**
-   * Brighten the color a given amount, from 0 to 100.
-   * @param amount - valid between 1-100
-   */
-  brighten(t = 10) {
-    const e = this.toRgb();
-    return e.r = Math.max(0, Math.min(255, e.r - Math.round(255 * -(t / 100)))), e.g = Math.max(0, Math.min(255, e.g - Math.round(255 * -(t / 100)))), e.b = Math.max(0, Math.min(255, e.b - Math.round(255 * -(t / 100)))), new h(e);
-  }
-  /**
-   * Darken the color a given amount, from 0 to 100.
-   * Providing 100 will always return black.
-   * @param amount - valid between 1-100
-   */
-  darken(t = 10) {
-    const e = this.toHsl();
-    return e.l -= t / 100, e.l = w(e.l), new h(e);
-  }
-  /**
-   * 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(t = 10) {
-    return this.mix("white", t);
-  }
-  /**
-   * 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(t = 10) {
-    return this.mix("black", t);
-  }
-  /**
-   * 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(t = 10) {
-    const e = this.toHsl();
-    return e.s -= t / 100, e.s = w(e.s), new h(e);
-  }
-  /**
-   * Saturate the color a given amount, from 0 to 100.
-   * @param amount - valid between 1-100
-   */
-  saturate(t = 10) {
-    const e = this.toHsl();
-    return e.s += t / 100, e.s = w(e.s), new h(e);
-  }
-  /**
-   * 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(t) {
-    const e = this.toHsl(), s = (e.h + t) % 360;
-    return e.h = s < 0 ? 360 + s : s, new h(e);
-  }
-  /**
-   * Mix the current color a given amount with another color, from 0 to 100.
-   * 0 means no mixing (return current color).
-   */
-  mix(t, e = 50) {
-    const s = this.toRgb(), o = new h(t).toRgb(), i = e / 100, n = {
-      r: (o.r - s.r) * i + s.r,
-      g: (o.g - s.g) * i + s.g,
-      b: (o.b - s.b) * i + s.b,
-      a: (o.a - s.a) * i + s.a
-    };
-    return new h(n);
-  }
-  analogous(t = 6, e = 30) {
-    const s = this.toHsl(), o = 360 / e, i = [this];
-    for (s.h = (s.h - (o * t >> 1) + 720) % 360; --t; )
-      s.h = (s.h + o) % 360, i.push(new h(s));
-    return i;
-  }
-  /**
-   * taken from https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js
-   */
-  complement() {
-    const t = this.toHsl();
-    return t.h = (t.h + 180) % 360, new h(t);
-  }
-  monochromatic(t = 6) {
-    const e = this.toHsv(), { h: s } = e, { s: o } = e;
-    let { v: i } = e;
-    const n = [], a = 1 / t;
-    for (; t--; )
-      n.push(new h({ h: s, s: o, v: i })), i = (i + a) % 1;
-    return n;
-  }
-  splitcomplement() {
-    const t = this.toHsl(), { h: e } = t;
-    return [
-      this,
-      new h({ h: (e + 72) % 360, s: t.s, l: t.l }),
-      new h({ h: (e + 216) % 360, s: t.s, l: t.l })
-    ];
-  }
-  /**
-   * Compute how the color would appear on a background
-   */
-  onBackground(t) {
-    const e = this.toRgb(), s = new h(t).toRgb(), o = e.a + s.a * (1 - e.a);
-    return new h({
-      r: (e.r * e.a + s.r * s.a * (1 - e.a)) / o,
-      g: (e.g * e.a + s.g * s.a * (1 - e.a)) / o,
-      b: (e.b * e.a + s.b * s.a * (1 - e.a)) / o,
-      a: o
-    });
-  }
-  /**
-   * 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(t) {
-    const e = this.toHsl(), { h: s } = e, o = [this], i = 360 / t;
-    for (let n = 1; n < t; n++)
-      o.push(new h({ h: (s + n * i) % 360, s: e.s, l: e.l }));
-    return o;
-  }
-  /**
-   * compare color vs current color
-   */
-  equals(t) {
-    const e = new h(t);
-    return this.format === "cmyk" || e.format === "cmyk" ? this.toCmykString() === e.toCmykString() : this.toRgbString() === e.toRgbString();
-  }
-}
-const N = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, B = /(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/, D = /(^hs[v|l]a?\()\d{1,3}/, H = (r, t) => t ? r.toHexString() : r.toHex();
-class at {
-  constructor(t, {
-    applyColorToState: e,
-    extractColorFromState: s,
-    maintains: o
-  }) {
-    this.maintains = "hue", this._hue = 0, this._opacity = 1, this.getColorProcesses = {
-      rgb: (i, n) => n ? i.toRgbString() : i.toRgb(),
-      prgb: (i, n) => n ? i.toPercentageRgbString() : i.toPercentageRgb(),
-      hex8: (i, n) => n ? i.toHex8String() : i.toHex8(),
-      name: (i) => i.toName() || i.toRgbString(),
-      hsl: (i, n) => {
-        if (this.maintains === "hue") {
-          if (n)
-            return i.toHslString().replace(D, `$1${this.hue}`);
-          const { s: u, l: y, a: $ } = i.toHsl();
-          return { h: this.hue, s: u, l: y, a: $ };
-        }
-        if (n)
-          return i.toHslString().replace(
-            B,
-            `$1${this.hue}$2${this.saturation}`
-          );
-        const { s: a, l, a: m } = i.toHsl();
-        return { h: this.hue, s: a, l, a: m };
-      },
-      hsv: (i, n) => {
-        if (this.maintains === "hue") {
-          if (n)
-            return i.toHsvString().replace(D, `$1${this.hue}`);
-          const { s: u, v: y, a: $ } = i.toHsv();
-          return { h: this.hue, s: u, v: y, a: $ };
-        }
-        if (n)
-          return i.toHsvString().replace(
-            B,
-            `$1${this.hue}$2${this.saturation}`
-          );
-        const { s: a, v: l, a: m } = i.toHsv();
-        return { h: this.hue, s: a, v: l, a: m };
-      },
-      hex: H,
-      hex3: H,
-      hex4: H,
-      hex6: H
-    }, this._color = new h({ h: 0, s: 1, v: 1 }), this._previousColor = new h({ h: 0, s: 1, v: 1 }), this._format = {
-      format: "",
-      isString: !1
-    }, this.host = t, this.applyColorToState = e, this.extractColorFromState = s, this.maintains = o || this.maintains;
-  }
-  setColorProcess(t, e, s, o) {
-    this.maintains === "hue" ? this.setColorMaintainHue(t, e, s, o) : this.maintains === "saturation" && this.setColorMaintainSaturation(
-      t,
-      e,
-      s,
-      o
-    );
-  }
-  setColorMaintainHue(t, e, s, o) {
-    const { h: i, s: n, v: a, a: l } = this._color.toHsv();
-    let m;
-    if (o && s.startsWith("hs")) {
-      const u = N.exec(e);
-      if (u !== null) {
-        const [, y] = u;
-        m = Number(y);
-      }
-    } else if (!o && s.startsWith("hs")) {
-      const u = t.originalInput;
-      m = Object.values(u)[0];
-    }
-    this.hue = m || i, this.opacity = l ?? 1, this.applyColorToState({ h: i, s: n, v: a, a: l });
-  }
-  setColorMaintainSaturation(t, e, s, o) {
-    const { a: i } = this._color.toHsv();
-    if (o && s.startsWith("hs")) {
-      const n = N.exec(e);
-      if (n !== null) {
-        const [, a, l] = n;
-        this.hue = Number(a), this.saturation = Number(l);
-      }
-    } else if (!o && s.startsWith("hs")) {
-      const n = t.originalInput, a = Object.values(n);
-      this.hue = a[0], this.saturation = a[1];
-    } else {
-      const { h: n } = t.toHsv();
-      this.hue = n;
-    }
-    this.opacity = i ?? 1, this.applyColorToState(t.toHsv());
-  }
-  applyColorFromState() {
-    this._color = new h(this.extractColorFromState(this));
-  }
-  get hue() {
-    return this._hue;
-  }
-  set hue(t) {
-    const e = Math.min(360, Math.max(0, t));
-    if (e === this.hue)
-      return;
-    const s = this.hue, { s: o, v: i, a: n } = this._color.toHsv();
-    this._color = new h({ h: e, s: o, v: i, a: n }), this._hue = e, this.host.requestUpdate("hue", s);
-  }
-  get opacity() {
-    return this._opacity;
-  }
-  set opacity(t) {
-    const e = Math.min(1, Math.max(0, t));
-    if (e === this.opacity)
-      return;
-    const s = this.opacity, { h: o, s: i, v: n } = this._color.toHsv();
-    this._color = new h({ h: o, s: i, v: n, a: e }), this._opacity = e, this.host.requestUpdate("opacity", s);
-  }
-  /* c8 ignore next 3 */
-  get value() {
-    return this.color;
-  }
-  get color() {
-    return this.getColorProcesses[this._format.format || "hex"](
-      this._color,
-      this._format.isString
-    );
-  }
-  set color(t) {
-    if (t === this.color)
-      return;
-    const e = this._color;
-    this._color = new h(t);
-    const s = this._color.format;
-    let o = typeof t == "string" || t instanceof String;
-    s.startsWith("hex") && (o = t.startsWith("#")), this._format = {
-      format: s,
-      isString: o
-    }, this.setColorProcess(this._color, t, s, o), this.host.requestUpdate("color", e);
-  }
-  getColor(t) {
-    const e = {
-      hsl: "toHsl"
-    };
-    return this._color[e[t]]();
-  }
-  setColor(t) {
-    this._color = t;
-    const e = typeof this._color.originalInput == "string" || this._color.originalInput instanceof String;
-    this.setColorProcess(this._color, t, this._color.format, e);
-  }
-  getHslString() {
-    return this._color.toHslString();
-  }
-  savePreviousColor() {
-    this._previousColor = this._color.clone();
-  }
-  restorePreviousColor() {
-    this.setColor(this._previousColor);
-  }
-}
-const ht = '.opacity-checkerboard{position:absolute;block-size:100%;inline-size:100%;background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light, rgb(255, 255, 255)) 0 25%,var(--luzmo-color-loupe-checkerboard-dark, rgb(230, 230, 230)) 0 50%) var(--luzmo-color-loupe-checkerboard-position, left top)/calc(var(--luzmo-color-loupe-checkerboard-size, 8px) * 2) calc(var(--luzmo-color-loupe-checkerboard-size, 8px) * 2)}:host{--luzmo-color-slider-gradient-fallback: rgb(255 0 0) 0%, rgb(255 255 0) 17%, rgb(0 255 0) 33%, rgb(0 255 255) 50%, rgb(0 0 255) 67%, rgb(255 0 255) 83%, rgb(255 0 0) 100%;touch-action:none}:host([vertical]) .handle{inset-block-start:unset;inset-block-end:0}:host([vertical]) .slider{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical}:host(:focus){outline:none}.gradient{overflow:hidden}::slotted(*){width:100%;height:100%}@media (forced-colors: active){:host{--highcontrast-color-slider-border-color: CanvasText;--highcontrast-color-slider-border-color-disabled: GrayText;--highcontrast-color-slider-background-color-disabled: Canvas;forced-color-adjust:none}}:host{--luzmo-color-handle-hitarea-border-radius: var( --luzmo-color-slider-handle-hitarea-border-radius, 0px );min-inline-size:var(--luzmo-color-slider-minimum-length, 80px);inline-size:var(--luzmo-color-slider-length, 192px);block-size:var(--luzmo-color-slider-control-track-width, 24px);-webkit-user-select:none;user-select:none;cursor:default;display:block;position:relative}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([disabled]) .gradient{display:none}:host([vertical]){min-block-size:var(--luzmo-color-slider-vertical-minimum-height, var(--luzmo-color-slider-minimum-length, 80px));block-size:var(--luzmo-color-slider-vertical-height, var(--luzmo-color-slider-length, 192px));min-inline-size:0;inline-size:var(--luzmo-color-slider-vertical-control-track-width, var(--luzmo-color-slider-control-track-height, 24px));display:inline-block}:host([vertical]) .handle{inset-inline-start:50%}.handle{inset-block-start:50%;inset-inline-start:0}.checkerboard{--luzmo-color-slider-border-color-local: var( --highcontrast-color-slider-border-color, var(--luzmo-color-slider-border-color, var(--luzmo-border-color)) )}.checkerboard:before{content:"";z-index:1;box-shadow:inset 0 0 0 var(--luzmo-color-slider-border-width, var(--luzmo-border-width)) var(--luzmo-color-slider-border-color-local);border-radius:var(--luzmo-color-slider-border-rounding, var(--luzmo-border-radius-s));position:absolute;top:0;right:0;bottom:0;left:0}:host([disabled]) .checkerboard{--luzmo-color-slider-border-color-local: var( --highcontrast-color-slider-border-color-disabled, var(--luzmo-color-slider-border-color-disabled, var(--luzmo-dimmed-color)) );background:var(--highcontrast-color-slider-background-color-disabled, var(--luzmo-color-slider-background-color-disabled, var(--luzmo-dimmed-color)))}.checkerboard,.gradient{inline-size:100%;block-size:100%;border-radius:var(--luzmo-color-slider-border-rounding, var(--luzmo-border-radius-s))}.gradient:dir(rtl),:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider{opacity:0;inline-size:100%;block-size:100%;z-index:0;pointer-events:none;margin:0;position:absolute;inset-block-start:0;inset-inline-start:0}';
-var lt = Object.defineProperty, ct = Object.getOwnPropertyDescriptor, b = (r, t, e, s) => {
-  for (var o = s > 1 ? void 0 : s ? ct(t, e) : t, i = r.length - 1, n; i >= 0; i--)
-    (n = r[i]) && (o = (s ? n(t, e, o) : n(o)) || o);
-  return s && o && lt(t, e, o), o;
-};
-class d extends U {
-  constructor() {
-    super(...arguments), this.disabled = !1, this.focused = !1, this.label = "hue", this.vertical = !1, this.languageResolver = new V(this), this.colorController = new at(this, {
-      /* c8 ignore next 3 */
-      applyColorToState: () => {
-        if (this.mode === "opacity") {
-          const t = new h(this.colorController.color);
-          this.sliderHandlePosition = 100 * t.getAlpha();
-        } else
-          this.sliderHandlePosition = 100 * (this.colorController.hue / 360);
-      },
-      extractColorFromState: (t) => this.mode === "opacity" ? {
-        ...t.getColor("hsl"),
-        a: this.value
-      } : {
-        ...t.getColor("hsl"),
-        h: this.value
-      },
-      maintains: "saturation"
-    }), this.sliderHandlePosition = 0, this.step = 1, this.isLTR = !0, this._altered = 0, this._pointerDown = !1;
-  }
-  static get styles() {
-    return [W(ht)];
-  }
-  get value() {
-    return this.mode === "opacity" ? this.colorController.opacity : this.colorController.hue;
-  }
-  set value(t) {
-    this.mode === "opacity" ? this.colorController.opacity = t : this.colorController.hue = t;
-  }
-  get color() {
-    return this.colorController.color;
-  }
-  set color(t) {
-    this.colorController.color = t;
-  }
-  get altered() {
-    return this._altered;
-  }
-  set altered(t) {
-    this._altered = t, this.step = Math.max(1, this.altered * 10);
-  }
-  get focusElement() {
-    return this.input;
-  }
-  handleKeydown(t) {
-    const { key: e } = t;
-    this.focused = !0, this.altered = [t.shiftKey, t.ctrlKey, t.altKey].filter(
-      (n) => !!n
-    ).length;
-    let s = 0;
-    switch (e) {
-      case "ArrowUp": {
-        s = this.step;
-        break;
-      }
-      case "ArrowDown": {
-        s = -this.step;
-        break;
-      }
-      case "ArrowLeft": {
-        s = this.step * (this.isLTR ? -1 : 1);
-        break;
-      }
-      case "ArrowRight": {
-        s = this.step * (this.isLTR ? 1 : -1);
-        break;
-      }
-      default:
-        return;
-    }
-    t.preventDefault();
-    const i = 100 / (this.mode === "opacity" ? 100 : 360);
-    this.sliderHandlePosition = Math.min(
-      100,
-      Math.max(0, this.sliderHandlePosition + s * i)
-    ), this.value = this.mode === "opacity" ? Math.min(1, Math.max(0, this.value + s / 100)) : Math.min(360, Math.max(0, this.value + s)), this.colorController.applyColorFromState(), s !== 0 && (this.dispatchEvent(
-      new Event("input", {
-        bubbles: !0,
-        composed: !0
-      })
-    ), this.dispatchEvent(
-      new Event("change", {
-        bubbles: !0,
-        composed: !0
-      })
-    ));
-  }
-  handleInput(t) {
-    const { valueAsNumber: e } = t.target;
-    this.value = e, this.sliderHandlePosition = 100 * (this.mode === "opacity" ? this.value : this.value / 360), this.colorController.applyColorFromState();
-  }
-  handleChange(t) {
-    this.handleInput(t), this.dispatchEvent(
-      new Event("change", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  focus(t = {}) {
-    super.focus(t), this.forwardFocus();
-  }
-  forwardFocus() {
-    this.input.focus();
-  }
-  handleFocus() {
-    this.focused = !0;
-  }
-  handleBlur() {
-    this._pointerDown || (this.altered = 0, this.focused = !1);
-  }
-  handlePointerdown(t) {
-    if (t.button !== 0) {
-      t.preventDefault();
-      return;
-    }
-    this._pointerDown = !0, this.colorController.savePreviousColor(), this.boundingClientRect = this.getBoundingClientRect(), t.target.setPointerCapture(t.pointerId), t.pointerType === "mouse" && (this.focused = !0);
-  }
-  handlePointermove(t) {
-    this.sliderHandlePosition = this.calculateHandlePosition(t), this.value = (this.mode === "opacity" ? 1 : 360) * (this.sliderHandlePosition / 100), this.colorController.applyColorFromState(), this.dispatchEvent(
-      new Event("input", {
-        bubbles: !0,
-        composed: !0,
-        cancelable: !0
-      })
-    );
-  }
-  handlePointerup(t) {
-    this._pointerDown = !1, t.target.releasePointerCapture(t.pointerId), this.dispatchEvent(
-      new Event("change", {
-        bubbles: !0,
-        composed: !0,
-        cancelable: !0
-      })
-    ) || this.colorController.restorePreviousColor(), this.focus(), t.pointerType === "mouse" && (this.focused = !1);
-  }
-  /**
-   * Returns the value under the cursor
-   * @param: PointerEvent on slider
-   * @return: Slider value that correlates to the position under the pointer
-   */
-  calculateHandlePosition(t) {
-    if (!this.boundingClientRect)
-      return this.sliderHandlePosition;
-    const e = this.boundingClientRect, s = this.vertical ? e.top : e.left, o = this.vertical ? t.clientY : t.clientX, i = this.vertical ? e.height : e.width, n = Math.max(0, Math.min(1, (o - s) / i));
-    return this.vertical || !this.isLTR ? 100 - 100 * n : 100 * n;
-  }
-  handleGradientPointerdown(t) {
-    t.button === 0 && (t.stopPropagation(), t.preventDefault(), this.handle.dispatchEvent(new PointerEvent("pointerdown", t)), this.handlePointermove(t));
-  }
-  get handlePositionStyles() {
-    return `${this.vertical ? "inset-block-end" : "inset-inline-start"}: ${this.sliderHandlePosition}%`;
-  }
-  get getColorSliderStyle() {
-    const t = this.vertical ? "top" : "right";
-    if (this.mode === "opacity") {
-      const e = new h(this.colorController.color).setAlpha(1).toRgbString();
-      return {
-        background: `linear-gradient(to ${t}, transparent, ${e})`
-      };
-    }
-    return {
-      background: `linear-gradient(to ${t}, var(--luzmo-color-slider-gradient, var(--luzmo-color-slider-gradient-fallback)))`
-    };
-  }
-  render() {
-    return j`
-      <div
-        class="opacity-checkerboard checkerboard"
-        role="presentation"
-        @pointerdown=${this.handleGradientPointerdown}
-      >
-        <div
-          class="gradient"
-          role="presentation"
-          style=${q(this.getColorSliderStyle)}
-        >
-          <slot name="gradient"></slot>
-        </div>
-      </div>
-      <luzmo-color-handle
-        tabindex=${C(this.focused ? void 0 : "0")}
-        @focus=${this.forwardFocus}
-        ?focused=${this.focused}
-        class="handle"
-        color=${this.mode === "opacity" ? this.color : "hsl(" + this.value + ", 100%, 50%)"}
-        ?disabled=${this.disabled}
-        style=${this.handlePositionStyles}
-        ${G({
-      start: ["pointerdown", this.handlePointerdown],
-      streamInside: ["pointermove", this.handlePointermove],
-      end: [
-        ["pointerup", "pointercancel", "pointerleave"],
-        this.handlePointerup
-      ]
-    })}
-      ></luzmo-color-handle>
-      <input
-        type="range"
-        class="slider"
-        min="0"
-        max=${this.mode === "opacity" ? "100" : "360"}
-        aria-orientation=${C(this.vertical ? "vertical" : void 0)}
-        orient=${C(this.vertical ? "vertical" : void 0)}
-        step=${this.step}
-        aria-label=${this.label}
-        .value=${String(
-      this.mode === "opacity" ? this.value * 100 : this.value
-    )}
-        aria-valuetext=${`${new Intl.NumberFormat(
-      this.languageResolver.language,
-      {
-        maximumFractionDigits: 0,
-        minimumIntegerDigits: 1,
-        style: "unit",
-        unit: this.mode === "opacity" ? "percent" : "degree",
-        unitDisplay: "narrow"
-      }
-    ).format(this.mode === "opacity" ? this.value * 100 : this.value)}`}
-        @input=${this.handleInput}
-        @change=${this.handleChange}
-        @keydown=${this.handleKeydown}
-      />
-    `;
-  }
-  firstUpdated(t) {
-    super.firstUpdated(t), this.boundingClientRect = this.getBoundingClientRect(), this.addEventListener("focus", this.handleFocus), this.addEventListener("blur", this.handleBlur);
-  }
-  updated(t) {
-    t.has("mode") && (this.handle.style.insetInlineStart = "", this.handle.style.insetBlockEnd = "", this.mode === "opacity" && (this.colorController.color = new h(
-      this.colorController.color
-    ).toRgbString(), this.handle.style.insetInlineStart = 100 * this.colorController.opacity + "%"));
-  }
-}
-b([
-  v({ type: String, reflect: !0 })
-], d.prototype, "dir", 2);
-b([
-  v({ type: String, reflect: !0 })
-], d.prototype, "mode", 2);
-b([
-  v({ type: Boolean, reflect: !0 })
-], d.prototype, "disabled", 2);
-b([
-  v({ type: Boolean, reflect: !0 })
-], d.prototype, "focused", 2);
-b([
-  T(".handle")
-], d.prototype, "handle", 2);
-b([
-  v({ type: String })
-], d.prototype, "label", 2);
-b([
-  v({ type: Boolean, reflect: !0 })
-], d.prototype, "vertical", 2);
-b([
-  v({ type: Number })
-], d.prototype, "value", 1);
-b([
-  v({ type: Number, reflect: !0 })
-], d.prototype, "sliderHandlePosition", 2);
-b([
-  v({ type: String })
-], d.prototype, "color", 1);
-b([
-  v({ type: Number })
-], d.prototype, "step", 2);
-b([
-  v({ type: Boolean, attribute: "is-ltr" })
-], d.prototype, "isLTR", 2);
-b([
-  T("input")
-], d.prototype, "input", 2);
-customElements.get("luzmo-color-slider") || customElements.define("luzmo-color-slider", d);
-export {
-  d as L,
-  h as T
-};