@luzmo/lucero 1.0.1-alpha.20 → 1.0.1-alpha.22

package/components/color-controller-7sNUf7SP.js

@@ -0,0 +1,386 @@
+/*! * 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 f from "colorjs.io";
+class N {
+  /**
+   * Creates an instance of ColorController.
+   *
+   * @param host - The ReactiveElement that this controller is associated with.
+   * @param options - An object containing optional parameters.
+   * @param options.manageAs - A string to manage the controller as a specific type.
+   */
+  constructor(t, {
+    manageAs: s
+  } = {}) {
+    this._color = new f("hsv", [0, 100, 100], 1), this.host = t, this.manageAs = s;
+  }
+  get color() {
+    return this._color;
+  }
+  /**
+   * Validates a color string and returns a result indicating the color space,
+   * coordinates, alpha value, and whether the color is valid.
+   *
+   * @param color - The color string to validate. Supported formats include:
+   *  - RGB: `rgb(r, g, b)`, `rgba(r, g, b, a)`, `rgb r g b`, `rgba r g b a`
+   *  - HSL: `hsl(h, s, l)`, `hsla(h, s, l, a)`, `hsl h s l`, `hsla h s l a`
+   *  - HSV: `hsv(h, s, v)`, `hsva(h, s, v, a)`, `hsv h s v`, `hsva h s v a`
+   *  - HEX: `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`
+   *
+   * @returns An object containing the following properties:
+   *  - `spaceId`: The color space identifier (`'srgb'`, `'hsl'`, or `'hsv'`).
+   *  - `coords`: An array of numeric values representing the color coordinates.
+   *  - `alpha`: The alpha value of the color (0 to 1).
+   *  - `isValid`: A boolean indicating whether the color string is valid.
+   */
+  validateColorString(t) {
+    var M, O, A, x;
+    const s = {
+      spaceId: null,
+      coords: [0, 0, 0],
+      isValid: !1,
+      alpha: 1
+    }, r = [
+      // With commas
+      /rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d*\.?\d+)\s*\)/i,
+      // rgba(r, g, b, a)
+      /rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/i,
+      // rgb(r, g, b)
+      // With spaces
+      /^rgba\s+(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s+(0|0?\.\d+|1)\s*$/i,
+      // rgba r g b a
+      /^rgb\s+(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s*$/i,
+      // rgb r g b
+      // Spaces inside parentheses
+      /^rgba\(\s*(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s+(\d*\.?\d+)\s*\)$/i,
+      // rgba(r g b a)
+      /^rgb\(\s*(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s*\)$/i,
+      // rgb(r g b)
+      // Percentage values
+      /rgb\(\s*(100|[0-9]{1,2}%)\s*,\s*(100|[0-9]{1,2}%)\s*,\s*(100|[0-9]{1,2}%)\s*\)/i,
+      // rgb(r%, g%, b%)
+      /rgba\(\s*(100|[0-9]{1,2})%\s*,\s*(100|[0-9]{1,2})%\s*,\s*(100|[0-9]{1,2})%\s*,\s*(\d*\.?\d+)\s*\)/i
+      // rgba(r%, g%, b%, a)
+    ], o = [
+      // With commas
+      /hsla\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d*\.?\d+)\s*\)/i,
+      // hsla(h, s, l, a)
+      /hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*\)/i,
+      // hsl(h, s, l)
+      // With spaces
+      /^hsla\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*$/i,
+      // hsla h s l a
+      /^hsl\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*$/i,
+      // hsl h s l
+      // Spaces inside parentheses
+      /^hsla\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*\)$/i,
+      // hsla(h s l a)
+      /^hsl\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*\)$/i
+      // hsl(h s l)
+    ], i = [
+      // With commas
+      /hsva\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d*\.?\d+)\s*\)/i,
+      // hsva(h, s, v, a)
+      /hsv\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*\)/i,
+      // hsv(h, s, v)
+      // With spaces
+      /^hsva\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*$/i,
+      // hsva h s v a
+      /^hsv\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*$/i,
+      // hsv h s v
+      // Spaces inside parentheses
+      /^hsva\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*\)$/i,
+      // hsva(h s v a)
+      /^hsv\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*\)$/i
+      // hsv(h s v)
+    ], a = [
+      /^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2})?$/,
+      // 6-digit hex with optional hex alpha
+      /^#([A-Fa-f0-9]{3})([A-Fa-f0-9]{1})?$/
+      // 3-digit hex with optional hex alpha
+    ], u = (M = r.find((e) => e.test(t))) == null ? void 0 : M.exec(t), p = (O = o.find((e) => e.test(t))) == null ? void 0 : O.exec(t), b = (A = i.find((e) => e.test(t))) == null ? void 0 : A.exec(t), _ = (x = a.find((e) => e.test(t))) == null ? void 0 : x.exec(t);
+    if (u) {
+      const [, e, m, d, c] = u.filter(
+        ($) => typeof $ == "string"
+      ), g = c === void 0 ? 1 : Number(c), h = ($) => $.includes("%") ? Number($.replace("%", "")) / 100 : Number($) / 255, l = h(e), n = h(m), v = h(d);
+      s.spaceId = "srgb", s.coords = [l, n, v], s.alpha = g, s.isValid = l >= 0 && l <= 1 && n >= 0 && n <= 1 && v >= 0 && v <= 1 && g >= 0 && g <= 1;
+    } else if (p) {
+      const [, e, m, d, c] = p, g = [e, m, d, c === void 0 ? "1" : c].map(
+        ($) => Number($.replaceAll(/[^\d.]/g, ""))
+      ), [h, l, n, v] = g;
+      s.spaceId = "hsl", s.coords = [h, l, n], s.alpha = v, s.isValid = h >= 0 && h <= 360 && l >= 0 && l <= 100 && n >= 0 && n <= 100 && v >= 0 && v <= 1;
+    } else if (b) {
+      const [, e, m, d, c] = b, g = [e, m, d, c === void 0 ? "1" : c].map(
+        ($) => Number($.replaceAll(/[^\d.]/g, ""))
+      ), [h, l, n, v] = g;
+      s.spaceId = "hsv", s.coords = [h, l, n], s.alpha = v, s.isValid = h >= 0 && h <= 360 && l >= 0 && l <= 100 && n >= 0 && n <= 100 && v >= 0 && v <= 1;
+    } else if (_) {
+      const [, e, m] = _, d = (n) => (n.length === 1 && (n = n + n), Number.parseInt(n, 16) / 255);
+      let c, g, h;
+      e.length === 3 ? (c = d(e.slice(0, 1)), g = d(e.slice(1, 2)), h = d(e.slice(2, 3))) : (c = d(e.slice(0, 2)), g = d(e.slice(2, 4)), h = d(e.slice(4, 6)));
+      const l = m ? d(m) : 1;
+      s.spaceId = "srgb", s.coords = [c, g, h], s.alpha = l, s.isValid = c >= 0 && c <= 1 && g >= 0 && g <= 1 && h >= 0 && h <= 1 && l >= 0 && l <= 1;
+    }
+    return s;
+  }
+  /**
+   * Gets the original color value provided by the user.
+   *
+   * @returns The original color value.
+   */
+  get colorOrigin() {
+    return this._colorOrigin;
+  }
+  /**
+   * Sets the original color value provided by the user.
+   *
+   * @param colorOrigin - The original color value to set.
+   */
+  set colorOrigin(t) {
+    this._colorOrigin = t;
+  }
+  /**
+   * Sets the color value for the controller. The color can be provided in various formats:
+   * - A string representing a color name, hex code, or other color format.
+   * - An instance of the `Color` class.
+   * - An object containing color properties such as `h`, `s`, `l`, `v`, `r`, `g`, `b`, and optionally `a`.
+   *
+   * The method validates and parses the input color, converting it to a `Color` instance.
+   * If the color is invalid, it attempts to parse it as a hex code or returns without setting a new color.
+   *
+   * @param color - The color value to set. It can be a string, an instance of `Color`, or an object with color properties.
+   */
+  set color(t) {
+    this._colorOrigin = t;
+    let s;
+    if (typeof t == "string") {
+      const r = this.validateColorString(t);
+      if (r.isValid) {
+        const [o, i, a] = r.coords;
+        s = new f(
+          `${r.spaceId}`,
+          [o, i, a],
+          r.alpha
+        );
+      } else
+        try {
+          f.parse(t);
+        } catch {
+          try {
+            s = new f(`#${t}`);
+          } catch {
+            return;
+          }
+        }
+    } else if (t instanceof f)
+      s = t;
+    else if (!Array.isArray(t)) {
+      const { h: r, s: o, l: i, v: a, r: u, g: p, b, a: _ } = t;
+      if (r !== void 0 && o !== void 0) {
+        const M = i ?? a;
+        s = new f(
+          i === void 0 ? "hsv" : "hsl",
+          [
+            Number.parseFloat(r),
+            typeof o == "string" ? Number.parseFloat(o) : o * 100,
+            typeof M == "string" ? Number.parseFloat(M) : M * 100
+          ],
+          Number.parseFloat(_ || "1")
+        );
+      } else u !== void 0 && p !== void 0 && b !== void 0 && (s = new f(
+        "srgb",
+        [
+          Number.parseFloat(u) / 255,
+          Number.parseFloat(p) / 255,
+          Number.parseFloat(b) / 255
+        ],
+        Number.parseFloat(_ || "1")
+      ));
+    }
+    s || (s = new f(t)), this._color = this.manageAs ? s.to(this.manageAs) : s, this.host.requestUpdate();
+  }
+  /**
+   * Gets the color value in various formats based on the original color input.
+   *
+   * The method determines the color space of the original color input and converts
+   * the color to the appropriate format. The supported color spaces are:
+   * - HSV (Hue, Saturation, Value)
+   * - HSL (Hue, Saturation, Lightness)
+   * - Hexadecimal (with or without alpha)
+   * - RGB (Red, Green, Blue) with optional alpha
+   *
+   * @returns The color value in the appropriate format.
+   *
+   * The method handles the following cases:
+   * - If the original color input is a string, it checks the prefix to determine the color space.
+   * - If the original color input is an object, it checks the properties to determine the color space.
+   * - If the original color input is not provided, it defaults to the current color space of the color object.
+   *
+   * The returned color value can be in one of the following formats:
+   * - `hsv(h, s%, v%)` or `hsva(h, s%, v%, a)`
+   * - `hsl(h, s%, l%)` or `hsla(h, s%, l%, a)`
+   * - `#rrggbb` or `#rrggbbaa`
+   * - `rgb(r, g, b)` or `rgba(r, g, b, a)`
+   * - `{ h, s, v, a }` for HSV object
+   * - `{ h, s, l, a }` for HSL object
+   * - `{ r, g, b, a }` for RGB object
+   */
+  get colorValue() {
+    let t;
+    if (typeof this._colorOrigin == "string")
+      switch (this._colorOrigin.startsWith("#") ? t = "hex string" : this._colorOrigin.startsWith("rgb") ? t = "rgb" : this._colorOrigin.startsWith("hsl") ? t = "hsl" : this._colorOrigin.startsWith("hsv") ? t = "hsv" : t = "hex", t) {
+        case "hsv": {
+          const s = this._colorOrigin[3] === "a", { h: r, s: o, v: i } = this._color.to("hsv").hsv, a = this._color.alpha;
+          return `hsv${s ? "a" : ""}(${Math.round(
+            r
+          )}, ${Math.round(o)}%, ${Math.round(i)}%${s ? `, ${a}` : ""})`;
+        }
+        case "hsl": {
+          const s = this._colorOrigin[3] === "a", { h: r, s: o, l: i } = this._color.to("hsl").hsl, a = this._color.alpha;
+          return `hsl${s ? "a" : ""}(${Math.round(
+            r
+          )}, ${Math.round(o)}%, ${Math.round(i)}%${s ? `, ${a}` : ""})`;
+        }
+        case "hex string": {
+          const { r: s, g: r, b: o } = this._color.to("srgb").srgb, i = this._colorOrigin.length === 5 || this._colorOrigin.length === 9, a = this._color.alpha, u = Math.round(s * 255).toString(16), p = Math.round(r * 255).toString(16), b = Math.round(o * 255).toString(16), _ = Math.round(a * 255).toString(16);
+          return `#${u.padStart(2, "0")}${p.padStart(
+            2,
+            "0"
+          )}${b.padStart(2, "0")}${i ? _.padStart(2, "0") : ""}`;
+        }
+        case "hex": {
+          const { r: s, g: r, b: o } = this._color.to("srgb").srgb, i = this._colorOrigin.length === 4 || this._colorOrigin.length === 8, a = this._color.alpha, u = Math.round(s * 255).toString(16), p = Math.round(r * 255).toString(16), b = Math.round(o * 255).toString(16), _ = Math.round(a * 255).toString(16);
+          return `${u.padStart(2, "0")}${p.padStart(
+            2,
+            "0"
+          )}${b.padStart(2, "0")}${i ? _.padStart(2, "0") : ""}`;
+        }
+        // rgb
+        default: {
+          const { r: s, g: r, b: o } = this._color.to("srgb").srgb, i = this._colorOrigin[3] === "a", a = this._color.alpha;
+          return this._colorOrigin.search("%") > -1 ? `rgb${i ? "a" : ""}(${Math.round(s * 100)}%, ${Math.round(
+            r * 100
+          )}%, ${Math.round(o * 100)}%${i ? `,${Math.round(a * 100)}%` : ""})` : `rgb${i ? "a" : ""}(${Math.round(s * 255)}, ${Math.round(
+            r * 255
+          )}, ${Math.round(o * 255)}${i ? `, ${a}` : ""})`;
+        }
+      }
+    if (this._colorOrigin)
+      try {
+        ({ spaceId: t } = new f(this._colorOrigin));
+      } catch {
+        const { h: s, s: r, l: o, v: i, r: a, g: u, b: p } = this._colorOrigin;
+        s !== void 0 && r !== void 0 && o !== void 0 ? t = "hsl" : s !== void 0 && r !== void 0 && i !== void 0 ? t = "hsv" : a !== void 0 && u !== void 0 && p !== void 0 && (t = "srgb");
+      }
+    else
+      ({ spaceId: t } = this.color);
+    switch (t) {
+      case "hsv": {
+        const { h: s, s: r, v: o } = this._color.to("hsv").hsv;
+        return {
+          h: s,
+          s: r / 100,
+          v: o / 100,
+          a: this._color.alpha
+        };
+      }
+      case "hsl": {
+        const { h: s, s: r, l: o } = this._color.to("hsl").hsl;
+        return {
+          h: s,
+          s: r / 100,
+          l: o / 100,
+          a: this._color.alpha
+        };
+      }
+      case "srgb": {
+        const { r: s, g: r, b: o } = this._color.to("srgb").srgb;
+        return this._colorOrigin && typeof this._colorOrigin.r == "string" && this._colorOrigin.r.search("%") ? {
+          r: `${Math.round(s * 255)}%`,
+          g: `${Math.round(r * 255)}%`,
+          b: `${Math.round(o * 255)}%`,
+          a: this._color.alpha
+        } : {
+          r: Math.round(s * 255),
+          g: Math.round(r * 255),
+          b: Math.round(o * 255),
+          a: this._color.alpha
+        };
+      }
+    }
+    return this._color;
+  }
+  /**
+   * Gets the hue value of the current color in HSL format.
+   *
+   * @returns The hue value as a number.
+   */
+  get hue() {
+    return Number(this._color.to("hsl").hsl.h);
+  }
+  /**
+   * Sets the hue value of the color and requests an update from the host.
+   *
+   * @param hue - The hue value to set, represented as a number.
+   */
+  set hue(t) {
+    this._color.set("h", t), this.host.requestUpdate();
+  }
+  /**
+   * Converts the current color to the specified format.
+   *
+   * @param format - The desired color format. It can be a string representing one of the valid formats
+   * ('srgb', 'hsva', 'hsv', 'hsl', 'hsla') or a ColorSpace object.
+   * @returns The color object in the specified format.
+   * @throws Will throw an error if the provided format is not a valid string format.
+   */
+  getColor(t) {
+    if (typeof t == "string" && !["srgb", "hsva", "hsv", "hsl", "hsla"].includes(t))
+      throw new Error("not a valid format");
+    return this._color.to(t);
+  }
+  /**
+   * Converts the current color to an HSL string representation.
+   *
+   * @returns The HSL string representation of the current color.
+   */
+  getHslString() {
+    return this._color.to("hsl").toString();
+  }
+  /**
+   * Saves the current color state by cloning the current color and storing it
+   * as the previous color. This allows for the ability to revert to the previous
+   * color state if needed.
+   *
+   * @returns
+   */
+  savePreviousColor() {
+    this._previousColor = this._color.clone();
+  }
+  /**
+   * Restores the color to the previously saved color value.
+   *
+   * This method sets the current color (`_color`) to the previously stored color (`_previousColor`).
+   */
+  restorePreviousColor() {
+    this._color = this._previousColor;
+  }
+}
+export {
+  N as C
+};

package/components/color-controller-ChN-A9Ft.cjs

@@ -0,0 +1,18 @@
+/*! * 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.
+ * */
+"use strict";const f=require("colorjs.io");class x{constructor(t,{manageAs:s}={}){this._color=new f("hsv",[0,100,100],1),this.host=t,this.manageAs=s}get color(){return this._color}validateColorString(t){var M,O,A,S;const s={spaceId:null,coords:[0,0,0],isValid:!1,alpha:1},r=[/rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d*\.?\d+)\s*\)/i,/rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/i,/^rgba\s+(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s+(0|0?\.\d+|1)\s*$/i,/^rgb\s+(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s*$/i,/^rgba\(\s*(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s+(\d*\.?\d+)\s*\)$/i,/^rgb\(\s*(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})\s*\)$/i,/rgb\(\s*(100|[0-9]{1,2}%)\s*,\s*(100|[0-9]{1,2}%)\s*,\s*(100|[0-9]{1,2}%)\s*\)/i,/rgba\(\s*(100|[0-9]{1,2})%\s*,\s*(100|[0-9]{1,2})%\s*,\s*(100|[0-9]{1,2})%\s*,\s*(\d*\.?\d+)\s*\)/i],o=[/hsla\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d*\.?\d+)\s*\)/i,/hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*\)/i,/^hsla\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*$/i,/^hsl\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*$/i,/^hsla\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*\)$/i,/^hsl\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*\)$/i],i=[/hsva\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d*\.?\d+)\s*\)/i,/hsv\(\s*(\d{1,3})\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*\)/i,/^hsva\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*$/i,/^hsv\s+(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*$/i,/^hsva\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s+(\d*\.?\d+)\s*\)$/i,/^hsv\(\s*(\d{1,3})\s+(\d{1,3}%?)\s+(\d{1,3}%?)\s*\)$/i],a=[/^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2})?$/,/^#([A-Fa-f0-9]{3})([A-Fa-f0-9]{1})?$/],u=(M=r.find(e=>e.test(t)))==null?void 0:M.exec(t),p=(O=o.find(e=>e.test(t)))==null?void 0:O.exec(t),b=(A=i.find(e=>e.test(t)))==null?void 0:A.exec(t),_=(S=a.find(e=>e.test(t)))==null?void 0:S.exec(t);if(u){const[,e,m,d,c]=u.filter($=>typeof $=="string"),g=c===void 0?1:Number(c),h=$=>$.includes("%")?Number($.replace("%",""))/100:Number($)/255,l=h(e),n=h(m),v=h(d);s.spaceId="srgb",s.coords=[l,n,v],s.alpha=g,s.isValid=l>=0&&l<=1&&n>=0&&n<=1&&v>=0&&v<=1&&g>=0&&g<=1}else if(p){const[,e,m,d,c]=p,g=[e,m,d,c===void 0?"1":c].map($=>Number($.replaceAll(/[^\d.]/g,""))),[h,l,n,v]=g;s.spaceId="hsl",s.coords=[h,l,n],s.alpha=v,s.isValid=h>=0&&h<=360&&l>=0&&l<=100&&n>=0&&n<=100&&v>=0&&v<=1}else if(b){const[,e,m,d,c]=b,g=[e,m,d,c===void 0?"1":c].map($=>Number($.replaceAll(/[^\d.]/g,""))),[h,l,n,v]=g;s.spaceId="hsv",s.coords=[h,l,n],s.alpha=v,s.isValid=h>=0&&h<=360&&l>=0&&l<=100&&n>=0&&n<=100&&v>=0&&v<=1}else if(_){const[,e,m]=_,d=n=>(n.length===1&&(n=n+n),Number.parseInt(n,16)/255);let c,g,h;e.length===3?(c=d(e.slice(0,1)),g=d(e.slice(1,2)),h=d(e.slice(2,3))):(c=d(e.slice(0,2)),g=d(e.slice(2,4)),h=d(e.slice(4,6)));const l=m?d(m):1;s.spaceId="srgb",s.coords=[c,g,h],s.alpha=l,s.isValid=c>=0&&c<=1&&g>=0&&g<=1&&h>=0&&h<=1&&l>=0&&l<=1}return s}get colorOrigin(){return this._colorOrigin}set colorOrigin(t){this._colorOrigin=t}set color(t){this._colorOrigin=t;let s;if(typeof t=="string"){const r=this.validateColorString(t);if(r.isValid){const[o,i,a]=r.coords;s=new f(`${r.spaceId}`,[o,i,a],r.alpha)}else try{f.parse(t)}catch{try{s=new f(`#${t}`)}catch{return}}}else if(t instanceof f)s=t;else if(!Array.isArray(t)){const{h:r,s:o,l:i,v:a,r:u,g:p,b,a:_}=t;if(r!==void 0&&o!==void 0){const M=i??a;s=new f(i===void 0?"hsv":"hsl",[Number.parseFloat(r),typeof o=="string"?Number.parseFloat(o):o*100,typeof M=="string"?Number.parseFloat(M):M*100],Number.parseFloat(_||"1"))}else u!==void 0&&p!==void 0&&b!==void 0&&(s=new f("srgb",[Number.parseFloat(u)/255,Number.parseFloat(p)/255,Number.parseFloat(b)/255],Number.parseFloat(_||"1")))}s||(s=new f(t)),this._color=this.manageAs?s.to(this.manageAs):s,this.host.requestUpdate()}get colorValue(){let t;if(typeof this._colorOrigin=="string")switch(this._colorOrigin.startsWith("#")?t="hex string":this._colorOrigin.startsWith("rgb")?t="rgb":this._colorOrigin.startsWith("hsl")?t="hsl":this._colorOrigin.startsWith("hsv")?t="hsv":t="hex",t){case"hsv":{const s=this._colorOrigin[3]==="a",{h:r,s:o,v:i}=this._color.to("hsv").hsv,a=this._color.alpha;return`hsv${s?"a":""}(${Math.round(r)}, ${Math.round(o)}%, ${Math.round(i)}%${s?`, ${a}`:""})`}case"hsl":{const s=this._colorOrigin[3]==="a",{h:r,s:o,l:i}=this._color.to("hsl").hsl,a=this._color.alpha;return`hsl${s?"a":""}(${Math.round(r)}, ${Math.round(o)}%, ${Math.round(i)}%${s?`, ${a}`:""})`}case"hex string":{const{r:s,g:r,b:o}=this._color.to("srgb").srgb,i=this._colorOrigin.length===5||this._colorOrigin.length===9,a=this._color.alpha,u=Math.round(s*255).toString(16),p=Math.round(r*255).toString(16),b=Math.round(o*255).toString(16),_=Math.round(a*255).toString(16);return`#${u.padStart(2,"0")}${p.padStart(2,"0")}${b.padStart(2,"0")}${i?_.padStart(2,"0"):""}`}case"hex":{const{r:s,g:r,b:o}=this._color.to("srgb").srgb,i=this._colorOrigin.length===4||this._colorOrigin.length===8,a=this._color.alpha,u=Math.round(s*255).toString(16),p=Math.round(r*255).toString(16),b=Math.round(o*255).toString(16),_=Math.round(a*255).toString(16);return`${u.padStart(2,"0")}${p.padStart(2,"0")}${b.padStart(2,"0")}${i?_.padStart(2,"0"):""}`}default:{const{r:s,g:r,b:o}=this._color.to("srgb").srgb,i=this._colorOrigin[3]==="a",a=this._color.alpha;return this._colorOrigin.search("%")>-1?`rgb${i?"a":""}(${Math.round(s*100)}%, ${Math.round(r*100)}%, ${Math.round(o*100)}%${i?`,${Math.round(a*100)}%`:""})`:`rgb${i?"a":""}(${Math.round(s*255)}, ${Math.round(r*255)}, ${Math.round(o*255)}${i?`, ${a}`:""})`}}if(this._colorOrigin)try{({spaceId:t}=new f(this._colorOrigin))}catch{const{h:s,s:r,l:o,v:i,r:a,g:u,b:p}=this._colorOrigin;s!==void 0&&r!==void 0&&o!==void 0?t="hsl":s!==void 0&&r!==void 0&&i!==void 0?t="hsv":a!==void 0&&u!==void 0&&p!==void 0&&(t="srgb")}else({spaceId:t}=this.color);switch(t){case"hsv":{const{h:s,s:r,v:o}=this._color.to("hsv").hsv;return{h:s,s:r/100,v:o/100,a:this._color.alpha}}case"hsl":{const{h:s,s:r,l:o}=this._color.to("hsl").hsl;return{h:s,s:r/100,l:o/100,a:this._color.alpha}}case"srgb":{const{r:s,g:r,b:o}=this._color.to("srgb").srgb;return this._colorOrigin&&typeof this._colorOrigin.r=="string"&&this._colorOrigin.r.search("%")?{r:`${Math.round(s*255)}%`,g:`${Math.round(r*255)}%`,b:`${Math.round(o*255)}%`,a:this._color.alpha}:{r:Math.round(s*255),g:Math.round(r*255),b:Math.round(o*255),a:this._color.alpha}}}return this._color}get hue(){return Number(this._color.to("hsl").hsl.h)}set hue(t){this._color.set("h",t),this.host.requestUpdate()}getColor(t){if(typeof t=="string"&&!["srgb","hsva","hsv","hsl","hsla"].includes(t))throw new Error("not a valid format");return this._color.to(t)}getHslString(){return this._color.to("hsl").toString()}savePreviousColor(){this._previousColor=this._color.clone()}restorePreviousColor(){this._color=this._previousColor}}exports.ColorController=x;

package/components/color-field/index.cjs

@@ -15,9 +15,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../base-Cy0MQrPT.cjs"),u=require("../color-controller-CoUL5f9K.cjs"),d=require("../text-field-BkFPYo7S.cjs"),v=":host{position:relative}";var c=Object.defineProperty,h=(s,e,l,t)=>{for(var r=void 0,a=s.length-1,n;a>=0;a--)(n=s[a])&&(r=n(e,l,r)||r);return r&&c(e,l,r),r};class i extends d.LuzmoTextFieldBase{constructor(){super(),this.viewColor=!1,this.noAlphaChannel=!1,this._value="",this.colorController=new u.ColorController(this)}static get styles(){return[...super.styles,o.r(v)]}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}updated(e){super.updated(e),e.has("noAlphaChannel")&&this.checkValidity()}renderColorHandle(){return this.viewColor&&this.valid?o.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("lit"),h=require("lit/decorators.js"),d=require("../color-controller-ChN-A9Ft.cjs"),v=require("../text-field-JMrsh-zo.cjs"),c=":host{position:relative}";var f=Object.defineProperty,u=(s,e,l,t)=>{for(var r=void 0,a=s.length-1,n;a>=0;a--)(n=s[a])&&(r=n(e,l,r)||r);return r&&f(e,l,r),r};class i extends v.LuzmoTextFieldBase{constructor(){super(),this.viewColor=!1,this.noAlphaChannel=!1,this._value="",this.colorController=new d.ColorController(this)}static get styles(){return[...super.styles,o.unsafeCSS(c)]}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}updated(e){super.updated(e),e.has("noAlphaChannel")&&this.checkValidity()}renderColorHandle(){return this.viewColor&&this.valid?o.html`
           <luzmo-color-handle
             size="m"
             color=${this.colorController.getColor("srgb").toString()}
           ></luzmo-color-handle>
-        `:o.x``}getColorValue(){return this.valid?this.colorController.getColor("srgb").toString():""}render(){return this.viewColor&&Promise.resolve().then(()=>require("../color-handle/index.cjs")),o.x` ${super.render()} ${this.renderColorHandle()} `}checkValidity(){let e=super.checkValidity();if(this.value){const l=this.colorController.validateColorString(this.value);let t=!1;this.value.startsWith("rgba")?t=!0:this.value.startsWith("rgb")?t=!1:this.value.startsWith("hsla")?t=!0:this.value.startsWith("hsl")?t=!1:this.value.startsWith("#")&&(t=this.value.length===9),this.valid=e=l.isValid&&(!this.noAlphaChannel||!t),this.invalid=!e,this.valid&&(this.colorController.color=this.value)}else this.valid=this.invalid=!1;return e}}h([o.n({type:Boolean,attribute:"view-color"})],i.prototype,"viewColor");h([o.n({type:Boolean,attribute:"no-alpha-channel"})],i.prototype,"noAlphaChannel");customElements.get("luzmo-color-field")||customElements.define("luzmo-color-field",i);exports.LuzmoColorField=i;
+        `:o.html``}getColorValue(){return this.valid?this.colorController.getColor("srgb").toString():""}render(){return this.viewColor&&Promise.resolve().then(()=>require("../color-handle/index.cjs")),o.html` ${super.render()} ${this.renderColorHandle()} `}checkValidity(){let e=super.checkValidity();if(this.value){const l=this.colorController.validateColorString(this.value);let t=!1;this.value.startsWith("rgba")?t=!0:this.value.startsWith("rgb")?t=!1:this.value.startsWith("hsla")?t=!0:this.value.startsWith("hsl")?t=!1:this.value.startsWith("#")&&(t=this.value.length===9),this.valid=e=l.isValid&&(!this.noAlphaChannel||!t),this.invalid=!e,this.valid&&(this.colorController.color=this.value)}else this.valid=this.invalid=!1;return e}}u([h.property({type:Boolean,attribute:"view-color"})],i.prototype,"viewColor");u([h.property({type:Boolean,attribute:"no-alpha-channel"})],i.prototype,"noAlphaChannel");customElements.get("luzmo-color-field")||customElements.define("luzmo-color-field",i);exports.LuzmoColorField=i;

package/components/color-field/index.js

@@ -15,9 +15,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { r as d, x as u, n } from "../base-CFWO09N1.js";
-import { C as z } from "../color-controller-B0uX6Zso.js";
-import { a as h } from "../text-field-C2n3rzCK.js";
+import { unsafeCSS as d, html as u } from "lit";
+import { property as n } from "lit/decorators.js";
+import { C as z } from "../color-controller-7sNUf7SP.js";
+import { a as h } from "../text-field-BTEpwGFu.js";
 const c = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const l = document.createElement("style");

package/components/color-handle/index.cjs

@@ -15,10 +15,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../color-loupe-CrM2DVY3.cjs");const r=require("../base-Cy0MQrPT.cjs"),c=':host{touch-action:none;transition:inline-size var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out),block-size var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out),border-width var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out),margin-inline var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out),margin-block var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out)}:host{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);background-position:50%}:host(:focus){outline:none}:host{z-index:1;box-sizing:border-box;inline-size:var(--luzmo-color-handle-size, 16px);block-size:var(--luzmo-color-handle-size, 16px);margin-inline:calc(var(--luzmo-color-handle-size, 16px) / 2 * -1);margin-block:calc(var(--luzmo-color-handle-size, 16px) / 2 * -1);border-width:var(--luzmo-color-handle-border-width, 2px);border-color:var(--luzmo-color-handle-border-color, rgb(255, 255, 255));box-shadow:0 0 0 var(--luzmo-color-handle-outer-border-width, 1px) var(--luzmo-color-handle-outer-border-color, rgba(0, 0, 0, .42));transition:all var(--luzmo-color-handle-animation-duration, 0) var(--luzmo-color-handle-animation-easing, ease-in-out);border-style:solid}:host,:host:after{border-radius:100%;display:block;position:absolute}:host:after{content:"";inset-inline:calc(50% - var(--luzmo-color-handle-hitarea-size, 24px) / 2);inset-block:calc(50% - var(--luzmo-color-handle-hitarea-size, 24px) / 2);inline-size:var(--luzmo-color-handle-hitarea-size, 24px);block-size:var(--luzmo-color-handle-hitarea-size, 24px);border-radius:var(--luzmo-color-handle-hitarea-border-radius, 100%)}:host([focused]),:host(:focus-visible){inline-size:var(--luzmo-color-handle-focused-size, 32px);block-size:var(--luzmo-color-handle-focused-size, 32px);margin-inline:calc(var(--luzmo-color-handle-size, 16px) * -1);margin-block:calc(var(--luzmo-color-handle-size, 16px) * -1);outline:none}:host([disabled]){pointer-events:none;border-color:var(--highcontrast-color-handle-border-color-disabled, var(--luzmo-color-handle-border-color-disabled, var(--luzmo-font-color-disabled)));background:var(--highcontrast-color-handle-fill-color-disabled, var(--luzmo-color-handle-fill-color-disabled, var(--luzmo-font-color-disabled)));box-shadow:none}:host([disabled]) .inner{display:none}.inner{inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--luzmo-color-handle-inner-border-width, var(--luzmo-border-width)) var(--luzmo-color-handle-inner-border-color, rgba(0, 0, 0, .42));background-color:var(--luzmo-picked-color);border-radius:100%}@media (forced-colors: active){:host{forced-color-adjust:none}:host([disabled]){--highcontrast-color-handle-border-color-disabled: GrayText;--highcontrast-color-handle-fill-color-disabled: Canvas}}';var u=Object.defineProperty,a=(t,o,d,h)=>{for(var l=void 0,n=t.length-1,s;n>=0;n--)(s=t[n])&&(l=s(o,d,l)||l);return l&&u(o,d,l),l};const i=class i extends r.LuzmoElement{constructor(){super(...arguments),this.disabled=!1,this.focused=!1,this.open=!1,this.color="rgba(255, 0, 0, 0.5)"}handlePointerdown(o){o.pointerType==="touch"&&(this.open=!0),this.setPointerCapture(o.pointerId)}handlePointerup(o){this.open=!1,this.releasePointerCapture(o.pointerId)}render(){return r.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../color-loupe-CIEFp7ln.cjs");const c=require("lit"),l=require("lit/decorators.js"),u=require("../base-5nDSSNeT.cjs"),h=':host{touch-action:none;transition:inline-size var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out),block-size var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out),border-width var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out),margin-inline var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out),margin-block var(--luzmo-color-handle-animation-duration, .13s) var(--luzmo-color-handle-animation-easing, ease-in-out)}:host{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);background-position:50%}:host(:focus){outline:none}:host{z-index:1;box-sizing:border-box;inline-size:var(--luzmo-color-handle-size, 16px);block-size:var(--luzmo-color-handle-size, 16px);margin-inline:calc(var(--luzmo-color-handle-size, 16px) / 2 * -1);margin-block:calc(var(--luzmo-color-handle-size, 16px) / 2 * -1);border-width:var(--luzmo-color-handle-border-width, 2px);border-color:var(--luzmo-color-handle-border-color, rgb(255, 255, 255));box-shadow:0 0 0 var(--luzmo-color-handle-outer-border-width, 1px) var(--luzmo-color-handle-outer-border-color, rgba(0, 0, 0, .42));transition:all var(--luzmo-color-handle-animation-duration, 0) var(--luzmo-color-handle-animation-easing, ease-in-out);border-style:solid}:host,:host:after{border-radius:100%;display:block;position:absolute}:host:after{content:"";inset-inline:calc(50% - var(--luzmo-color-handle-hitarea-size, 24px) / 2);inset-block:calc(50% - var(--luzmo-color-handle-hitarea-size, 24px) / 2);inline-size:var(--luzmo-color-handle-hitarea-size, 24px);block-size:var(--luzmo-color-handle-hitarea-size, 24px);border-radius:var(--luzmo-color-handle-hitarea-border-radius, 100%)}:host([focused]),:host(:focus-visible){inline-size:var(--luzmo-color-handle-focused-size, 32px);block-size:var(--luzmo-color-handle-focused-size, 32px);margin-inline:calc(var(--luzmo-color-handle-size, 16px) * -1);margin-block:calc(var(--luzmo-color-handle-size, 16px) * -1);outline:none}:host([disabled]){pointer-events:none;border-color:var(--highcontrast-color-handle-border-color-disabled, var(--luzmo-color-handle-border-color-disabled, var(--luzmo-font-color-disabled)));background:var(--highcontrast-color-handle-fill-color-disabled, var(--luzmo-color-handle-fill-color-disabled, var(--luzmo-font-color-disabled)));box-shadow:none}:host([disabled]) .inner{display:none}.inner{inline-size:100%;block-size:100%;box-shadow:inset 0 0 0 var(--luzmo-color-handle-inner-border-width, var(--luzmo-border-width)) var(--luzmo-color-handle-inner-border-color, rgba(0, 0, 0, .42));background-color:var(--luzmo-picked-color);border-radius:100%}@media (forced-colors: active){:host{forced-color-adjust:none}:host([disabled]){--highcontrast-color-handle-border-color-disabled: GrayText;--highcontrast-color-handle-fill-color-disabled: Canvas}}';var p=Object.defineProperty,a=(t,o,s,m)=>{for(var r=void 0,n=t.length-1,d;n>=0;n--)(d=t[n])&&(r=d(o,s,r)||r);return r&&p(o,s,r),r};const i=class i extends u.LuzmoElement{constructor(){super(...arguments),this.disabled=!1,this.focused=!1,this.open=!1,this.color="rgba(255, 0, 0, 0.5)"}handlePointerdown(o){o.pointerType==="touch"&&(this.open=!0),this.setPointerCapture(o.pointerId)}handlePointerup(o){this.open=!1,this.releasePointerCapture(o.pointerId)}render(){return c.html`
       <div class="inner" style="background-color: ${this.color}"></div>
       <luzmo-color-loupe
         color=${this.color}
         ?open=${this.open&&!this.disabled}
       ></luzmo-color-loupe>
-    `}firstUpdated(o){super.firstUpdated(o),this.addEventListener("pointerdown",this.handlePointerdown),this.addEventListener("pointerup",this.handlePointerup),this.addEventListener("pointercancel",this.handlePointerup)}};i.styles=r.r(c);let e=i;a([r.n({type:Boolean,reflect:!0})],e.prototype,"disabled");a([r.n({type:Boolean,reflect:!0})],e.prototype,"focused");a([r.n({type:Boolean,reflect:!0})],e.prototype,"open");a([r.n({type:String})],e.prototype,"color");customElements.get("luzmo-color-handle")||customElements.define("luzmo-color-handle",e);exports.LuzmoColorHandle=e;
+    `}firstUpdated(o){super.firstUpdated(o),this.addEventListener("pointerdown",this.handlePointerdown),this.addEventListener("pointerup",this.handlePointerup),this.addEventListener("pointercancel",this.handlePointerup)}};i.styles=c.unsafeCSS(h);let e=i;a([l.property({type:Boolean,reflect:!0})],e.prototype,"disabled");a([l.property({type:Boolean,reflect:!0})],e.prototype,"focused");a([l.property({type:Boolean,reflect:!0})],e.prototype,"open");a([l.property({type:String})],e.prototype,"color");customElements.get("luzmo-color-handle")||customElements.define("luzmo-color-handle",e);exports.LuzmoColorHandle=e;

package/components/color-handle/index.js

@@ -15,8 +15,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import "../color-loupe-DmQe3SpP.js";
-import { a as s, r as m, x as z, n as a } from "../base-CFWO09N1.js";
+import "../color-loupe-CLPX6xVb.js";
+import { unsafeCSS as s, html as m } from "lit";
+import { property as a } from "lit/decorators.js";
+import { a as z } from "../base-CdYjmV_8.js";
 const u = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const l = document.createElement("style");
@@ -30,7 +32,7 @@ var b = Object.defineProperty, i = (l, o, c, p) => {
     (d = l[n]) && (e = d(o, c, e) || e);
   return e && b(o, c, e), e;
 };
-const t = class t extends s {
+const t = class t extends z {
   constructor() {
     super(...arguments), this.disabled = !1, this.focused = !1, this.open = !1, this.color = "rgba(255, 0, 0, 0.5)";
   }
@@ -41,7 +43,7 @@ const t = class t extends s {
     this.open = !1, this.releasePointerCapture(o.pointerId);
   }
   render() {
-    return z`
+    return m`
       <div class="inner" style="background-color: ${this.color}"></div>
       <luzmo-color-loupe
         color=${this.color}
@@ -53,7 +55,7 @@ const t = class t extends s {
     super.firstUpdated(o), this.addEventListener("pointerdown", this.handlePointerdown), this.addEventListener("pointerup", this.handlePointerup), this.addEventListener("pointercancel", this.handlePointerup);
   }
 };
-t.styles = m(h);
+t.styles = s(h);
 let r = t;
 i([
   a({ type: Boolean, reflect: !0 })

package/components/color-loupe/index.cjs

@@ -15,4 +15,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../color-loupe-CrM2DVY3.cjs");customElements.get("luzmo-color-loupe")||customElements.define("luzmo-color-loupe",o.LuzmoColorLoupe);exports.LuzmoColorLoupe=o.LuzmoColorLoupe;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../color-loupe-CIEFp7ln.cjs");customElements.get("luzmo-color-loupe")||customElements.define("luzmo-color-loupe",o.LuzmoColorLoupe);exports.LuzmoColorLoupe=o.LuzmoColorLoupe;

package/components/color-loupe/index.js

@@ -15,7 +15,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { L as r } from "../color-loupe-DmQe3SpP.js";
+import { L as r } from "../color-loupe-CLPX6xVb.js";
 const l = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const o = document.createElement("style");

package/components/color-loupe-CIEFp7ln.cjs

@@ -0,0 +1,56 @@
+/*! * 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.
+ * */
+"use strict";const p=require("lit"),u=require("lit/decorators.js"),n=require("./base-5nDSSNeT.cjs"),d=':host{inline-size:var(--luzmo-color-loupe-width, 48px);block-size:var(--luzmo-color-loupe-height, 64px);transform:translateY(var(--luzmo-color-loupe-animation-distance, 8px));opacity:0;transform-origin:bottom;pointer-events:none;filter:drop-shadow(var(--luzmo-color-loupe-drop-shadow-x, 0) var(--luzmo-color-loupe-drop-shadow-y, 2px) var(--luzmo-color-loupe-drop-shadow-blur, 8px) var(--luzmo-color-loupe-drop-shadow-color, rgba(0, 0, 0, .25)));transition:transform .1s ease-in-out,opacity .125s ease-in-out;position:absolute;inset-block-end:calc(var(--luzmo-color-handle-size, 16px) - var(--luzmo-color-handle-outer-border-width, 1px) + var(--luzmo-color-loupe-offset, 12px));inset-inline-end:calc(50% - var(--luzmo-color-loupe-width, 48px) / 2)}:host:dir(rtl),:host([dir=rtl]){inset-inline-end:calc(50% - var(--luzmo-color-loupe-width, 48px) / 2 - 1px)}:host([open]){opacity:1;transform:translate(0)}.luzmo-color-loupe-inner-border{fill:var(--luzmo-picked-color);stroke:var(--luzmo-color-loupe-inner-border-color, rgba(0, 0, 0, .1));stroke-width:var(--luzmo-color-loupe-inner-border-width, 1px)}.luzmo-color-loupe-outer-border{fill:none;stroke:var(--luzmo-color-loupe-outer-border-color, white);stroke-width:calc(var(--luzmo-color-loupe-outer-border-width, 2px) + 2px);transform:translate(calc((var(--luzmo-color-loupe-outer-border-width, 2px) + 2px) / 2))}.luzmo-color-loupe-checkerboard-pattern{fill:var(--luzmo-color-loupe-checkerboard-dark-color, rgb(230, 230, 230))}.luzmo-color-loupe-checkerboard-background{fill:var(--luzmo-color-loupe-checkerboard-light-color, rgb(255, 255, 255))}.luzmo-color-loupe-checkerboard-fill{fill:var(--luzmo-color-loupe-checkerboard-fill, url(#checkerboard-primary))}@media (forced-colors: active){:host{--highcontrast-colorloupe-outer-border-color: CanvasText}}svg{width:inherit;height:inherit}.loupe-clipped{clip-path:path("M23 61.575C19.0044 57.435 15.2591 53.0606 11.784 48.475C8.68949 44.4532 5.96348 40.1608 3.639 35.65C1.224 30.8 0 26.549 0 23C0.00319993 17.6937 1.84059 12.5516 5.20091 8.44488C8.56122 4.33815 13.2378 1.51928 18.4385 0.465803C23.6392 -0.587678 29.0442 0.189006 33.7378 2.66428C38.4314 5.13955 42.125 9.16122 44.193 14.048C45.3915 16.88 46.0061 19.9248 46 23C46 26.551 44.774 30.811 42.355 35.661C40.0274 40.1747 37.298 44.4698 34.2 48.494C30.7297 53.0728 26.9898 57.4409 23 61.575ZZ")}.opacity-checkerboard{position:absolute;top:2px;left:2px;block-size:100%;inline-size:100%}.opacity-checkerboard{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)}';var h=Object.defineProperty,s=(t,a,c,m)=>{for(var o=void 0,e=t.length-1,i;e>=0;e--)(i=t[e])&&(o=i(a,c,o)||o);return o&&h(a,c,o),o};const l=class l extends n.LuzmoElement{constructor(){super(...arguments),this.open=!1,this.color="rgba(255, 0, 0, 0.5)"}render(){return p.html`
+      <div class="opacity-checkerboard loupe-clipped"></div>
+      <div class="luzmo-color-loupe-inner-border loupe-clipped"></div>
+      <div class="luzmo-color-loupe-outer-border loupe-clipped"></div>
+      <svg
+        aria-hidden="true"
+        class="luzmo-color-loupe is-open"
+        overflow="visible"
+        style="--luzmo-picked-color: ${this.color}; position: absolute;"
+      >
+        <defs>
+          <path
+            id="loupe-path"
+            d="M23 61.575C19.0044 57.435 15.2591 53.0606 11.784 48.475C8.68949 44.4532 5.96348 40.1608 3.639 35.65C1.224 30.8 0 26.549 0 23C0.00319993 17.6937 1.84059 12.5516 5.20091 8.44488C8.56122 4.33815 13.2378 1.51928 18.4385 0.465803C23.6392 -0.587678 29.0442 0.189006 33.7378 2.66428C38.4314 5.13955 42.125 9.16122 44.193 14.048C45.3915 16.88 46.0061 19.9248 46 23C46 26.551 44.774 30.811 42.355 35.661C40.0274 40.1747 37.298 44.4698 34.2 48.494C30.7297 53.0728 26.9898 57.4409 23 61.575ZZ"
+            transform="translate(2, 2)"
+          />
+          <mask id="loupe-mask">
+            <rect x="0" y="0" height="100" width="100" fill="white" />
+            <use xlink:href="#path" fill="black" />
+          </mask>
+        </defs>
+
+        <g class="luzmo-color-loupe-loupe">
+          <g>
+            <use
+              xlink:href="#loupe-path"
+              mask="url(#loupe-mask)"
+              transform="translate(2, 2)"
+              class="luzmo-color-loupe-inner-border"
+            />
+            <use
+              xlink:href="#loupe-path"
+              mask="url(#loupe-mask)"
+              class="luzmo-color-loupe-outer-border"
+            />
+          </g>
+        </g>
+      </svg>
+    `}};l.styles=p.unsafeCSS(d);let r=l;s([u.property({type:Boolean,reflect:!0})],r.prototype,"open");s([u.property({type:String})],r.prototype,"color");exports.LuzmoColorLoupe=r;

package/components/{color-loupe-DmQe3SpP.js → color-loupe-CLPX6xVb.js}

@@ -15,19 +15,21 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { a as s, r as d, x as n, n as p } from "./base-CFWO09N1.js";
+import { unsafeCSS as s, html as d } from "lit";
+import { property as p } from "lit/decorators.js";
+import { a as n } from "./base-CdYjmV_8.js";
 const h = ':host{inline-size:var(--luzmo-color-loupe-width, 48px);block-size:var(--luzmo-color-loupe-height, 64px);transform:translateY(var(--luzmo-color-loupe-animation-distance, 8px));opacity:0;transform-origin:bottom;pointer-events:none;filter:drop-shadow(var(--luzmo-color-loupe-drop-shadow-x, 0) var(--luzmo-color-loupe-drop-shadow-y, 2px) var(--luzmo-color-loupe-drop-shadow-blur, 8px) var(--luzmo-color-loupe-drop-shadow-color, rgba(0, 0, 0, .25)));transition:transform .1s ease-in-out,opacity .125s ease-in-out;position:absolute;inset-block-end:calc(var(--luzmo-color-handle-size, 16px) - var(--luzmo-color-handle-outer-border-width, 1px) + var(--luzmo-color-loupe-offset, 12px));inset-inline-end:calc(50% - var(--luzmo-color-loupe-width, 48px) / 2)}:host:dir(rtl),:host([dir=rtl]){inset-inline-end:calc(50% - var(--luzmo-color-loupe-width, 48px) / 2 - 1px)}:host([open]){opacity:1;transform:translate(0)}.luzmo-color-loupe-inner-border{fill:var(--luzmo-picked-color);stroke:var(--luzmo-color-loupe-inner-border-color, rgba(0, 0, 0, .1));stroke-width:var(--luzmo-color-loupe-inner-border-width, 1px)}.luzmo-color-loupe-outer-border{fill:none;stroke:var(--luzmo-color-loupe-outer-border-color, white);stroke-width:calc(var(--luzmo-color-loupe-outer-border-width, 2px) + 2px);transform:translate(calc((var(--luzmo-color-loupe-outer-border-width, 2px) + 2px) / 2))}.luzmo-color-loupe-checkerboard-pattern{fill:var(--luzmo-color-loupe-checkerboard-dark-color, rgb(230, 230, 230))}.luzmo-color-loupe-checkerboard-background{fill:var(--luzmo-color-loupe-checkerboard-light-color, rgb(255, 255, 255))}.luzmo-color-loupe-checkerboard-fill{fill:var(--luzmo-color-loupe-checkerboard-fill, url(#checkerboard-primary))}@media (forced-colors: active){:host{--highcontrast-colorloupe-outer-border-color: CanvasText}}svg{width:inherit;height:inherit}.loupe-clipped{clip-path:path("M23 61.575C19.0044 57.435 15.2591 53.0606 11.784 48.475C8.68949 44.4532 5.96348 40.1608 3.639 35.65C1.224 30.8 0 26.549 0 23C0.00319993 17.6937 1.84059 12.5516 5.20091 8.44488C8.56122 4.33815 13.2378 1.51928 18.4385 0.465803C23.6392 -0.587678 29.0442 0.189006 33.7378 2.66428C38.4314 5.13955 42.125 9.16122 44.193 14.048C45.3915 16.88 46.0061 19.9248 46 23C46 26.551 44.774 30.811 42.355 35.661C40.0274 40.1747 37.298 44.4698 34.2 48.494C30.7297 53.0728 26.9898 57.4409 23 61.575ZZ")}.opacity-checkerboard{position:absolute;top:2px;left:2px;block-size:100%;inline-size:100%}.opacity-checkerboard{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)}';
 var m = Object.defineProperty, u = (a, t, c, b) => {
   for (var o = void 0, l = a.length - 1, i; l >= 0; l--)
     (i = a[l]) && (o = i(t, c, o) || o);
   return o && m(t, c, o), o;
 };
-const e = class e extends s {
+const e = class e extends n {
   constructor() {
     super(...arguments), this.open = !1, this.color = "rgba(255, 0, 0, 0.5)";
   }
   render() {
-    return n`
+    return d`
       <div class="opacity-checkerboard loupe-clipped"></div>
       <div class="luzmo-color-loupe-inner-border loupe-clipped"></div>
       <div class="luzmo-color-loupe-outer-border loupe-clipped"></div>
@@ -68,7 +70,7 @@ const e = class e extends s {
     `;
   }
 };
-e.styles = d(h);
+e.styles = s(h);
 let r = e;
 u([
   p({ type: Boolean, reflect: !0 })