@luzmo/lucero 2.5.1 → 2.6.0

package/components/{color-area-lbg8wwZG.js → color-area-GGa8KJyd.js}

@@ -16,19 +16,23 @@
  * SOFTWARE.
  * */
 import "./tokens.js";
-import { n as e, t } from "./decorate-CkCg3wfh.js";
-import { t as n } from "./language-resolution-BaKYDD1a.js";
-import { a as r, t as i } from "./platform-Ce9pNsR9.js";
-import "./color-handle-BEDQ1RcS.js";
-import { t as a } from "./color-controller-Rg_Zl0sT.js";
-import { t as o } from "./streaming-listener-CtcMpYfS.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 {
+import { n as e, t } from "./decorate-CpKsOs9z.js";
+import { t as n } from "./language-resolution-7rc0khIK.js";
+import { a as r, t as i } from "./platform-CDW-WdXN.js";
+import "./color-handle-Ya92rdpA.js";
+import { n as a, t as o } from "./interaction-BpCLJ1OV.js";
+import { t as s } from "./color-controller-CauSxC_r.js";
+import { t as c } from "./streaming-listener-DyS3scAi.js";
+import { html as l, unsafeCSS as u } from "lit";
+import { property as d, query as f } from "lit/decorators.js";
+import { ifDefined as p } from "lit/directives/if-defined.js";
+// src/components/color-area/color-area.module.scss?inline
+var m = "@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}", h = 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 n(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, this.resizeRafId = 0, this.handleResize = (e) => {
+		super(...e), this.disabled = !1, this.focused = !1, this.labelX = "saturation", this.labelY = "luminosity", this.isLTR = !0, this.languageResolver = new n(this), this.colorController = new s(this, { manageAs: "hsv" }), this._interaction = new o(this, {
+			value: () => [this.x, this.y],
+			isEqual: (e, t) => e[0] === t[0] && e[1] === t[1]
+		}), this.activeAxis = "x", this.step = .01, this.altered = 0, this.activeKeys = /* @__PURE__ */ new Set(), this._valueChanged = !1, this._pointerDown = !1, this.resizeRafId = 0, this.handleResize = (e) => {
 			let t = e.at(-1);
 			t && (this.resizeRafId && cancelAnimationFrame(this.resizeRafId), this.resizeRafId = requestAnimationFrame(() => {
 				this.resizeRafId = 0, this.boundingClientRect = t.contentRect, this.requestUpdate();
@@ -36,7 +40,7 @@ var f = "@media (forced-colors:active){:host{--highcontrast-color-area-border-co
 		};
 	}
 	static get styles() {
-		return [c(f)];
+		return [u(m)];
 	}
 	get hue() {
 		return this.colorController.hue;
@@ -79,15 +83,22 @@ var f = "@media (forced-colors:active){:host{--highcontrast-color-area-border-co
 		this.focused = !0, this._valueChanged = !1;
 	}
 	handleBlur() {
-		this._pointerDown || (this.altered = 0, this.focused = !1, this._valueChanged = !1);
+		this.activeKeys.clear(), this._interaction.endKeyboard(), !this._pointerDown && (this.altered = 0, this.focused = !1, this._valueChanged = !1);
 	}
 	handleKeydown(e) {
 		let { code: t } = e;
-		this.focused = !0, this.altered = [
+		if (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());
+		].filter((e) => !!e).length, t.search("Arrow") === 0 || t.search("Page") === 0 || t.search("Home") === 0 || t.search("End") === 0) {
+			if (e.preventDefault(), this.disabled || !this._interaction.keyDown(t)) return;
+			if (this.disabled) {
+				this._interaction.end();
+				return;
+			}
+			this.activeKeys.add(t), this.handleKeypress();
+		}
 	}
 	handleKeypress() {
 		let e = 0, t = 0, n = Math.max(this.step, this.altered * 5 * this.step);
@@ -114,25 +125,23 @@ var f = "@media (forced-colors:active){:host{--highcontrast-color-area-border-co
 				case "Home":
 					e = n * (this.isLTR ? -10 : 10);
 					break;
-				case "End":
-					e = n * (this.isLTR ? 10 : -10);
-					break;
-				/* c8 ignore next 2 */
-				default: break;
+				case "End": e = n * (this.isLTR ? 10 : -10);
 			}
-		}), 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", {
+		}), 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._interaction.commit(() => this.dispatchEvent(new Event("input", {
 			bubbles: !0,
 			composed: !0
-		})), this.dispatchEvent(new Event("change", {
-			bubbles: !0,
-			composed: !0,
-			cancelable: !0
-		})) || this.colorController.restorePreviousColor());
+		})), () => {
+			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);
+		this.activeKeys.delete(t), this._interaction.keyUp(t);
 	}
 	handleInput(e) {
 		let { valueAsNumber: t, name: n } = e.target;
@@ -146,13 +155,26 @@ var f = "@media (forced-colors:active){:host{--highcontrast-color-area-border-co
 		}));
 	}
 	handlePointerdown(e) {
-		if (e.button !== 0) {
+		if (e.button !== 0 || !this._interaction.start(a(e))) {
 			e.preventDefault();
 			return;
 		}
-		this._pointerDown = !0, this.colorController.savePreviousColor(), this.boundingClientRect = this.getBoundingClientRect(), e.target.setPointerCapture(e.pointerId), e.pointerType === "mouse" && (this.focused = !0);
+		if (this.disabled) {
+			this._interaction.end(), e.preventDefault();
+			return;
+		}
+		this._pointerDown = !0, this.colorController.savePreviousColor(), this.boundingClientRect = this.getBoundingClientRect();
+		let t = e.target;
+		try {
+			t.setPointerCapture(e.pointerId), this._capturedPointer = {
+				target: t,
+				pointerId: e.pointerId
+			};
+		} catch {}
+		e.pointerType === "mouse" && (this.focused = !0);
 	}
 	handlePointermove(e) {
+		if (!this._pointerDown) return;
 		let [t, n] = this.calculateHandlePosition(e);
 		this._valueChanged = !1, this.x = t, this.y = n, this.dispatchEvent(new Event("input", {
 			bubbles: !0,
@@ -161,13 +183,23 @@ var f = "@media (forced-colors:active){:host{--highcontrast-color-area-border-co
 		}));
 	}
 	handlePointerup(e) {
-		e.preventDefault(), this._pointerDown = !1, e.target.releasePointerCapture(e.pointerId);
-		let t = this.dispatchEvent(new Event("change", {
+		e.preventDefault(), this._pointerDown && this._finishPointer(() => {
+			this.inputX.focus(), e.pointerType === "mouse" && (this.focused = !1);
+		});
+	}
+	_finishPointer(e) {
+		this._pointerDown = !1;
+		let t = this._capturedPointer;
+		this._capturedPointer = void 0, t?.target.hasPointerCapture(t.pointerId) && t.target.releasePointerCapture(t.pointerId);
+		let n = this.dispatchEvent(new Event("change", {
 			bubbles: !0,
 			composed: !0,
 			cancelable: !0
 		}));
-		this.inputX.focus(), e.pointerType === "mouse" && (this.focused = !1), t || this.colorController.restorePreviousColor();
+		e?.(), n || this.colorController.restorePreviousColor(), this._interaction.end();
+	}
+	endInteraction() {
+		this._pointerDown ? this._finishPointer() : (this.activeKeys.clear(), this._interaction.end());
 	}
 	calculateHandlePosition(e) {
 		/* c8 ignore next 3 */
@@ -179,14 +211,14 @@ var f = "@media (forced-colors:active){:host{--highcontrast-color-area-border-co
 		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 || {}, n = i() || r(), a = "Color Picker", c = d(n ? void 0 : "2d slider"), l = this.labelX, u = this.labelY, f = new Intl.NumberFormat(this.languageResolver.language, {
+		let { width: e = 0, height: t = 0 } = this.boundingClientRect || {}, n = i() || r(), a = "Color Picker", o = p(n ? void 0 : "2d slider"), s = this.labelX, u = this.labelY, d = new Intl.NumberFormat(this.languageResolver.language, {
 			style: "percent",
 			unitDisplay: "narrow"
-		}).format(this.x), p = new Intl.NumberFormat(this.languageResolver.language, {
+		}).format(this.x), f = 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`
+		return l`
       <div
         @pointerdown=${this.handleAreaPointerdown}
         class="gradient"
@@ -196,37 +228,38 @@ var f = "@media (forced-colors:active){:host{--highcontrast-color-area-border-co
       </div>
 
       <luzmo-color-handle
-        tabindex=${d(this.focused ? void 0 : "0")}
+        tabindex=${p(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({
+        ${c({
 			start: ["pointerdown", this.handlePointerdown],
 			streamInside: ["pointermove", this.handlePointermove],
 			end: [[
 				"pointerup",
 				"pointercancel",
-				"pointerleave"
+				"pointerleave",
+				"lostpointercapture"
 			], this.handlePointerup]
 		})}
       ></luzmo-color-handle>
 
       <fieldset
         class="fieldset"
-        aria-label=${d(n ? a : void 0)}
+        aria-label=${p(n ? a : void 0)}
       >
         <div role="presentation">
           <input
             type="range"
             class="slider"
             name="x"
-            aria-label=${n ? l : `${l} ${a}`}
-            aria-roledescription=${c}
+            aria-label=${n ? s : `${s} ${a}`}
+            aria-roledescription=${o}
             aria-orientation="horizontal"
-            aria-valuetext=${n ? f : `${f}, ${l}${this._valueChanged ? "" : `, ${p}, ${u}`}`}
+            aria-valuetext=${n ? d : `${d}, ${s}${this._valueChanged ? "" : `, ${f}, ${u}`}`}
             min="0"
             max="1"
             step=${this.step}
@@ -242,9 +275,9 @@ var f = "@media (forced-colors:active){:host{--highcontrast-color-area-border-co
             class="slider"
             name="y"
             aria-label=${n ? u : `${u} ${a}`}
-            aria-roledescription=${c}
+            aria-roledescription=${o}
             aria-orientation="vertical"
-            aria-valuetext=${n ? p : `${p}, ${u}${this._valueChanged ? "" : `, ${f}, ${l}`}`}
+            aria-valuetext=${n ? f : `${f}, ${u}${this._valueChanged ? "" : `, ${d}, ${s}`}`}
             orient="vertical"
             min="0"
             max="1"
@@ -275,29 +308,27 @@ var f = "@media (forced-colors:active){:host{--highcontrast-color-area-border-co
 		super.connectedCallback(), !this.observer && window.ResizeObserver && (this.observer = new window.ResizeObserver(this.handleResize)), this.observer?.observe(this);
 	}
 	disconnectedCallback() {
-		this.resizeRafId &&= (cancelAnimationFrame(this.resizeRafId), 0), this.observer?.disconnect(), this.observer = void 0, super.disconnectedCallback();
+		this._pointerDown = !1, this._capturedPointer = void 0, this.activeKeys.clear(), this.resizeRafId &&= (cancelAnimationFrame(this.resizeRafId), 0), this.observer?.disconnect(), this.observer = void 0, super.disconnectedCallback();
 	}
 };
-//#endregion
-//#region src/components/color-area/index.ts
-t([l({
+// src/components/color-area/index.ts
+t([d({
 	type: String,
 	reflect: !0
-})], p.prototype, "dir", void 0), t([l({
+})], h.prototype, "dir", void 0), t([d({
 	type: Boolean,
 	reflect: !0
-})], p.prototype, "disabled", void 0), t([l({
+})], h.prototype, "disabled", void 0), t([d({
 	type: Boolean,
 	reflect: !0
-})], p.prototype, "focused", void 0), t([l({
+})], h.prototype, "focused", void 0), t([d({
 	type: String,
 	attribute: "label-x"
-})], p.prototype, "labelX", void 0), t([l({
+})], h.prototype, "labelX", void 0), t([d({
 	type: String,
 	attribute: "label-y"
-})], p.prototype, "labelY", void 0), t([l({
+})], h.prototype, "labelY", void 0), t([d({
 	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 };
+})], h.prototype, "isLTR", void 0), t([f(".handle")], h.prototype, "handle", void 0), t([d({ type: Number })], h.prototype, "hue", null), t([d({ type: String })], h.prototype, "value", null), t([d({ type: String })], h.prototype, "color", null), t([d({ attribute: !1 })], h.prototype, "activeAxis", void 0), t([d({ type: Number })], h.prototype, "x", null), t([d({ type: Number })], h.prototype, "y", null), t([d({ type: Number })], h.prototype, "step", void 0), t([f("[name=\"x\"]")], h.prototype, "inputX", void 0), t([f("[name=\"y\"]")], h.prototype, "inputY", void 0), customElements.get("luzmo-color-area") || customElements.define("luzmo-color-area", h);
+export { h as t };

package/components/color-controller-BpdydwTO.cjs

@@ -0,0 +1,18 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2026 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.
+ * */
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,n)=>{let r={};for(var i in e)t(r,i,{get:e[i],enumerable:!0});return n||t(r,Symbol.toStringTag,{value:`Module`}),r},s=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},c=(n,r,o)=>(o=n==null?{}:e(i(n)),s(r||!n||!n.__esModule||!a.call(n,`default`)?t(o,`default`,{value:n,enumerable:!0}):o,n));let l=require("colorjs.io");l=c(l,1);var u=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 t;if(typeof e==`string`){let n=this.validateColorString(e);if(n.isValid){let[e,r,i]=n.coords;t=new l.default(`${n.spaceId}`,[e,r,i],n.alpha)}else try{l.default.parse(e)}catch{try{t=new l.default(`#${e}`)}catch{return}}}else if(e instanceof l.default)t=e;else if(!Array.isArray(e)){let{h:n,s:r,l:i,v:a,r:o,g:s,b:c,a:u}=e;if(n!==void 0&&r!==void 0){let e=i??a;t=new l.default(i===void 0?`hsv`:`hsl`,[Number.parseFloat(n),typeof r==`string`?Number.parseFloat(r):r*100,typeof e==`string`?Number.parseFloat(e):e*100],Number.parseFloat(u||`1`))}else o!==void 0&&s!==void 0&&c!==void 0&&(t=new l.default(`srgb`,[Number.parseFloat(o)/255,Number.parseFloat(s)/255,Number.parseFloat(c)/255],Number.parseFloat(u||`1`)))}t||=new l.default(e),this._color=this.manageAs?t.to(this.manageAs):t,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 l.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:t}={}){this._color=new l.default(`hsv`,[0,100,100],1),this.host=e,this.manageAs=t}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,"n",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return u}});

package/components/{color-controller-Rg_Zl0sT.js → color-controller-CauSxC_r.js}

@@ -16,7 +16,7 @@
  * SOFTWARE.
  * */
 import e from "colorjs.io";
-//#region src/utils/reactive-controllers/color-controller.ts
+// src/utils/reactive-controllers/color-controller.ts
 var t = class {
 	get color() {
 		return this._color;
@@ -243,5 +243,4 @@ var t = class {
 		this._color = this._previousColor;
 	}
 };
-//#endregion
 export { t };

package/components/color-field/index.cjs

@@ -15,4 +15,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../color-field-BH9x46k_.cjs");exports.LuzmoColorField=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../color-field-CN8shDl_.cjs");exports.LuzmoColorField=e.t;

package/components/color-field/index.js

@@ -16,5 +16,4 @@
  * SOFTWARE.
  * */
 import "../tokens.js";
-import { t as e } from "../color-field-C9S-Fv46.js";
-export { e as LuzmoColorField };
+export { t as LuzmoColorField } from "../color-field-CVyDNZ4b.js";

package/components/{color-field-BH9x46k_.cjs → color-field-CN8shDl_.cjs}

@@ -15,7 +15,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-const e=require("./color-controller-DbyPc33Y.cjs");require("./tokens.cjs");const t=require("./decorate-Dq34MBGe.cjs"),n=require("./text-field-3fDtTQkR.cjs");let r=require("lit"),i=require("lit/decorators.js");var a=`:host{position:relative}`,o=class extends n.n{static get styles(){return[...super.styles,(0,r.unsafeCSS)(a)]}constructor(){super(),this.viewColor=!1,this.noAlphaChannel=!1,this._value=``,this.colorController=new e.t(this)}set value(e){if(e===this.value)return;let t=this._value;this._value=e,this.requestUpdate(`value`,t)}get value(){return this._value}updated(e){super.updated(e),e.has(`noAlphaChannel`)&&this.checkValidity()}renderColorHandle(){return this.viewColor&&this.valid?r.html`
+const e=require("./color-controller-BpdydwTO.cjs");require("./tokens.cjs");const t=require("./decorate-SO02l0A6.cjs"),n=require("./text-field-BVl-HWzb.cjs");let r=require("lit"),i=require("lit/decorators.js");var a=`:host{position:relative}`,o=class extends n.n{static get styles(){return[...super.styles,(0,r.unsafeCSS)(a)]}constructor(){super(),this.viewColor=!1,this.noAlphaChannel=!1,this._value=``,this.colorController=new e.t(this)}set value(e){if(e===this.value)return;let t=this._value;this._value=e,this.requestUpdate(`value`,t)}get value(){return this._value}updated(e){super.updated(e),e.has(`noAlphaChannel`)&&this.checkValidity()}renderColorHandle(){return this.viewColor&&this.valid?r.html`
           <luzmo-color-handle
             size="m"
             color=${this.colorController.getColor(`srgb`).toString()}

package/components/{color-field-C9S-Fv46.js → color-field-CVyDNZ4b.js}

@@ -16,12 +16,12 @@
  * SOFTWARE.
  * */
 import "./tokens.js";
-import { t as e } from "./decorate-CkCg3wfh.js";
-import { t } from "./color-controller-Rg_Zl0sT.js";
-import { n } from "./text-field-CmSym2QK.js";
+import { t as e } from "./decorate-CpKsOs9z.js";
+import { t } from "./color-controller-CauSxC_r.js";
+import { n } from "./text-field-DpvP_tCP.js";
 import { html as r, unsafeCSS as i } from "lit";
 import { property as a } from "lit/decorators.js";
-//#region src/components/color-field/color-field.module.scss?inline
+// src/components/color-field/color-field.module.scss?inline
 var o = ":host{position:relative}", s = class extends n {
 	static get styles() {
 		return [...super.styles, i(o)];
@@ -63,8 +63,7 @@ var o = ":host{position:relative}", s = class extends n {
 		return e;
 	}
 };
-//#endregion
-//#region src/components/color-field/index.ts
+// src/components/color-field/index.ts
 e([a({
 	type: Boolean,
 	attribute: "view-color"
@@ -72,5 +71,4 @@ e([a({
 	type: Boolean,
 	attribute: "no-alpha-channel"
 })], s.prototype, "noAlphaChannel", void 0), customElements.get("luzmo-color-field") || customElements.define("luzmo-color-field", s);
-//#endregion
 export { s as t };

package/components/color-handle/index.cjs

@@ -15,4 +15,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../color-handle-2iFLp9FN.cjs");exports.LuzmoColorHandle=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../color-handle-hJ7Kblh4.cjs");exports.LuzmoColorHandle=e.t;

package/components/color-handle/index.js

@@ -16,5 +16,4 @@
  * SOFTWARE.
  * */
 import "../tokens.js";
-import { t as e } from "../color-handle-BEDQ1RcS.js";
-export { e as LuzmoColorHandle };
+export { t as LuzmoColorHandle } from "../color-handle-Ya92rdpA.js";

package/components/{color-handle-BEDQ1RcS.js → color-handle-Ya92rdpA.js}

@@ -16,11 +16,11 @@
  * SOFTWARE.
  * */
 import "./tokens.js";
-import { n as e, t } from "./decorate-CkCg3wfh.js";
-import "./color-loupe-CqHyyvjQ.js";
+import { n as e, t } from "./decorate-CpKsOs9z.js";
+import "./color-loupe-Bu37Uwk6.js";
 import { html as n, unsafeCSS as r } from "lit";
 import { property as i } from "lit/decorators.js";
-//#region src/components/color-handle/color-handle.module.scss?inline
+// src/components/color-handle/color-handle.module.scss?inline
 var a = ":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);background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light,#fff) 0 25%, var(--luzmo-color-loupe-checkerboard-dark,#e6e6e6) 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);box-shadow:0 0 0 var(--luzmo-color-handle-outer-border-width,1px) var(--luzmo-color-handle-outer-border-color,#0000006b);transition:all var(--luzmo-color-handle-animation-duration,0) var(--luzmo-color-handle-animation-easing,ease-in-out);border-width:var(--luzmo-color-handle-border-width,2px)!important;border-color:var(--luzmo-color-handle-border-color,#fff)!important;border-style:solid!important}: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;background:var(--highcontrast-color-handle-fill-color-disabled,var(--luzmo-color-handle-fill-color-disabled,var(--luzmo-font-color-disabled)));box-shadow:none;border-color:var(--highcontrast-color-handle-border-color-disabled,var(--luzmo-color-handle-border-color-disabled,var(--luzmo-font-color-disabled)))!important}:host([disabled]) .inner{display:none}.inner{block-size:100%;inline-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,#0000006b);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}}", o = class extends e {
 	constructor(...e) {
 		super(...e), this.disabled = !1, this.focused = !1, this.open = !1, this.color = "rgba(255, 0, 0, 0.5)";
@@ -29,10 +29,13 @@ var a = ":host{touch-action:none;transition:inline-size var(--luzmo-color-handle
 		this.styles = r(a);
 	}
 	handlePointerdown(e) {
-		e.pointerType === "touch" && (this.open = !0), this.setPointerCapture(e.pointerId);
+		e.pointerType === "touch" && (this.open = !0);
+		try {
+			this.setPointerCapture(e.pointerId);
+		} catch {}
 	}
 	handlePointerup(e) {
-		this.open = !1, this.releasePointerCapture(e.pointerId);
+		this.open = !1, this.hasPointerCapture(e.pointerId) && this.releasePointerCapture(e.pointerId);
 	}
 	render() {
 		return n`
@@ -47,8 +50,7 @@ var a = ":host{touch-action:none;transition:inline-size var(--luzmo-color-handle
 		super.firstUpdated(e), this.addEventListener("pointerdown", this.handlePointerdown), this.addEventListener("pointerup", this.handlePointerup), this.addEventListener("pointercancel", this.handlePointerup);
 	}
 };
-//#endregion
-//#region src/components/color-handle/index.ts
+// src/components/color-handle/index.ts
 t([i({
 	type: Boolean,
 	reflect: !0
@@ -59,5 +61,4 @@ t([i({
 	type: Boolean,
 	reflect: !0
 })], o.prototype, "open", void 0), t([i({ type: String })], o.prototype, "color", void 0), customElements.get("luzmo-color-handle") || customElements.define("luzmo-color-handle", o);
-//#endregion
 export { o as t };

package/components/{color-handle-2iFLp9FN.cjs → color-handle-hJ7Kblh4.cjs}

@@ -15,7 +15,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-require("./tokens.cjs");const e=require("./decorate-Dq34MBGe.cjs");require("./color-loupe-6NcLbFco.cjs");let t=require("lit"),n=require("lit/decorators.js");var r=`: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);background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light,#fff) 0 25%, var(--luzmo-color-loupe-checkerboard-dark,#e6e6e6) 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);box-shadow:0 0 0 var(--luzmo-color-handle-outer-border-width,1px) var(--luzmo-color-handle-outer-border-color,#0000006b);transition:all var(--luzmo-color-handle-animation-duration,0) var(--luzmo-color-handle-animation-easing,ease-in-out);border-width:var(--luzmo-color-handle-border-width,2px)!important;border-color:var(--luzmo-color-handle-border-color,#fff)!important;border-style:solid!important}: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;background:var(--highcontrast-color-handle-fill-color-disabled,var(--luzmo-color-handle-fill-color-disabled,var(--luzmo-font-color-disabled)));box-shadow:none;border-color:var(--highcontrast-color-handle-border-color-disabled,var(--luzmo-color-handle-border-color-disabled,var(--luzmo-font-color-disabled)))!important}:host([disabled]) .inner{display:none}.inner{block-size:100%;inline-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,#0000006b);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}}`,i=class extends e.n{constructor(...e){super(...e),this.disabled=!1,this.focused=!1,this.open=!1,this.color=`rgba(255, 0, 0, 0.5)`}static{this.styles=(0,t.unsafeCSS)(r)}handlePointerdown(e){e.pointerType===`touch`&&(this.open=!0),this.setPointerCapture(e.pointerId)}handlePointerup(e){this.open=!1,this.releasePointerCapture(e.pointerId)}render(){return t.html`
+require("./tokens.cjs");const e=require("./decorate-SO02l0A6.cjs");require("./color-loupe-2X1bCYU9.cjs");let t=require("lit"),n=require("lit/decorators.js");var r=`: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);background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light,#fff) 0 25%, var(--luzmo-color-loupe-checkerboard-dark,#e6e6e6) 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);box-shadow:0 0 0 var(--luzmo-color-handle-outer-border-width,1px) var(--luzmo-color-handle-outer-border-color,#0000006b);transition:all var(--luzmo-color-handle-animation-duration,0) var(--luzmo-color-handle-animation-easing,ease-in-out);border-width:var(--luzmo-color-handle-border-width,2px)!important;border-color:var(--luzmo-color-handle-border-color,#fff)!important;border-style:solid!important}: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;background:var(--highcontrast-color-handle-fill-color-disabled,var(--luzmo-color-handle-fill-color-disabled,var(--luzmo-font-color-disabled)));box-shadow:none;border-color:var(--highcontrast-color-handle-border-color-disabled,var(--luzmo-color-handle-border-color-disabled,var(--luzmo-font-color-disabled)))!important}:host([disabled]) .inner{display:none}.inner{block-size:100%;inline-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,#0000006b);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}}`,i=class extends e.n{constructor(...e){super(...e),this.disabled=!1,this.focused=!1,this.open=!1,this.color=`rgba(255, 0, 0, 0.5)`}static{this.styles=(0,t.unsafeCSS)(r)}handlePointerdown(e){e.pointerType===`touch`&&(this.open=!0);try{this.setPointerCapture(e.pointerId)}catch{}}handlePointerup(e){this.open=!1,this.hasPointerCapture(e.pointerId)&&this.releasePointerCapture(e.pointerId)}render(){return t.html`
       <div class="inner" style="background-color: ${this.color}"></div>
       <luzmo-color-loupe
         color=${this.color}

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.
  * */
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../color-loupe-6NcLbFco.cjs");exports.LuzmoColorLoupe=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../color-loupe-2X1bCYU9.cjs");exports.LuzmoColorLoupe=e.t;

package/components/color-loupe/index.js

@@ -16,5 +16,4 @@
  * SOFTWARE.
  * */
 import "../tokens.js";
-import { t as e } from "../color-loupe-CqHyyvjQ.js";
-export { e as LuzmoColorLoupe };
+export { t as LuzmoColorLoupe } from "../color-loupe-Bu37Uwk6.js";

package/components/{color-loupe-6NcLbFco.cjs → color-loupe-2X1bCYU9.cjs}

@@ -15,7 +15,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-require("./tokens.cjs");const e=require("./decorate-Dq34MBGe.cjs");let t=require("lit"),n=require("lit/decorators.js");var r=`: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,var(--luzmo-shadow-color)));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)}:is(:host: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)),: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,#0000001a);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), 0)}.luzmo-color-loupe-checkerboard-pattern{fill:var(--luzmo-color-loupe-checkerboard-dark-color,#e6e6e6)}.luzmo-color-loupe-checkerboard-background{fill:var(--luzmo-color-loupe-checkerboard-light-color,#fff)}.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{background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light,#fff) 0 25%, var(--luzmo-color-loupe-checkerboard-dark,#e6e6e6) 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);block-size:100%;inline-size:100%;position:absolute;top:2px;left:2px}`,i=class extends e.n{constructor(...e){super(...e),this.open=!1,this.color=`rgba(255, 0, 0, 0.5)`}static{this.styles=(0,t.unsafeCSS)(r)}render(){return t.html`
+require("./tokens.cjs");const e=require("./decorate-SO02l0A6.cjs");let t=require("lit"),n=require("lit/decorators.js");var r=`: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,var(--luzmo-shadow-color)));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)}:is(:host: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)),: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,#0000001a);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), 0)}.luzmo-color-loupe-checkerboard-pattern{fill:var(--luzmo-color-loupe-checkerboard-dark-color,#e6e6e6)}.luzmo-color-loupe-checkerboard-background{fill:var(--luzmo-color-loupe-checkerboard-light-color,#fff)}.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{background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light,#fff) 0 25%, var(--luzmo-color-loupe-checkerboard-dark,#e6e6e6) 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);block-size:100%;inline-size:100%;position:absolute;top:2px;left:2px}`,i=class extends e.n{constructor(...e){super(...e),this.open=!1,this.color=`rgba(255, 0, 0, 0.5)`}static{this.styles=(0,t.unsafeCSS)(r)}render(){return t.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>

package/components/{color-loupe-CqHyyvjQ.js → color-loupe-Bu37Uwk6.js}

@@ -16,10 +16,10 @@
  * SOFTWARE.
  * */
 import "./tokens.js";
-import { n as e, t } from "./decorate-CkCg3wfh.js";
+import { n as e, t } from "./decorate-CpKsOs9z.js";
 import { html as n, unsafeCSS as r } from "lit";
 import { property as i } from "lit/decorators.js";
-//#region src/components/color-loupe/color-loupe.module.scss?inline
+// src/components/color-loupe/color-loupe.module.scss?inline
 var a = ":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,var(--luzmo-shadow-color)));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)}:is(:host: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)),: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,#0000001a);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), 0)}.luzmo-color-loupe-checkerboard-pattern{fill:var(--luzmo-color-loupe-checkerboard-dark-color,#e6e6e6)}.luzmo-color-loupe-checkerboard-background{fill:var(--luzmo-color-loupe-checkerboard-light-color,#fff)}.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{background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light,#fff) 0 25%, var(--luzmo-color-loupe-checkerboard-dark,#e6e6e6) 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);block-size:100%;inline-size:100%;position:absolute;top:2px;left:2px}", o = class extends e {
 	constructor(...e) {
 		super(...e), this.open = !1, this.color = "rgba(255, 0, 0, 0.5)";
@@ -69,11 +69,9 @@ var a = ":host{inline-size:var(--luzmo-color-loupe-width,48px);block-size:var(--
     `;
 	}
 };
-//#endregion
-//#region src/components/color-loupe/index.ts
+// src/components/color-loupe/index.ts
 t([i({
 	type: Boolean,
 	reflect: !0
 })], o.prototype, "open", void 0), t([i({ type: String })], o.prototype, "color", void 0), typeof customElements < "u" && !customElements.get("luzmo-color-loupe") && customElements.define("luzmo-color-loupe", o);
-//#endregion
 export { o as t };

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

@@ -16,6 +16,12 @@ declare const LuzmoColorMenu_base: typeof Focusable & {
 /**
  * @element luzmo-color-menu
  * @fires change - An alteration to the value of the Color Menu has been committed by the user.
+ * @fires {CustomEvent<InteractionEventDetail>} luzmo-interaction-start - Bubbles
+ * up from the color area or a color slider when a pointer drag or held-key
+ * interaction starts. The menu forwards it unchanged and adds none of its own.
+ * @fires {CustomEvent<InteractionEventDetail>} luzmo-interaction-end - Bubbles
+ * up from the same control when that interaction ends. Swatch picks and typed
+ * values are single `change` events without an interaction.
  */
 export declare class LuzmoColorMenu extends LuzmoColorMenu_base {
     static styles: import("lit").CSSResult;
@@ -43,6 +49,11 @@ export declare class LuzmoColorMenu extends LuzmoColorMenu_base {
     private _format;
     setColor(event: CustomEvent): void;
     private handleAreaChange;
+    /**
+     * Finishes a drag or held-key interaction in progress on the color area or a
+     * color slider as if the user released it. Does nothing otherwise.
+     */
+    endInteraction(): void;
     get focusElement(): HTMLElement;
     private handleHueSliderChange;
     private handleOpacitySliderChange;

package/components/color-menu/index.cjs

@@ -15,4 +15,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../color-menu-BYTgxLQG.cjs");exports.LuzmoColorMenu=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../color-menu-COhe5VUB.cjs");exports.LuzmoColorMenu=e.t;

package/components/color-menu/index.d.ts

@@ -5,3 +5,4 @@ declare global {
     }
 }
 export { LuzmoColorMenu } from './color-menu';
+export type { InteractionEventDetail, InteractionSource } from '../../utils/reactive-controllers/interaction';

package/components/color-menu/index.js

@@ -16,5 +16,4 @@
  * SOFTWARE.
  * */
 import "../tokens.js";
-import { t as e } from "../color-menu-qJK_clDq.js";
-export { e as LuzmoColorMenu };
+export { t as LuzmoColorMenu } from "../color-menu-Ct3f01bI.js";