@luzmo/lucero 1.0.1-alpha.9 → 1.0.2

package/components/color-area-DViRjuKo.js

@@ -0,0 +1,300 @@
+/*! * 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 { n as e, t } from "./decorate-aGxJUVxg.js";
+import { a as n, t as r } from "./platform-D4V_cOJF.js";
+import { t as i } from "./language-resolution-BpfGTC29.js";
+import "./color-handle-BOusOFFx.js";
+import { t as a } from "./color-controller-G2_v2xSl.js";
+import { t as o } from "./streaming-listener-2NcP7ys7.js";
+import { html as s, unsafeCSS as c } from "lit";
+import { property as l, query as u } from "lit/decorators.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+//#region src/components/color-area/color-area.module.scss?inline
+var f = "@media (forced-colors:active){:host{--highcontrast-color-area-border-color-disabled:GrayText;--highcontrast-color-area-border-color:Canvas;--highcontrast-color-area-fill-color-disabled:Canvas}.gradient,:host([disabled]){forced-color-adjust:none}}:host{cursor:default;-webkit-user-select:none;user-select:none;min-inline-size:var(--luzmo-color-area-min-width,64px);min-block-size:var(--luzmo-color-area-min-height,64px);inline-size:var(--luzmo-color-area-width,192px);block-size:var(--luzmo-color-area-height,192px);box-sizing:border-box;border-radius:var(--luzmo-color-area-border-radius,var(--luzmo-border-radius-s));display:inline-block;position:relative;border:var(--luzmo-color-area-border-width,var(--luzmo-border-width)) solid var(--highcontrast-color-area-border-color,var(--luzmo-color-area-border-color,var(--luzmo-border-color)))!important}:host([focused]){z-index:1}:host([disabled]){pointer-events:none;background:var(--highcontrast-color-area-fill-color-disabled,var(--luzmo-color-area-disabled-background-color,var(--luzmo-dimmed-color)));border:var(--luzmo-color-area-border-width,var(--luzmo-border-width)) solid var(--highcontrast-color-area-border-color-disabled)!important}:host([disabled]) .gradient{display:none}.handle{transform:translate(calc(var(--luzmo-color-area-width,192px) - var(--luzmo-border-width)));inset-block-start:0}:host([dir=rtl]) .handle{inset-inline-end:0}.handle:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){inset-inline-end:0}.gradient{border-radius:var(--luzmo-color-area-border-radius,var(--luzmo-border-radius-s));block-size:100%;inline-size:100%}.slider{opacity:0;z-index:0;pointer-events:none;block-size:100%;inline-size:100%;margin:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host{touch-action:none}:host:before{pointer-events:none}.gradient{overflow:hidden}.handle{transform:translate(var(--luzmo-color-area-default-width), 0)}::slotted(*){width:100%;height:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.slider[orient=vertical]{appearance:slider-vertical}.slider:focus{z-index:1}.fieldset{border:0;margin:0;padding:0}", p = class extends e {
+	constructor(...e) {
+		super(...e), this.disabled = !1, this.focused = !1, this.labelX = "saturation", this.labelY = "luminosity", this.isLTR = !0, this.languageResolver = new i(this), this.colorController = new a(this, { manageAs: "hsv" }), this.activeAxis = "x", this.step = .01, this.altered = 0, this.activeKeys = /* @__PURE__ */ new Set(), this._valueChanged = !1, this._pointerDown = !1;
+	}
+	static get styles() {
+		return [c(f)];
+	}
+	get hue() {
+		return this.colorController.hue;
+	}
+	set hue(e) {
+		this.colorController.hue = e;
+	}
+	get value() {
+		return this.colorController.colorValue;
+	}
+	get color() {
+		return this.colorController.colorValue;
+	}
+	set color(e) {
+		this.colorController.color = e;
+	}
+	get x() {
+		return this.colorController.color.hsv.s / 100;
+	}
+	set x(e) {
+		if (e === this.x) return;
+		let t = this.x;
+		this.inputX ? (this.inputX.value = e.toString(), this.colorController.color.set("s", this.inputX.valueAsNumber * 100)) : this.colorController.color.set("s", e * 100), this.requestUpdate("x", t);
+	}
+	get y() {
+		return this.colorController.color.hsv.v / 100;
+	}
+	set y(e) {
+		if (e === this.y) return;
+		let t = this.y;
+		this.inputY && (this.inputY.value = e.toString(), this.colorController.color.set("v", this.inputY.valueAsNumber * 100)), this.requestUpdate("y", t);
+	}
+	focus(e = {}) {
+		super.focus(e), this.forwardFocus();
+	}
+	forwardFocus() {
+		this.activeAxis === "x" ? this.inputX.focus() : this.inputY.focus();
+	}
+	handleFocus() {
+		this.focused = !0, this._valueChanged = !1;
+	}
+	handleBlur() {
+		this._pointerDown || (this.altered = 0, this.focused = !1, this._valueChanged = !1);
+	}
+	handleKeydown(e) {
+		let { code: t } = e;
+		this.focused = !0, this.altered = [
+			e.shiftKey,
+			e.ctrlKey,
+			e.altKey
+		].filter((e) => !!e).length, (t.search("Arrow") === 0 || t.search("Page") === 0 || t.search("Home") === 0 || t.search("End") === 0) && (e.preventDefault(), this.activeKeys.add(t), this.handleKeypress());
+	}
+	handleKeypress() {
+		let e = 0, t = 0, n = Math.max(this.step, this.altered * 5 * this.step);
+		this.activeKeys.forEach((r) => {
+			switch (r) {
+				case "ArrowUp":
+					t = n;
+					break;
+				case "ArrowDown":
+					t = n * -1;
+					break;
+				case "ArrowLeft":
+					e = this.step * (this.isLTR ? -1 : 1);
+					break;
+				case "ArrowRight":
+					e = this.step * (this.isLTR ? 1 : -1);
+					break;
+				case "PageUp":
+					t = n * 10;
+					break;
+				case "PageDown":
+					t = n * -10;
+					break;
+				case "Home":
+					e = n * (this.isLTR ? -10 : 10);
+					break;
+				case "End":
+					e = n * (this.isLTR ? 10 : -10);
+					break;
+				/* c8 ignore next 2 */
+				default: break;
+			}
+		}), e === 0 ? t !== 0 && (this.activeAxis = "y", this.inputY.focus()) : (this.activeAxis = "x", this.inputX.focus()), this.x = Math.min(1, Math.max(this.x + e, 0)), this.y = Math.min(1, Math.max(this.y + t, 0)), this.colorController.savePreviousColor(), (e !== 0 || t !== 0) && (this._valueChanged = !0, this.dispatchEvent(new Event("input", {
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0
+		})) || this.colorController.restorePreviousColor());
+	}
+	handleKeyup(e) {
+		e.preventDefault();
+		let { code: t } = e;
+		this.activeKeys.delete(t);
+	}
+	handleInput(e) {
+		let { valueAsNumber: t, name: n } = e.target;
+		this[n] = t;
+	}
+	handleChange(e) {
+		this.handleInput(e), this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0
+		}));
+	}
+	handlePointerdown(e) {
+		if (e.button !== 0) {
+			e.preventDefault();
+			return;
+		}
+		this._pointerDown = !0, this.colorController.savePreviousColor(), this.boundingClientRect = this.getBoundingClientRect(), e.target.setPointerCapture(e.pointerId), e.pointerType === "mouse" && (this.focused = !0);
+	}
+	handlePointermove(e) {
+		let [t, n] = this.calculateHandlePosition(e);
+		this._valueChanged = !1, this.x = t, this.y = n, this.dispatchEvent(new Event("input", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0
+		}));
+	}
+	handlePointerup(e) {
+		e.preventDefault(), this._pointerDown = !1, e.target.releasePointerCapture(e.pointerId);
+		let t = this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0
+		}));
+		this.inputX.focus(), e.pointerType === "mouse" && (this.focused = !1), t || this.colorController.restorePreviousColor();
+	}
+	calculateHandlePosition(e) {
+		/* c8 ignore next 3 */
+		if (!this.boundingClientRect) return [this.x, this.y];
+		let t = this.boundingClientRect, n = t.left, r = t.top, i = e.clientX, a = e.clientY, o = t.width, s = t.height, c = Math.max(0, Math.min(1, (i - n) / o)), l = Math.max(0, Math.min(1, (a - r) / s));
+		return [this.isLTR ? c : 1 - c, 1 - l];
+	}
+	handleAreaPointerdown(e) {
+		e.button === 0 && (e.stopPropagation(), e.preventDefault(), this.handle.dispatchEvent(new PointerEvent("pointerdown", e)), this.handlePointermove(e));
+	}
+	render() {
+		let { width: e = 0, height: t = 0 } = this.boundingClientRect || {}, i = r() || n(), a = "Color Picker", c = d(i ? void 0 : "2d slider"), l = this.labelX, u = this.labelY, f = new Intl.NumberFormat(this.languageResolver.language, {
+			style: "percent",
+			unitDisplay: "narrow"
+		}).format(this.x), p = new Intl.NumberFormat(this.languageResolver.language, {
+			style: "percent",
+			unitDisplay: "narrow"
+		}).format(this.y), m = { 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 s`
+      <div
+        @pointerdown=${this.handleAreaPointerdown}
+        class="gradient"
+        style="background: ${m.background}"
+      >
+        <slot name="gradient"></slot>
+      </div>
+
+      <luzmo-color-handle
+        tabindex=${d(this.focused ? void 0 : "0")}
+        @focus=${this.forwardFocus}
+        ?focused=${this.focused}
+        class="handle"
+        color=${this.colorController.getHslString()}
+        ?disabled=${this.disabled}
+        style=${`transform: translate(${(this.isLTR ? this.x : 1 - this.x) * e}px, ${t - this.y * t}px);`}
+        ${o({
+			start: ["pointerdown", this.handlePointerdown],
+			streamInside: ["pointermove", this.handlePointermove],
+			end: [[
+				"pointerup",
+				"pointercancel",
+				"pointerleave"
+			], this.handlePointerup]
+		})}
+      ></luzmo-color-handle>
+
+      <fieldset
+        class="fieldset"
+        aria-label=${d(i ? a : void 0)}
+      >
+        <div role="presentation">
+          <input
+            type="range"
+            class="slider"
+            name="x"
+            aria-label=${i ? l : `${l} ${a}`}
+            aria-roledescription=${c}
+            aria-orientation="horizontal"
+            aria-valuetext=${i ? f : `${f}, ${l}${this._valueChanged ? "" : `, ${p}, ${u}`}`}
+            min="0"
+            max="1"
+            step=${this.step}
+            tabindex="-1"
+            .value=${String(this.x)}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+          />
+        </div>
+        <div role="presentation">
+          <input
+            type="range"
+            class="slider"
+            name="y"
+            aria-label=${i ? u : `${u} ${a}`}
+            aria-roledescription=${c}
+            aria-orientation="vertical"
+            aria-valuetext=${i ? p : `${p}, ${u}${this._valueChanged ? "" : `, ${f}, ${l}`}`}
+            orient="vertical"
+            min="0"
+            max="1"
+            step=${this.step}
+            tabindex="-1"
+            .value=${String(this.y)}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+          />
+        </div>
+      </fieldset>
+    `;
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.boundingClientRect = this.getBoundingClientRect(), this.addEventListener("focus", this.handleFocus), this.addEventListener("blur", this.handleBlur), this.addEventListener("keyup", this.handleKeyup), this.addEventListener("keydown", this.handleKeydown);
+	}
+	updated(e) {
+		if (super.updated(e), this.x !== this.inputX.valueAsNumber && this.colorController.color.set("s", this.inputX.valueAsNumber * 100), this.y !== this.inputY.valueAsNumber && this.colorController.color.set("v", (1 - this.inputY.valueAsNumber) * 100), e.has("focused") && this.focused) {
+			let e = this.inputX.parentElement, t = this.inputY.parentElement;
+			if (!e.shadowRoot && !t.shadowRoot) {
+				e.attachShadow({ mode: "open" }), t.attachShadow({ mode: "open" });
+				let n = "<div tabindex=\"-1\"><slot></slot></div>";
+				e.shadowRoot.innerHTML = n, t.shadowRoot.innerHTML = n;
+			}
+		}
+	}
+	connectedCallback() {
+		super.connectedCallback(), !this.observer && window.ResizeObserver && (this.observer = new window.ResizeObserver((e) => {
+			for (let t of e) this.boundingClientRect = t.contentRect;
+			this.requestUpdate();
+		})), this.observer?.observe(this);
+	}
+	disconnectedCallback() {
+		this.observer?.unobserve(this), super.disconnectedCallback();
+	}
+};
+//#endregion
+//#region src/components/color-area/index.ts
+t([l({
+	type: String,
+	reflect: !0
+})], p.prototype, "dir", void 0), t([l({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "disabled", void 0), t([l({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "focused", void 0), t([l({
+	type: String,
+	attribute: "label-x"
+})], p.prototype, "labelX", void 0), t([l({
+	type: String,
+	attribute: "label-y"
+})], p.prototype, "labelY", void 0), t([l({
+	type: Boolean,
+	attribute: "is-ltr"
+})], p.prototype, "isLTR", void 0), t([u(".handle")], p.prototype, "handle", void 0), t([l({ type: Number })], p.prototype, "hue", null), t([l({ type: String })], p.prototype, "value", null), t([l({ type: String })], p.prototype, "color", null), t([l({ attribute: !1 })], p.prototype, "activeAxis", void 0), t([l({ type: Number })], p.prototype, "x", null), t([l({ type: Number })], p.prototype, "y", null), t([l({ type: Number })], p.prototype, "step", void 0), t([u("[name=\"x\"]")], p.prototype, "inputX", void 0), t([u("[name=\"y\"]")], p.prototype, "inputY", void 0), customElements.get("luzmo-color-area") || customElements.define("luzmo-color-area", p);
+//#endregion
+export { p as t };

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

package/components/color-controller-G2_v2xSl.js

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

package/components/color-field/color-field.d.ts

@@ -20,6 +20,7 @@ export declare class LuzmoColorField extends LuzmoTextFieldBase {
     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,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 t=require("../base-CBCg3yyw.cjs"),u=require("../color-controller-_ZwyhvaU.cjs"),h=require("../text-field-BTkr42k4.cjs"),d=":host{position:relative}";var c=Object.defineProperty,a=(i,e,l,v)=>{for(var o=void 0,s=i.length-1,n;s>=0;s--)(n=i[s])&&(o=n(e,l,o)||o);return o&&c(e,l,o),o};class r extends h.LuzmoTextFieldBase{constructor(){super(),this.viewColor=!1,this.noAlphaChannel=!1,this._value="",this.colorController=new u.ColorController(this)}static get styles(){return[...super.styles,t.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?t.x`
-          <luzmo-color-handle
-            size="m"
-            color=${this.colorController.getColor("srgb").toString()}
-          ></luzmo-color-handle>
-        `:t.x``}getColorValue(){return this.valid?this.colorController.getColor("srgb").toString():""}render(){return this.viewColor&&Promise.resolve().then(()=>require("../color-handle/index.cjs")),t.x` ${super.render()} ${this.renderColorHandle()} `}checkValidity(){let e=super.checkValidity();if(this.value){const l=this.colorController.validateColorString(this.value);this.valid=e=l.isValid&&(!this.noAlphaChannel||l.alpha===1),this.invalid=!e,this.valid&&(this.colorController.color=this.value)}else this.valid=this.invalid=!1;return e}}a([t.n({type:Boolean,attribute:"view-color"})],r.prototype,"viewColor");a([t.n({type:Boolean,attribute:"no-alpha-channel"})],r.prototype,"noAlphaChannel");customElements.get("luzmo-color-field")||customElements.define("luzmo-color-field",r);exports.LuzmoColorField=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../color-field-D7_7z2A2.cjs`);exports.LuzmoColorField=e.t;