@luzmo/lucero 1.0.1-alpha.4 → 1.0.1-alpha.40

package/components/color-area/index.js

@@ -15,18 +15,19 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { a as z, r as v, x as y, n as s } from "../base-WsynuqaS.js";
-import { e as b } from "../query-D_KR_GUc.js";
-import { o as m } from "../if-defined-DOaE2coe.js";
+import { unsafeCSS as z, html as v } from "lit";
+import { property as s, query as b } from "lit/decorators.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
 import "../color-handle/index.js";
-import { j as x, c as w } from "../platform-BM-uMWpX.js";
-import { C } from "../color-controller-DTp1juRz.js";
-import { L as $ } from "../language-resolution-8yZa5r_P.js";
-import { s as k } from "../streaming-listener-CP-JE6Fa.js";
+import { a as y } from "../base-CdYjmV_8.js";
+import { j as x, c as w } from "../platform-CqwNrovd.js";
+import { C } from "../color-controller-7sNUf7SP.js";
+import { L as $ } from "../language-resolution-B-wjV5bb.js";
+import { s as k } from "../streaming-listener-BlWm-XZU.js";
 const g = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const u = document.createElement("style");
-    u.setAttribute("data-luzmo-vars", ""), u.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(u);
+    u.setAttribute("data-luzmo-vars", ""), u.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(u);
   }
 };
 g();
@@ -36,12 +37,12 @@ var A = Object.defineProperty, P = Object.getOwnPropertyDescriptor, i = (u, e, o
     (n = u[a]) && (r = (t ? n(e, o, r) : n(r)) || r);
   return t && r && A(e, o, r), r;
 };
-class l extends z {
+class l extends y {
   constructor() {
     super(...arguments), this.disabled = !1, this.focused = !1, this.labelX = "saturation", this.labelY = "luminosity", this.isLTR = !0, this.languageResolver = new $(this), this.colorController = new C(this, { manageAs: "hsv" }), this.activeAxis = "x", this.step = 0.01, this.altered = 0, this.activeKeys = /* @__PURE__ */ new Set(), this._valueChanged = !1, this._pointerDown = !1;
   }
   static get styles() {
-    return [v(R)];
+    return [z(R)];
   }
   get hue() {
     return this.colorController.hue;
@@ -215,7 +216,7 @@ class l extends z {
     }).format(this.y), f = {
       background: `linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`
     };
-    return y`
+    return v`
       <div
         @pointerdown=${this.handleAreaPointerdown}
         class="gradient"

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/color-field.d.ts

@@ -7,12 +7,20 @@ import { LuzmoTextFieldBase } from './../text-field/text-field';
  */
 export declare class LuzmoColorField extends LuzmoTextFieldBase {
     static get styles(): CSSResultArray;
+    /**
+     * Whether the color handle with the preview color is shown
+     */
     viewColor: boolean;
+    /**
+     * Whether the alpha channel is not allowed
+     */
+    noAlphaChannel: boolean;
     private colorController;
     constructor();
     set value(value: string);
     get value(): string;
     protected _value: string;
+    protected updated(changedProperties: Map<string, any>): void;
     private renderColorHandle;
     getColorValue(): string;
     protected render(): TemplateResult;

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-CBCg3yyw.cjs"),a=require("../color-controller-_ZwyhvaU.cjs"),u=require("../text-field-D5d_Gt0t.cjs"),d=":host{position:relative}";var h=Object.defineProperty,v=(t,e,l,c)=>{for(var r=void 0,i=t.length-1,n;i>=0;i--)(n=t[i])&&(r=n(e,l,r)||r);return r&&h(e,l,r),r};class s extends u.LuzmoTextFieldBase{constructor(){super(),this.viewColor=!1,this._value="",this.colorController=new a.ColorController(this)}static get styles(){return[...super.styles,o.r(d)]}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}renderColorHandle(){return this.viewColor&&this.valid?o.x`
-          <sp-color-handle
+"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-DFP7p8Rv.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()}
-          ></sp-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();return this.value?(this.valid=e=this.colorController.validateColorString(this.value).isValid,this.invalid=!e,this.valid&&(this.colorController.color=this.value)):this.valid=this.invalid=!1,e}}v([o.n({type:Boolean,attribute:"view-color"})],s.prototype,"viewColor");customElements.get("luzmo-color-field")||customElements.define("luzmo-color-field",s);exports.LuzmoColorField=s;
+          ></luzmo-color-handle>
+        `: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,28 +15,29 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { r as n, x as i, n as s } from "../base-WsynuqaS.js";
-import { C as a } from "../color-controller-DTp1juRz.js";
-import { a as d } from "../text-field-BIADXoLC.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-BHaLKkf1.js";
 const c = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const l = document.createElement("style");
-    l.setAttribute("data-luzmo-vars", ""), l.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(l);
+    l.setAttribute("data-luzmo-vars", ""), l.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(l);
   }
 };
 c();
-const z = ":host{position:relative}";
-var f = Object.defineProperty, g = (l, o, e, h) => {
-  for (var r = void 0, t = l.length - 1, u; t >= 0; t--)
-    (u = l[t]) && (r = u(o, e, r) || r);
-  return r && f(o, e, r), r;
+const f = ":host{position:relative}";
+var g = Object.defineProperty, m = (l, o, e, r) => {
+  for (var t = void 0, i = l.length - 1, a; i >= 0; i--)
+    (a = l[i]) && (t = a(o, e, t) || t);
+  return t && g(o, e, t), t;
 };
-class m extends d {
+class s extends h {
   constructor() {
-    super(), this.viewColor = !1, this._value = "", this.colorController = new a(this);
+    super(), this.viewColor = !1, this.noAlphaChannel = !1, this._value = "", this.colorController = new z(this);
   }
   static get styles() {
-    return [...super.styles, n(z)];
+    return [...super.styles, d(f)];
   }
   set value(o) {
     if (o === this.value)
@@ -47,31 +48,43 @@ class m extends d {
   get value() {
     return this._value;
   }
+  updated(o) {
+    super.updated(o), o.has("noAlphaChannel") && this.checkValidity();
+  }
   renderColorHandle() {
-    return this.viewColor && this.valid ? i`
-          <sp-color-handle
+    return this.viewColor && this.valid ? u`
+          <luzmo-color-handle
             size="m"
             color=${this.colorController.getColor("srgb").toString()}
-          ></sp-color-handle>
-        ` : i``;
+          ></luzmo-color-handle>
+        ` : u``;
   }
   getColorValue() {
     return this.valid ? this.colorController.getColor("srgb").toString() : "";
   }
   render() {
-    return this.viewColor && import("../color-handle/index.js"), i` ${super.render()} ${this.renderColorHandle()} `;
+    return this.viewColor && import("../color-handle/index.js"), u` ${super.render()} ${this.renderColorHandle()} `;
   }
   checkValidity() {
     let o = super.checkValidity();
-    return this.value ? (this.valid = o = this.colorController.validateColorString(
-      this.value
-    ).isValid, this.invalid = !o, this.valid && (this.colorController.color = this.value)) : this.valid = this.invalid = !1, o;
+    if (this.value) {
+      const e = this.colorController.validateColorString(
+        this.value
+      );
+      let r = !1;
+      this.value.startsWith("rgba") ? r = !0 : this.value.startsWith("rgb") ? r = !1 : this.value.startsWith("hsla") ? r = !0 : this.value.startsWith("hsl") ? r = !1 : this.value.startsWith("#") && (r = this.value.length === 9), this.valid = o = e.isValid && (!this.noAlphaChannel || !r), this.invalid = !o, this.valid && (this.colorController.color = this.value);
+    } else
+      this.valid = this.invalid = !1;
+    return o;
   }
 }
-g([
-  s({ type: Boolean, attribute: "view-color" })
-], m.prototype, "viewColor");
-customElements.get("luzmo-color-field") || customElements.define("luzmo-color-field", m);
+m([
+  n({ type: Boolean, attribute: "view-color" })
+], s.prototype, "viewColor");
+m([
+  n({ type: Boolean, attribute: "no-alpha-channel" })
+], s.prototype, "noAlphaChannel");
+customElements.get("luzmo-color-field") || customElements.define("luzmo-color-field", s);
 export {
-  m as LuzmoColorField
+  s as LuzmoColorField
 };