@luzmo/lucero 2.5.1 → 2.6.0

package/components/{color-slider-0JzdSRTy.js → color-slider-DNd_ZrD6.js}

@@ -16,25 +16,26 @@
  * SOFTWARE.
  * */
 import "./tokens.js";
-import { t as e } from "./decorate-CkCg3wfh.js";
-import { t } from "./focusable-DuP0-Kuy.js";
-import { t as n } from "./language-resolution-BaKYDD1a.js";
-import "./color-handle-BEDQ1RcS.js";
-import { t as r } from "./streaming-listener-CtcMpYfS.js";
-import { html as i, unsafeCSS as a } from "lit";
-import { property as o, query as s } from "lit/decorators.js";
-import { ifDefined as c } from "lit/directives/if-defined.js";
-import { styleMap as l } from "lit/directives/style-map.js";
-import { TinyColor as u } from "@ctrl/tinycolor";
-//#region src/utils/reactive-controllers/color.ts
-var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/, p = /(^hs[v|l]a?\()\d{1,3}/, m = (e, t) => t ? e.toHexString() : e.toHex(), h = class {
+import { t as e } from "./decorate-CpKsOs9z.js";
+import { t } from "./focusable-xjv79E40.js";
+import { t as n } from "./language-resolution-7rc0khIK.js";
+import "./color-handle-Ya92rdpA.js";
+import { n as r, t as i } from "./interaction-BpCLJ1OV.js";
+import { t as a } from "./streaming-listener-DyS3scAi.js";
+import { html as o, unsafeCSS as s } from "lit";
+import { property as c, query as l } from "lit/decorators.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { styleMap as d } from "lit/directives/style-map.js";
+import { TinyColor as f } from "@ctrl/tinycolor";
+// src/utils/reactive-controllers/color.ts
+var p = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, m = /(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/, h = /(^hs[v|l]a?\()\d{1,3}/, g = (e, t) => t ? e.toHexString() : e.toHex(), _ = class {
 	setColorProcess(e, t, n, r) {
 		this.maintains === "hue" ? this.setColorMaintainHue(e, t, n, r) : this.maintains === "saturation" && this.setColorMaintainSaturation(e, t, n, r);
 	}
 	setColorMaintainHue(e, t, n, r) {
 		let { h: i, s: a, v: o, a: s } = this._color.toHsv(), c;
 		if (r && n.startsWith("hs")) {
-			let e = d.exec(t);
+			let e = p.exec(t);
 			if (e !== null) {
 				let [, t] = e;
 				c = Number(t);
@@ -53,7 +54,7 @@ var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\
 	setColorMaintainSaturation(e, t, n, r) {
 		let { a: i } = this._color.toHsv();
 		if (r && n.startsWith("hs")) {
-			let e = d.exec(t);
+			let e = p.exec(t);
 			if (e !== null) {
 				let [, t, n] = e;
 				this.hue = Number(t), this.saturation = Number(n);
@@ -75,7 +76,7 @@ var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\
 			name: (e) => e.toName() || e.toRgbString(),
 			hsl: (e, t) => {
 				if (this.maintains === "hue") {
-					if (t) return e.toHslString().replace(p, `$1${this.hue}`);
+					if (t) return e.toHslString().replace(h, `$1${this.hue}`);
 					let { s: n, l: r, a: i } = e.toHsl();
 					return {
 						h: this.hue,
@@ -84,7 +85,7 @@ var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\
 						a: i
 					};
 				}
-				if (t) return e.toHslString().replace(f, `$1${this.hue}$2${this.saturation}`);
+				if (t) return e.toHslString().replace(m, `$1${this.hue}$2${this.saturation}`);
 				let { s: n, l: r, a: i } = e.toHsl();
 				return {
 					h: this.hue,
@@ -95,7 +96,7 @@ var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\
 			},
 			hsv: (e, t) => {
 				if (this.maintains === "hue") {
-					if (t) return e.toHsvString().replace(p, `$1${this.hue}`);
+					if (t) return e.toHsvString().replace(h, `$1${this.hue}`);
 					let { s: n, v: r, a: i } = e.toHsv();
 					return {
 						h: this.hue,
@@ -104,7 +105,7 @@ var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\
 						a: i
 					};
 				}
-				if (t) return e.toHsvString().replace(f, `$1${this.hue}$2${this.saturation}`);
+				if (t) return e.toHsvString().replace(m, `$1${this.hue}$2${this.saturation}`);
 				let { s: n, v: r, a: i } = e.toHsv();
 				return {
 					h: this.hue,
@@ -113,15 +114,15 @@ var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\
 					a: i
 				};
 			},
-			hex: m,
-			hex3: m,
-			hex4: m,
-			hex6: m
-		}, this._color = new u({
+			hex: g,
+			hex3: g,
+			hex4: g,
+			hex6: g
+		}, this._color = new f({
 			h: 0,
 			s: 1,
 			v: 1
-		}), this._previousColor = new u({
+		}), this._previousColor = new f({
 			h: 0,
 			s: 1,
 			v: 1
@@ -131,7 +132,7 @@ var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\
 		}, this.host = e, this.applyColorToState = t, this.extractColorFromState = n, this.maintains = r || this.maintains;
 	}
 	applyColorFromState() {
-		this._color = new u(this.extractColorFromState(this));
+		this._color = new f(this.extractColorFromState(this));
 	}
 	get hue() {
 		return this._hue;
@@ -140,7 +141,7 @@ var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\
 		let t = Math.min(360, Math.max(0, e));
 		if (t === this.hue) return;
 		let n = this.hue, { s: r, v: i, a } = this._color.toHsv();
-		this._color = new u({
+		this._color = new f({
 			h: t,
 			s: r,
 			v: i,
@@ -154,7 +155,7 @@ var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\
 		let t = Math.min(1, Math.max(0, e));
 		if (t === this.opacity) return;
 		let n = this.opacity, { h: r, s: i, v: a } = this._color.toHsv();
-		this._color = new u({
+		this._color = new f({
 			h: r,
 			s: i,
 			v: a,
@@ -172,7 +173,7 @@ var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\
 		/* c8 ignore next 3 */
 		if (e === this.color) return;
 		let t = this._color;
-		this._color = new u(e);
+		this._color = new f(e);
 		let n = this._color.format, r = typeof e == "string" || e instanceof String;
 		n.startsWith("hex") && (r = e.startsWith("#")), this._format = {
 			format: n,
@@ -196,13 +197,13 @@ var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\
 	restorePreviousColor() {
 		this.setColor(this._previousColor);
 	}
-}, g = ".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}:host{--luzmo-color-slider-gradient-fallback:red 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%;touch-action:none}:host([vertical]) .handle{inset-block-start:unset;inset-block-end:0}:host([vertical]) .slider{appearance:slider-vertical}:host(:focus){outline:none}.gradient{overflow:hidden}::slotted(*){width:100%;height:100%}@media (forced-colors:active){:host{--highcontrast-color-slider-border-color:CanvasText;--highcontrast-color-slider-border-color-disabled:GrayText;--highcontrast-color-slider-background-color-disabled:Canvas;forced-color-adjust:none}}:host{--luzmo-color-handle-hitarea-border-radius:var(--luzmo-color-slider-handle-hitarea-border-radius,0px);min-inline-size:var(--luzmo-color-slider-minimum-length,80px);inline-size:var(--luzmo-color-slider-length,192px);block-size:var(--luzmo-color-slider-control-track-width,24px);-webkit-user-select:none;user-select:none;cursor:default;display:block;position:relative}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([disabled]) .gradient{display:none}:host([vertical]){min-block-size:var(--luzmo-color-slider-vertical-minimum-height,var(--luzmo-color-slider-minimum-length,80px));block-size:var(--luzmo-color-slider-vertical-height,var(--luzmo-color-slider-length,192px));min-inline-size:0;inline-size:var(--luzmo-color-slider-vertical-control-track-width,var(--luzmo-color-slider-control-track-height,24px));display:inline-block}:host([vertical]) .handle{inset-inline-start:50%}.handle{inset-block-start:50%;inset-inline-start:0}.checkerboard{--luzmo-color-slider-border-color-local:var(--highcontrast-color-slider-border-color,var(--luzmo-color-slider-border-color,var(--luzmo-border-color)))}.checkerboard:before{content:\"\";z-index:1;box-shadow:inset 0 0 0 var(--luzmo-color-slider-border-width,var(--luzmo-border-width)) var(--luzmo-color-slider-border-color-local);border-radius:var(--luzmo-color-slider-border-rounding,var(--luzmo-border-radius-s));position:absolute;inset:0}:host([disabled]) .checkerboard{--luzmo-color-slider-border-color-local:var(--highcontrast-color-slider-border-color-disabled,var(--luzmo-color-slider-border-color-disabled,var(--luzmo-dimmed-color)));background:var(--highcontrast-color-slider-background-color-disabled,var(--luzmo-color-slider-background-color-disabled,var(--luzmo-dimmed-color)))}.checkerboard,.gradient{border-radius:var(--luzmo-color-slider-border-rounding,var(--luzmo-border-radius-s));block-size:100%;inline-size:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.gradient: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)){transform:scaleX(-1)}.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}", _ = class extends t {
+}, v = ".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}:host{--luzmo-color-slider-gradient-fallback:red 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%;touch-action:none}:host([vertical]) .handle{inset-block-start:unset;inset-block-end:0}:host([vertical]) .slider{appearance:slider-vertical}:host(:focus){outline:none}.gradient{overflow:hidden}::slotted(*){width:100%;height:100%}@media (forced-colors:active){:host{--highcontrast-color-slider-border-color:CanvasText;--highcontrast-color-slider-border-color-disabled:GrayText;--highcontrast-color-slider-background-color-disabled:Canvas;forced-color-adjust:none}}:host{--luzmo-color-handle-hitarea-border-radius:var(--luzmo-color-slider-handle-hitarea-border-radius,0px);min-inline-size:var(--luzmo-color-slider-minimum-length,80px);inline-size:var(--luzmo-color-slider-length,192px);block-size:var(--luzmo-color-slider-control-track-width,24px);-webkit-user-select:none;user-select:none;cursor:default;display:block;position:relative}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([disabled]) .gradient{display:none}:host([vertical]){min-block-size:var(--luzmo-color-slider-vertical-minimum-height,var(--luzmo-color-slider-minimum-length,80px));block-size:var(--luzmo-color-slider-vertical-height,var(--luzmo-color-slider-length,192px));min-inline-size:0;inline-size:var(--luzmo-color-slider-vertical-control-track-width,var(--luzmo-color-slider-control-track-height,24px));display:inline-block}:host([vertical]) .handle{inset-inline-start:50%}.handle{inset-block-start:50%;inset-inline-start:0}.checkerboard{--luzmo-color-slider-border-color-local:var(--highcontrast-color-slider-border-color,var(--luzmo-color-slider-border-color,var(--luzmo-border-color)))}.checkerboard:before{content:\"\";z-index:1;box-shadow:inset 0 0 0 var(--luzmo-color-slider-border-width,var(--luzmo-border-width)) var(--luzmo-color-slider-border-color-local);border-radius:var(--luzmo-color-slider-border-rounding,var(--luzmo-border-radius-s));position:absolute;inset:0}:host([disabled]) .checkerboard{--luzmo-color-slider-border-color-local:var(--highcontrast-color-slider-border-color-disabled,var(--luzmo-color-slider-border-color-disabled,var(--luzmo-dimmed-color)));background:var(--highcontrast-color-slider-background-color-disabled,var(--luzmo-color-slider-background-color-disabled,var(--luzmo-dimmed-color)))}.checkerboard,.gradient{border-radius:var(--luzmo-color-slider-border-rounding,var(--luzmo-border-radius-s));block-size:100%;inline-size:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.gradient: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)){transform:scaleX(-1)}.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}", y = class extends t {
 	constructor(...e) {
-		super(...e), this.disabled = !1, this.focused = !1, this.label = "hue", this.vertical = !1, this.languageResolver = new n(this), this.colorController = new h(this, {
+		super(...e), this.disabled = !1, this.focused = !1, this.label = "hue", this.vertical = !1, this.languageResolver = new n(this), this.colorController = new _(this, {
 			/* c8 ignore next 3 */
 			applyColorToState: () => {
 				if (this.mode === "opacity") {
-					let e = new u(this.colorController.color);
+					let e = new f(this.colorController.color);
 					this.sliderHandlePosition = 100 * e.getAlpha();
 				} else this.sliderHandlePosition = 100 * (this.colorController.hue / 360);
 			},
@@ -214,10 +215,10 @@ var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\
 				h: this.value
 			},
 			maintains: "saturation"
-		}), this.sliderHandlePosition = 0, this.step = 1, this.isLTR = !0, this._altered = 0, this._pointerDown = !1;
+		}), this._interaction = new i(this, { value: () => this.value }), this.sliderHandlePosition = 0, this.step = 1, this.isLTR = !0, this._altered = 0, this._pointerDown = !1;
 	}
 	static get styles() {
-		return [a(g)];
+		return [s(v)];
 	}
 	get value() {
 		return this.mode === "opacity" ? this.colorController.opacity : this.colorController.hue;
@@ -263,16 +264,23 @@ var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\
 				break;
 			default: return;
 		}
-		e.preventDefault();
+		if (e.preventDefault(), this.disabled || !this._interaction.keyDown(t)) return;
+		if (this.disabled) {
+			this._interaction.end();
+			return;
+		}
 		let r = 100 / (this.mode === "opacity" ? 100 : 360);
-		this.sliderHandlePosition = Math.min(100, Math.max(0, this.sliderHandlePosition + n * r)), this.value = this.mode === "opacity" ? Math.min(1, Math.max(0, this.value + n / 100)) : Math.min(360, Math.max(0, this.value + n)), this.colorController.applyColorFromState(), n !== 0 && (this.dispatchEvent(new Event("input", {
+		this.sliderHandlePosition = Math.min(100, Math.max(0, this.sliderHandlePosition + n * r)), this.value = this.mode === "opacity" ? Math.min(1, Math.max(0, this.value + n / 100)) : Math.min(360, Math.max(0, this.value + n)), this.colorController.applyColorFromState(), n !== 0 && this._interaction.commit(() => this.dispatchEvent(new Event("input", {
 			bubbles: !0,
 			composed: !0
-		})), this.dispatchEvent(new Event("change", {
+		})), () => this.dispatchEvent(new Event("change", {
 			bubbles: !0,
 			composed: !0
 		})));
 	}
+	handleKeyup(e) {
+		this._interaction.keyUp(e.key);
+	}
 	handleInput(e) {
 		let { valueAsNumber: t } = e.target;
 		this.value = t, this.sliderHandlePosition = 100 * (this.mode === "opacity" ? this.value : this.value / 360), this.colorController.applyColorFromState();
@@ -293,28 +301,50 @@ var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\
 		this.focused = !0;
 	}
 	handleBlur() {
-		this._pointerDown || (this.altered = 0, this.focused = !1);
+		this._interaction.endKeyboard(), !this._pointerDown && (this.altered = 0, this.focused = !1);
 	}
 	handlePointerdown(e) {
-		if (e.button !== 0) {
+		if (e.button !== 0 || !this._interaction.start(r(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) {
-		this.sliderHandlePosition = this.calculateHandlePosition(e), this.value = (this.mode === "opacity" ? 1 : 360) * (this.sliderHandlePosition / 100), this.colorController.applyColorFromState(), this.dispatchEvent(new Event("input", {
+		this._pointerDown && (this.sliderHandlePosition = this.calculateHandlePosition(e), this.value = (this.mode === "opacity" ? 1 : 360) * (this.sliderHandlePosition / 100), this.colorController.applyColorFromState(), this.dispatchEvent(new Event("input", {
 			bubbles: !0,
 			composed: !0,
 			cancelable: !0
-		}));
+		})));
 	}
 	handlePointerup(e) {
-		this._pointerDown = !1, e.target.releasePointerCapture(e.pointerId), this.dispatchEvent(new Event("change", {
+		this._pointerDown && this._finishPointer(() => {
+			this.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), this.dispatchEvent(new Event("change", {
 			bubbles: !0,
 			composed: !0,
 			cancelable: !0
-		})) || this.colorController.restorePreviousColor(), this.focus(), e.pointerType === "mouse" && (this.focused = !1);
+		})) || this.colorController.restorePreviousColor(), e?.(), this._interaction.end();
+	}
+	endInteraction() {
+		this._pointerDown ? this._finishPointer() : this._interaction.end();
 	}
 	calculateHandlePosition(e) {
 		/* c8 ignore next 3 */
@@ -330,10 +360,10 @@ var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\
 	}
 	get getColorSliderStyle() {
 		let e = this.vertical ? "top" : "right";
-		return this.mode === "opacity" ? { background: `linear-gradient(to ${e}, transparent, ${new u(this.colorController.color).setAlpha(1).toRgbString()})` } : { background: `linear-gradient(to ${e}, var(--luzmo-color-slider-gradient, var(--luzmo-color-slider-gradient-fallback)))` };
+		return this.mode === "opacity" ? { background: `linear-gradient(to ${e}, transparent, ${new f(this.colorController.color).setAlpha(1).toRgbString()})` } : { background: `linear-gradient(to ${e}, var(--luzmo-color-slider-gradient, var(--luzmo-color-slider-gradient-fallback)))` };
 	}
 	render() {
-		return i`
+		return o`
       <div
         class="opacity-checkerboard checkerboard"
         role="presentation"
@@ -342,26 +372,27 @@ var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\
         <div
           class="gradient"
           role="presentation"
-          style=${l(this.getColorSliderStyle)}
+          style=${d(this.getColorSliderStyle)}
         >
           <slot name="gradient"></slot>
         </div>
       </div>
       <luzmo-color-handle
-        tabindex=${c(this.focused ? void 0 : "0")}
+        tabindex=${u(this.focused ? void 0 : "0")}
         @focus=${this.forwardFocus}
         ?focused=${this.focused}
         class="handle"
         color=${this.mode === "opacity" ? this.color : "hsl(" + this.value + ", 100%, 50%)"}
         ?disabled=${this.disabled}
         style=${this.handlePositionStyles}
-        ${r({
+        ${a({
 			start: ["pointerdown", this.handlePointerdown],
 			streamInside: ["pointermove", this.handlePointermove],
 			end: [[
 				"pointerup",
 				"pointercancel",
-				"pointerleave"
+				"pointerleave",
+				"lostpointercapture"
 			], this.handlePointerup]
 		})}
       ></luzmo-color-handle>
@@ -370,8 +401,8 @@ var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\
         class="slider"
         min="0"
         max=${this.mode === "opacity" ? "100" : "360"}
-        aria-orientation=${c(this.vertical ? "vertical" : void 0)}
-        orient=${c(this.vertical ? "vertical" : void 0)}
+        aria-orientation=${u(this.vertical ? "vertical" : void 0)}
+        orient=${u(this.vertical ? "vertical" : void 0)}
         step=${this.step}
         aria-label=${this.label}
         .value=${String(this.mode === "opacity" ? this.value * 100 : this.value)}
@@ -385,39 +416,41 @@ var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\
         @input=${this.handleInput}
         @change=${this.handleChange}
         @keydown=${this.handleKeydown}
+        @keyup=${this.handleKeyup}
       />
     `;
 	}
+	disconnectedCallback() {
+		this._pointerDown = !1, this._capturedPointer = void 0, super.disconnectedCallback();
+	}
 	firstUpdated(e) {
 		super.firstUpdated(e), this.boundingClientRect = this.getBoundingClientRect(), this.addEventListener("focus", this.handleFocus), this.addEventListener("blur", this.handleBlur);
 	}
 	updated(e) {
-		e.has("mode") && (this.handle.style.insetInlineStart = "", this.handle.style.insetBlockEnd = "", this.mode === "opacity" && (this.colorController.color = new u(this.colorController.color).toRgbString(), this.handle.style.insetInlineStart = 100 * this.colorController.opacity + "%"));
+		e.has("mode") && (this.handle.style.insetInlineStart = "", this.handle.style.insetBlockEnd = "", this.mode === "opacity" && (this.colorController.color = new f(this.colorController.color).toRgbString(), this.handle.style.insetInlineStart = 100 * this.colorController.opacity + "%"));
 	}
 };
-//#endregion
-//#region src/components/color-slider/index.ts
-e([o({
+// src/components/color-slider/index.ts
+e([c({
 	type: String,
 	reflect: !0
-})], _.prototype, "dir", void 0), e([o({
+})], y.prototype, "dir", void 0), e([c({
 	type: String,
 	reflect: !0
-})], _.prototype, "mode", void 0), e([o({
+})], y.prototype, "mode", void 0), e([c({
 	type: Boolean,
 	reflect: !0
-})], _.prototype, "disabled", void 0), e([o({
+})], y.prototype, "disabled", void 0), e([c({
 	type: Boolean,
 	reflect: !0
-})], _.prototype, "focused", void 0), e([s(".handle")], _.prototype, "handle", void 0), e([o({ type: String })], _.prototype, "label", void 0), e([o({
+})], y.prototype, "focused", void 0), e([l(".handle")], y.prototype, "handle", void 0), e([c({ type: String })], y.prototype, "label", void 0), e([c({
 	type: Boolean,
 	reflect: !0
-})], _.prototype, "vertical", void 0), e([o({ type: Number })], _.prototype, "value", null), e([o({
+})], y.prototype, "vertical", void 0), e([c({ type: Number })], y.prototype, "value", null), e([c({
 	type: Number,
 	reflect: !0
-})], _.prototype, "sliderHandlePosition", void 0), e([o({ type: String })], _.prototype, "color", null), e([o({ type: Number })], _.prototype, "step", void 0), e([o({
+})], y.prototype, "sliderHandlePosition", void 0), e([c({ type: String })], y.prototype, "color", null), e([c({ type: Number })], y.prototype, "step", void 0), e([c({
 	type: Boolean,
 	attribute: "is-ltr"
-})], _.prototype, "isLTR", void 0), e([s("input")], _.prototype, "input", void 0), customElements.get("luzmo-color-slider") || customElements.define("luzmo-color-slider", _);
-//#endregion
-export { _ as t };
+})], y.prototype, "isLTR", void 0), e([l("input")], y.prototype, "input", void 0), customElements.get("luzmo-color-slider") || customElements.define("luzmo-color-slider", y);
+export { y as t };

package/components/color-slider-IYBn2DL7.cjs

@@ -0,0 +1,58 @@
+/*! * 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.
+ * */
+require("./tokens.cjs");const e=require("./decorate-SO02l0A6.cjs"),t=require("./focusable-BIHTrJd6.cjs"),n=require("./language-resolution-B7D3hQ6_.cjs");require("./color-handle-hJ7Kblh4.cjs");const r=require("./interaction-BjXWVy_C.cjs"),i=require("./streaming-listener-BzGZUHkj.cjs");let a=require("lit"),o=require("lit/decorators.js"),s=require("lit/directives/if-defined.js"),c=require("lit/directives/style-map.js"),l=require("@ctrl/tinycolor");var u=/^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/,d=/(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/,f=/(^hs[v|l]a?\()\d{1,3}/,p=(e,t)=>t?e.toHexString():e.toHex(),m=class{setColorProcess(e,t,n,r){this.maintains===`hue`?this.setColorMaintainHue(e,t,n,r):this.maintains===`saturation`&&this.setColorMaintainSaturation(e,t,n,r)}setColorMaintainHue(e,t,n,r){let{h:i,s:a,v:o,a:s}=this._color.toHsv(),c;if(r&&n.startsWith(`hs`)){let e=u.exec(t);if(e!==null){let[,t]=e;c=Number(t)}}else if(!r&&n.startsWith(`hs`)){let t=e.originalInput;c=Object.values(t)[0]}this.hue=c||i,this.opacity=s??1,this.applyColorToState({h:i,s:a,v:o,a:s})}setColorMaintainSaturation(e,t,n,r){let{a:i}=this._color.toHsv();if(r&&n.startsWith(`hs`)){let e=u.exec(t);if(e!==null){let[,t,n]=e;this.hue=Number(t),this.saturation=Number(n)}}else if(!r&&n.startsWith(`hs`)){let t=e.originalInput,n=Object.values(t);this.hue=n[0],this.saturation=n[1]}else{let{h:t}=e.toHsv();this.hue=t}this.opacity=i??1,this.applyColorToState(e.toHsv())}constructor(e,{applyColorToState:t,extractColorFromState:n,maintains:r}){this.maintains=`hue`,this._hue=0,this._opacity=1,this.getColorProcesses={rgb:(e,t)=>t?e.toRgbString():e.toRgb(),prgb:(e,t)=>t?e.toPercentageRgbString():e.toPercentageRgb(),hex8:(e,t)=>t?e.toHex8String():e.toHex8(),name:e=>e.toName()||e.toRgbString(),hsl:(e,t)=>{if(this.maintains===`hue`){if(t)return e.toHslString().replace(f,`$1${this.hue}`);let{s:n,l:r,a:i}=e.toHsl();return{h:this.hue,s:n,l:r,a:i}}if(t)return e.toHslString().replace(d,`$1${this.hue}$2${this.saturation}`);let{s:n,l:r,a:i}=e.toHsl();return{h:this.hue,s:n,l:r,a:i}},hsv:(e,t)=>{if(this.maintains===`hue`){if(t)return e.toHsvString().replace(f,`$1${this.hue}`);let{s:n,v:r,a:i}=e.toHsv();return{h:this.hue,s:n,v:r,a:i}}if(t)return e.toHsvString().replace(d,`$1${this.hue}$2${this.saturation}`);let{s:n,v:r,a:i}=e.toHsv();return{h:this.hue,s:n,v:r,a:i}},hex:p,hex3:p,hex4:p,hex6:p},this._color=new l.TinyColor({h:0,s:1,v:1}),this._previousColor=new l.TinyColor({h:0,s:1,v:1}),this._format={format:``,isString:!1},this.host=e,this.applyColorToState=t,this.extractColorFromState=n,this.maintains=r||this.maintains}applyColorFromState(){this._color=new l.TinyColor(this.extractColorFromState(this))}get hue(){return this._hue}set hue(e){let t=Math.min(360,Math.max(0,e));if(t===this.hue)return;let n=this.hue,{s:r,v:i,a}=this._color.toHsv();this._color=new l.TinyColor({h:t,s:r,v:i,a}),this._hue=t,this.host.requestUpdate(`hue`,n)}get opacity(){return this._opacity}set opacity(e){let t=Math.min(1,Math.max(0,e));if(t===this.opacity)return;let n=this.opacity,{h:r,s:i,v:a}=this._color.toHsv();this._color=new l.TinyColor({h:r,s:i,v:a,a:t}),this._opacity=t,this.host.requestUpdate(`opacity`,n)}get value(){return this.color}get color(){return this.getColorProcesses[this._format.format||`hex`](this._color,this._format.isString)}set color(e){if(e===this.color)return;let t=this._color;this._color=new l.TinyColor(e);let n=this._color.format,r=typeof e==`string`||e instanceof String;n.startsWith(`hex`)&&(r=e.startsWith(`#`)),this._format={format:n,isString:r},this.setColorProcess(this._color,e,n,r),this.host.requestUpdate(`color`,t)}getColor(e){return this._color[{hsl:`toHsl`}[e]]()}setColor(e){this._color=e;let t=typeof this._color.originalInput==`string`||this._color.originalInput instanceof String;this.setColorProcess(this._color,e,this._color.format,t)}getHslString(){return this._color.toHslString()}savePreviousColor(){this._previousColor=this._color.clone()}restorePreviousColor(){this.setColor(this._previousColor)}},h=`.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}:host{--luzmo-color-slider-gradient-fallback:red 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%;touch-action:none}:host([vertical]) .handle{inset-block-start:unset;inset-block-end:0}:host([vertical]) .slider{appearance:slider-vertical}:host(:focus){outline:none}.gradient{overflow:hidden}::slotted(*){width:100%;height:100%}@media (forced-colors:active){:host{--highcontrast-color-slider-border-color:CanvasText;--highcontrast-color-slider-border-color-disabled:GrayText;--highcontrast-color-slider-background-color-disabled:Canvas;forced-color-adjust:none}}:host{--luzmo-color-handle-hitarea-border-radius:var(--luzmo-color-slider-handle-hitarea-border-radius,0px);min-inline-size:var(--luzmo-color-slider-minimum-length,80px);inline-size:var(--luzmo-color-slider-length,192px);block-size:var(--luzmo-color-slider-control-track-width,24px);-webkit-user-select:none;user-select:none;cursor:default;display:block;position:relative}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([disabled]) .gradient{display:none}:host([vertical]){min-block-size:var(--luzmo-color-slider-vertical-minimum-height,var(--luzmo-color-slider-minimum-length,80px));block-size:var(--luzmo-color-slider-vertical-height,var(--luzmo-color-slider-length,192px));min-inline-size:0;inline-size:var(--luzmo-color-slider-vertical-control-track-width,var(--luzmo-color-slider-control-track-height,24px));display:inline-block}:host([vertical]) .handle{inset-inline-start:50%}.handle{inset-block-start:50%;inset-inline-start:0}.checkerboard{--luzmo-color-slider-border-color-local:var(--highcontrast-color-slider-border-color,var(--luzmo-color-slider-border-color,var(--luzmo-border-color)))}.checkerboard:before{content:"";z-index:1;box-shadow:inset 0 0 0 var(--luzmo-color-slider-border-width,var(--luzmo-border-width)) var(--luzmo-color-slider-border-color-local);border-radius:var(--luzmo-color-slider-border-rounding,var(--luzmo-border-radius-s));position:absolute;inset:0}:host([disabled]) .checkerboard{--luzmo-color-slider-border-color-local:var(--highcontrast-color-slider-border-color-disabled,var(--luzmo-color-slider-border-color-disabled,var(--luzmo-dimmed-color)));background:var(--highcontrast-color-slider-background-color-disabled,var(--luzmo-color-slider-background-color-disabled,var(--luzmo-dimmed-color)))}.checkerboard,.gradient{border-radius:var(--luzmo-color-slider-border-rounding,var(--luzmo-border-radius-s));block-size:100%;inline-size:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.gradient: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)){transform:scaleX(-1)}.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}`,g=class extends t.t{constructor(...e){super(...e),this.disabled=!1,this.focused=!1,this.label=`hue`,this.vertical=!1,this.languageResolver=new n.t(this),this.colorController=new m(this,{applyColorToState:()=>{if(this.mode===`opacity`){let e=new l.TinyColor(this.colorController.color);this.sliderHandlePosition=100*e.getAlpha()}else this.sliderHandlePosition=100*(this.colorController.hue/360)},extractColorFromState:e=>this.mode===`opacity`?{...e.getColor(`hsl`),a:this.value}:{...e.getColor(`hsl`),h:this.value},maintains:`saturation`}),this._interaction=new r.t(this,{value:()=>this.value}),this.sliderHandlePosition=0,this.step=1,this.isLTR=!0,this._altered=0,this._pointerDown=!1}static get styles(){return[(0,a.unsafeCSS)(h)]}get value(){return this.mode===`opacity`?this.colorController.opacity:this.colorController.hue}set value(e){this.mode===`opacity`?this.colorController.opacity=e:this.colorController.hue=e}get color(){return this.colorController.color}set color(e){this.colorController.color=e}get altered(){return this._altered}set altered(e){this._altered=e,this.step=Math.max(1,this.altered*10)}get focusElement(){return this.input}handleKeydown(e){let{key:t}=e;this.focused=!0,this.altered=[e.shiftKey,e.ctrlKey,e.altKey].filter(e=>!!e).length;let n=0;switch(t){case`ArrowUp`:n=this.step;break;case`ArrowDown`:n=-this.step;break;case`ArrowLeft`:n=this.step*(this.isLTR?-1:1);break;case`ArrowRight`:n=this.step*(this.isLTR?1:-1);break;default:return}if(e.preventDefault(),this.disabled||!this._interaction.keyDown(t))return;if(this.disabled){this._interaction.end();return}let r=100/(this.mode===`opacity`?100:360);this.sliderHandlePosition=Math.min(100,Math.max(0,this.sliderHandlePosition+n*r)),this.value=this.mode===`opacity`?Math.min(1,Math.max(0,this.value+n/100)):Math.min(360,Math.max(0,this.value+n)),this.colorController.applyColorFromState(),n!==0&&this._interaction.commit(()=>this.dispatchEvent(new Event(`input`,{bubbles:!0,composed:!0})),()=>this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0})))}handleKeyup(e){this._interaction.keyUp(e.key)}handleInput(e){let{valueAsNumber:t}=e.target;this.value=t,this.sliderHandlePosition=100*(this.mode===`opacity`?this.value:this.value/360),this.colorController.applyColorFromState()}handleChange(e){this.handleInput(e),this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0}))}focus(e={}){super.focus(e),this.forwardFocus()}forwardFocus(){this.input.focus()}handleFocus(){this.focused=!0}handleBlur(){this._interaction.endKeyboard(),!this._pointerDown&&(this.altered=0,this.focused=!1)}handlePointerdown(e){if(e.button!==0||!this._interaction.start(r.n(e))){e.preventDefault();return}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){this._pointerDown&&(this.sliderHandlePosition=this.calculateHandlePosition(e),this.value=(this.mode===`opacity`?1:360)*(this.sliderHandlePosition/100),this.colorController.applyColorFromState(),this.dispatchEvent(new Event(`input`,{bubbles:!0,composed:!0,cancelable:!0})))}handlePointerup(e){this._pointerDown&&this._finishPointer(()=>{this.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),this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0,cancelable:!0}))||this.colorController.restorePreviousColor(),e?.(),this._interaction.end()}endInteraction(){this._pointerDown?this._finishPointer():this._interaction.end()}calculateHandlePosition(e){if(!this.boundingClientRect)return this.sliderHandlePosition;let t=this.boundingClientRect,n=this.vertical?t.top:t.left,r=this.vertical?e.clientY:e.clientX,i=this.vertical?t.height:t.width,a=Math.max(0,Math.min(1,(r-n)/i));return this.vertical||!this.isLTR?100-100*a:100*a}handleGradientPointerdown(e){e.button===0&&(e.stopPropagation(),e.preventDefault(),this.handle.dispatchEvent(new PointerEvent(`pointerdown`,e)),this.handlePointermove(e))}get handlePositionStyles(){return`${this.vertical?`inset-block-end`:`inset-inline-start`}: ${this.sliderHandlePosition}%`}get getColorSliderStyle(){let e=this.vertical?`top`:`right`;return this.mode===`opacity`?{background:`linear-gradient(to ${e}, transparent, ${new l.TinyColor(this.colorController.color).setAlpha(1).toRgbString()})`}:{background:`linear-gradient(to ${e}, var(--luzmo-color-slider-gradient, var(--luzmo-color-slider-gradient-fallback)))`}}render(){return a.html`
+      <div
+        class="opacity-checkerboard checkerboard"
+        role="presentation"
+        @pointerdown=${this.handleGradientPointerdown}
+      >
+        <div
+          class="gradient"
+          role="presentation"
+          style=${(0,c.styleMap)(this.getColorSliderStyle)}
+        >
+          <slot name="gradient"></slot>
+        </div>
+      </div>
+      <luzmo-color-handle
+        tabindex=${(0,s.ifDefined)(this.focused?void 0:`0`)}
+        @focus=${this.forwardFocus}
+        ?focused=${this.focused}
+        class="handle"
+        color=${this.mode===`opacity`?this.color:`hsl(`+this.value+`, 100%, 50%)`}
+        ?disabled=${this.disabled}
+        style=${this.handlePositionStyles}
+        ${i.t({start:[`pointerdown`,this.handlePointerdown],streamInside:[`pointermove`,this.handlePointermove],end:[[`pointerup`,`pointercancel`,`pointerleave`,`lostpointercapture`],this.handlePointerup]})}
+      ></luzmo-color-handle>
+      <input
+        type="range"
+        class="slider"
+        min="0"
+        max=${this.mode===`opacity`?`100`:`360`}
+        aria-orientation=${(0,s.ifDefined)(this.vertical?`vertical`:void 0)}
+        orient=${(0,s.ifDefined)(this.vertical?`vertical`:void 0)}
+        step=${this.step}
+        aria-label=${this.label}
+        .value=${String(this.mode===`opacity`?this.value*100:this.value)}
+        aria-valuetext=${`${new Intl.NumberFormat(this.languageResolver.language,{maximumFractionDigits:0,minimumIntegerDigits:1,style:`unit`,unit:this.mode===`opacity`?`percent`:`degree`,unitDisplay:`narrow`}).format(this.mode===`opacity`?this.value*100:this.value)}`}
+        @input=${this.handleInput}
+        @change=${this.handleChange}
+        @keydown=${this.handleKeydown}
+        @keyup=${this.handleKeyup}
+      />
+    `}disconnectedCallback(){this._pointerDown=!1,this._capturedPointer=void 0,super.disconnectedCallback()}firstUpdated(e){super.firstUpdated(e),this.boundingClientRect=this.getBoundingClientRect(),this.addEventListener(`focus`,this.handleFocus),this.addEventListener(`blur`,this.handleBlur)}updated(e){e.has(`mode`)&&(this.handle.style.insetInlineStart=``,this.handle.style.insetBlockEnd=``,this.mode===`opacity`&&(this.colorController.color=new l.TinyColor(this.colorController.color).toRgbString(),this.handle.style.insetInlineStart=100*this.colorController.opacity+`%`))}};e.t([(0,o.property)({type:String,reflect:!0})],g.prototype,`dir`,void 0),e.t([(0,o.property)({type:String,reflect:!0})],g.prototype,`mode`,void 0),e.t([(0,o.property)({type:Boolean,reflect:!0})],g.prototype,`disabled`,void 0),e.t([(0,o.property)({type:Boolean,reflect:!0})],g.prototype,`focused`,void 0),e.t([(0,o.query)(`.handle`)],g.prototype,`handle`,void 0),e.t([(0,o.property)({type:String})],g.prototype,`label`,void 0),e.t([(0,o.property)({type:Boolean,reflect:!0})],g.prototype,`vertical`,void 0),e.t([(0,o.property)({type:Number})],g.prototype,`value`,null),e.t([(0,o.property)({type:Number,reflect:!0})],g.prototype,`sliderHandlePosition`,void 0),e.t([(0,o.property)({type:String})],g.prototype,`color`,null),e.t([(0,o.property)({type:Number})],g.prototype,`step`,void 0),e.t([(0,o.property)({type:Boolean,attribute:`is-ltr`})],g.prototype,`isLTR`,void 0),e.t([(0,o.query)(`input`)],g.prototype,`input`,void 0),customElements.get(`luzmo-color-slider`)||customElements.define(`luzmo-color-slider`,g),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return g}});

package/components/{condition-attribute-with-id-BdnTdWKz.js → condition-attribute-with-id-v1wjKZc3.js}

@@ -15,7 +15,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-//#region src/utils/condition-attribute-with-id.ts
+// src/utils/condition-attribute-with-id.ts
 function e(e, t, n) {
 	let r = e.getAttribute(t), i = r ? r.split(/\s+/) : [];
 	i = i.filter((e) => !n.includes(e)), i.length > 0 ? e.setAttribute(t, i.join(" ")) : e.removeAttribute(t);
@@ -24,5 +24,4 @@ function t(t, n, r) {
 	let i = Array.isArray(r) ? r : [r], a = t.getAttribute(n), o = a ? a.split(/\s+/) : [];
 	return i.every((e) => o.includes(e)) ? () => {} : (o.push(...i), t.setAttribute(n, o.join(" ")), () => e(t, n, i));
 }
-//#endregion
 export { e as n, t };

package/components/date-range-picker/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("../date-range-picker-CLfEEYkE.cjs");exports.LuzmoDateRangePicker=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../tokens.cjs");const e=require("../date-range-picker-DyJdcFiA.cjs");exports.LuzmoDateRangePicker=e.t;

package/components/date-range-picker/index.js

@@ -16,5 +16,4 @@
  * SOFTWARE.
  * */
 import "../tokens.js";
-import { t as e } from "../date-range-picker-5SDPe2fQ.js";
-export { e as LuzmoDateRangePicker };
+export { t as LuzmoDateRangePicker } from "../date-range-picker-CoCz3uDz.js";

package/components/{date-range-picker-5SDPe2fQ.js → date-range-picker-CoCz3uDz.js}

@@ -16,17 +16,17 @@
  * SOFTWARE.
  * */
 import "./tokens.js";
-import { t as e } from "./decorate-CkCg3wfh.js";
-import { n as t, t as n } from "./sized-mixin-DzQTebN-.js";
-import { t as r } from "./focusable-DuP0-Kuy.js";
-import "./icon-CsJZMhIm.js";
-import "./popover-DC8tkee-.js";
-import "./overlay-DpHIYJtd.js";
-import "./calendar-BNGwCJsG.js";
-import { t as i } from "./manage-help-text-ByLb0QYX.js";
-import { t as a } from "./text-field.module-BHhBReKL.js";
-import "./picker-button-CJQJshbo.js";
-import { a as o, c as s, f as c, i as l, l as u, n as d, o as f, p, r as m, s as h, t as g, u as _ } from "./segments-factory-BCRi1NKb.js";
+import { t as e } from "./decorate-CpKsOs9z.js";
+import { n as t, t as n } from "./sized-mixin-BmxIAuoH.js";
+import { t as r } from "./focusable-xjv79E40.js";
+import "./icon-DADJww_a.js";
+import "./popover-CWrRLzOL.js";
+import "./overlay-D_Xfq92b.js";
+import "./calendar-D4x5gp_0.js";
+import { t as i } from "./manage-help-text-CFUaqINN.js";
+import { t as a } from "./text-field.module-hEHhPVFf.js";
+import "./picker-button-BhfY9gyk.js";
+import { a as o, c as s, f as c, i as l, l as u, n as d, o as f, p, r as m, s as h, t as g, u as _ } from "./segments-factory-B_IBjpdp.js";
 import { html as v, nothing as y, unsafeCSS as b } from "lit";
 import { property as x, query as S, state as C } from "lit/decorators.js";
 import { luzmoAlert as w, luzmoCalendar as T } from "@luzmo/icons";
@@ -35,10 +35,9 @@ import { ifDefined as D } from "lit/directives/if-defined.js";
 import { classMap as O } from "lit/directives/class-map.js";
 import { DateFormatter as k, getLocalTimeZone as A, isSameMonth as j, now as M, parseDate as N, parseDateTime as P, startOfMonth as F, toCalendarDate as I, today as L } from "@internationalized/date";
 import { NumberParser as R } from "@internationalized/number";
-//#region src/components/date-range-picker/date-range-picker.module.scss?inline
+// src/components/date-range-picker/date-range-picker.module.scss?inline
 var z = ":host{font-family:var(--luzmo-font-family);--date-range-picker-border-radius:var(--luzmo-date-range-picker-border-radius,var(--luzmo-border-radius));--date-range-picker-border-width:var(--luzmo-border-width);--date-range-picker-button-border-color:var(--luzmo-date-range-picker-pickerbutton-border-color,var(--luzmo-border-color));--date-range-picker-button-border-color-focus:var(--luzmo-date-range-picker-pickerbutton-border-color-focus,var(--luzmo-primary));--date-range-picker-button-border-color-invalid:var(--luzmo-date-range-picker-pickerbutton-border-color-invalid,var(--luzmo-negative-color));--date-range-picker-dash-color:var(--luzmo-date-range-picker-dash-color,var(--luzmo-font-color));--date-range-picker-dash-font-size:var(--luzmo-date-range-picker-dash-font-size,var(--luzmo-font-size));--date-range-picker-focus-ring-color:var(--luzmo-date-range-picker-focus-ring-color,var(--luzmo-indicator-color));--date-range-picker-focus-ring-gap:var(--luzmo-date-range-picker-focus-ring-gap,0px);--date-range-picker-focus-ring-width:var(--luzmo-date-range-picker-focus-ring-width,var(--luzmo-border-width));--date-range-picker-focus-animation:var(--luzmo-date-range-picker-focus-animation,var(--luzmo-animation-duration));--date-range-picker-calendar-padding:var(--luzmo-date-range-picker-calendar-padding,var(--luzmo-spacing-4));--luzmo-text-field-width:var(--luzmo-date-range-picker-width,var(--date-range-picker-width));border-radius:var(--date-range-picker-border-radius);flex-flow:row;max-inline-size:100%;display:inline-flex;position:relative}:host([disabled]) luzmo-picker-button{cursor:default}:host([disabled]){--luzmo-date-range-picker-dash-color:var(--luzmo-date-range-picker-dash-color-disabled,var(--luzmo-font-color-disabled))}:host([disabled]) .luzmo-DatePicker-rangeDash{background-color:var(--luzmo-text-field-background-color-disabled,var(--luzmo-background-color-disabled));border-block-color:#0000}:host([readonly]) .luzmo-DatePicker-rangeDash{background-color:initial;border-block-color:#0000}:host([invalid]:not([quiet])) .range-wrapper:after{border-color:var(--date-range-picker-button-border-color-invalid)}:host([invalid]:not([quiet])) .range-wrapper .input,:host([invalid]:not([quiet])) .range-wrapper .input:read-only{border-color:#0000}:host([invalid]:not([quiet])) .luzmo-DatePicker-rangeDash{background-color:#0000;border-block-color:#0000}:host(:not([quiet],[disabled])){--luzmo-picker-button-border-color:var(--date-range-picker-button-border-color)}:host([focused]),:host([focused]:not([quiet],[disabled])){--luzmo-picker-button-border-color:var(--date-range-picker-button-border-color-focus)}:host([invalid]:not([quiet],[disabled])){--luzmo-picker-button-border-color:var(--date-range-picker-button-border-color-invalid)}.range-wrapper{border-radius:var(--date-range-picker-border-radius);flex-flow:row;flex:1;align-items:stretch;inline-size:100%;min-inline-size:0;display:inline-flex;position:relative}.range-wrapper:after{pointer-events:none;content:\"\";border:var(--date-range-picker-focus-ring-width) solid transparent;border-radius:var(--date-range-picker-border-radius);transition:border-color var(--date-range-picker-focus-animation) ease-in-out;position:absolute;inset:0}:host([focused]) .range-wrapper:not(.luzmo-DatePicker--quiet):after{border-color:var(--date-range-picker-focus-ring-color)}:host([focused]) .range-wrapper:not(.luzmo-DatePicker--quiet) #text-field:after{display:none}:host([focused]) .range-wrapper .input,:host([focused]) .range-wrapper .input:read-only,:host([focused]) .range-wrapper #text-field .input,:host([focused]) .range-wrapper #text-field:hover .input{border-color:var(--date-range-picker-focus-ring-color);outline:none}:host([focused]) .range-wrapper .luzmo-DatePicker-rangeDash{border-block-color:var(--date-range-picker-focus-ring-color)}:host .input:read-only{border-color:var(--luzmo-date-range-picker-border-color,var(--luzmo-border-color))}:host(:not([quiet],[readonly],[disabled])) .input:read-only{background-color:var(--luzmo-text-field-background-color,var(--luzmo-background-color))}:host([disabled]:not([quiet])) .input:read-only{background-color:var(--luzmo-text-field-background-color-disabled,var(--luzmo-background-color-disabled))}.input.luzmo-DatePicker-startField{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.input.luzmo-DatePicker-endField{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.luzmo-DatePicker-rangeDash{color:var(--date-range-picker-dash-color);font-size:var(--date-range-picker-dash-font-size);flex:initial;z-index:1;background-color:var(--luzmo-text-field-background-color,var(--luzmo-background-color,#fff));border-block:var(--date-range-picker-border-width) solid var(--luzmo-border-color,#ccc);transition:border-block-color var(--luzmo-text-field-animation-duration,var(--luzmo-animation-duration)) ease-in-out;align-items:center;display:flex}.luzmo-DatePicker-rangeDash:before{content:\"→\";margin-inline:var(--luzmo-spacing-2,4px);text-align:center;display:inline-block}luzmo-picker-button{cursor:pointer;z-index:2;position:absolute;inset-inline-end:0}:host([quiet]) .luzmo-DatePicker-rangeDash{background-color:#0000;border-block-start-width:0;border-inline-width:0;border-radius:0}:host([quiet]) .range-wrapper:after{display:none}:host([quiet][focused]) .range-wrapper:after{border-color:#0000;border-block-end-color:var(--date-range-picker-focus-ring-color);border-radius:0;display:block;inset-block-end:0}:host([quiet]) luzmo-picker-button{inline-size:auto}:host([quiet]) luzmo-picker-button:not(:disabled,.is-open){--luzmo-picker-button-background-color:transparent}@media (hover:hover){:host(:hover:not([focused],[disabled],[invalid],[readonly])){--luzmo-picker-button-border-color:var(--highcontrast-text-field-border-color-hover,var(--luzmo-text-field-border-color-hover,rgba(var(--luzmo-primary-rgb), .3)))}:host(:hover:not([focused],[disabled],[invalid],[readonly])) .range-wrapper #text-field .input{border-color:var(--highcontrast-text-field-border-color-hover,var(--luzmo-text-field-border-color-hover,rgba(var(--luzmo-primary-rgb), .3)))}:host(:hover:not([focused],[disabled],[invalid],[readonly])) .luzmo-DatePicker-rangeDash{border-block-color:var(--highcontrast-text-field-border-color-hover,var(--luzmo-text-field-border-color-hover,rgba(var(--luzmo-primary-rgb), .3)))}:host([focused]:hover:not([disabled],[invalid],[readonly])) .luzmo-DatePicker-rangeDash{border-block-color:var(--highcontrast-text-field-border-color-focus-hover,var(--luzmo-text-field-border-color-focus-hover,var(--luzmo-primary)))}}@media (forced-colors:active){:host{--date-range-picker-dash-color:CanvasText;--date-range-picker-focus-ring-color:Highlight}:host([disabled]){--date-range-picker-dash-color:GrayText}}:host{--date-range-picker-calendar-padding:var(--luzmo-spacing-4);--date-range-picker-icon-size:18px;--date-range-picker-dash-font-size:var(--luzmo-font-size);--date-range-picker-width:auto;--text-field-focus-indicator-color:var(--luzmo-background-color-highlight)}:host([size=s]){--date-range-picker-calendar-padding:var(--luzmo-spacing-3);--date-range-picker-icon-size:16px;--date-range-picker-dash-font-size:var(--luzmo-font-size-s)}:host([size=m]){--date-range-picker-calendar-padding:var(--luzmo-spacing-4);--date-range-picker-icon-size:18px;--date-range-picker-dash-font-size:var(--luzmo-font-size-m)}:host([size=l]){--date-range-picker-calendar-padding:var(--luzmo-spacing-5);--date-range-picker-icon-size:20px;--date-range-picker-dash-font-size:var(--luzmo-font-size-l)}:host([size=xl]){--date-range-picker-calendar-padding:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--date-range-picker-icon-size:22px;--date-range-picker-dash-font-size:var(--luzmo-font-size-xl)}:host{--picker-button-size:var(--luzmo-text-field-height,var(--text-field-height));--input-spacing:var(--luzmo-text-field-spacing-inline,var(--text-field-spacing-inline));--input-border-width:var(--luzmo-text-field-border-width,var(--luzmo-border-width));--status-icon-size:var(--luzmo-text-field-icon-size-invalid,var(--text-field-icon-size-invalid));flex-wrap:wrap}:host #text-field{flex:auto;inline-size:auto;min-inline-size:0;display:inline-block}:host #text-field .input,:host([quiet]) #text-field .input,:host([invalid]) #text-field .input{inline-size:100%}:host #text-field:last-of-type .input{padding-inline-end:calc(var(--picker-button-size) + var(--input-spacing) - var(--input-border-width))}:host([invalid]) .input.luzmo-DatePicker-startField{padding-inline-end:calc(var(--input-spacing) - var(--input-border-width))}:host([invalid]) #text-field:last-of-type .input{padding-inline-end:calc(var(--picker-button-size) + var(--status-icon-size) + 2 * var(--luzmo-text-field-icon-spacing-inline-end-invalid,var(--text-field-icon-spacing-inline-end-invalid)))}:host([invalid]) .range-wrapper .icon{z-index:3;pointer-events:none;font-size:var(--luzmo-text-field-icon-size-invalid,var(--text-field-icon-size-invalid));color:var(--luzmo-negative-color);justify-content:center;align-items:center;display:flex;position:absolute;inset-block-start:var(--luzmo-text-field-icon-spacing-block-invalid,var(--text-field-icon-spacing-block-invalid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-invalid,var(--text-field-icon-spacing-block-invalid));inset-inline-end:calc(var(--picker-button-size) + var(--luzmo-text-field-icon-spacing-inline-end-invalid,var(--text-field-icon-spacing-inline-end-invalid)))}luzmo-picker-button:focus-visible{outline:none}luzmo-popover{overflow-y:auto}luzmo-popover .popover-content{padding:var(--luzmo-date-range-picker-calendar-padding,var(--date-range-picker-calendar-padding))}.input-content{scrollbar-width:none;align-items:center;height:100%;line-height:normal;display:flex;overflow:auto hidden}.input-content::-webkit-scrollbar{width:0;height:0;display:none}.literal-segment,.editable-segment{color:var(--luzmo-date-range-picker-font-color-default,var(--luzmo-font-color));display:inline-block}.editable-segment{font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap;caret-color:#0000;outline:none;padding:0 .15em}[dir=ltr] .editable-segment{text-align:start}.literal-segment{white-space:pre;-webkit-user-select:none;user-select:none}.is-placeholder,.is-placeholder+.literal-segment{color:var(--luzmo-font-color-disabled)}.editable-segment:focus-visible{color:var(--luzmo-date-range-picker-segment-text-color-focus,var(--luzmo-font-color));background-color:var(--highcontrast-text-field-focus-indicator-color,var(--luzmo-text-field-focus-indicator-color,var(--text-field-focus-indicator-color)))}.editable-segment::selection{background-color:#0000}.calendar-layout,.calendar-layout--dual .calendars-row{gap:var(--luzmo-spacing-4,16px);flex-direction:row;display:flex}.calendar-container{flex-shrink:0}.defined-ranges{gap:var(--luzmo-spacing-1,2px);border-inline-start:var(--luzmo-border-width,1px) solid var(--luzmo-border-color,#e0e0e0);flex-direction:column;min-inline-size:120px;padding-inline-start:var(--luzmo-spacing-4,16px);display:flex}.defined-range-item{inline-size:100%;padding:var(--luzmo-spacing-2,4px) var(--luzmo-spacing-3,8px);border-radius:var(--luzmo-border-radius,4px);color:var(--luzmo-font-color,inherit);font-family:var(--luzmo-font-family,inherit);font-size:var(--luzmo-font-size,inherit);text-align:start;cursor:pointer;transition:background-color var(--luzmo-animation-duration,.13s) ease;white-space:nowrap;background:0 0;border:none;display:block}.defined-range-item:hover{background-color:var(--luzmo-background-color-hover,#0000000d)}.defined-range-item:focus-visible{outline:var(--luzmo-indicator-width,2px) solid var(--luzmo-indicator-color,var(--luzmo-primary));outline-offset:var(--luzmo-indicator-gap,2px)}.defined-range-item[aria-selected=true]{background-color:var(--luzmo-background-color-highlight,#00000014);font-weight:var(--bold-font-weight,bold)}";
-//#endregion
-//#region src/components/date-range-picker/date-range-picker.ts
+// src/components/date-range-picker/date-range-picker.ts
 function B() {
 	let e = /* @__PURE__ */ new Date();
 	e.setHours(0, 0, 0, 0);
@@ -228,7 +227,7 @@ var H = class extends i(t(r, { validSizes: Object.values(n) })) {
     `;
 	}
 	renderDualCalendar() {
-		return (!this._leftMonth || !this._rightMonth) && this.initCalendarMonths(), v`
+		return this._leftMonth && this._rightMonth || this.initCalendarMonths(), v`
       <div class="calendar-layout calendar-layout--dual">
         <div class="calendars-row">
           <div class="calendar-container">
@@ -407,13 +406,11 @@ var H = class extends i(t(r, { validSizes: Object.values(n) })) {
 				this.commitValue();
 				break;
 			case "Backspace":
-			case "Delete":
-				if (e.preventDefault(), this.getSegments(t).getByType(r)?.value === void 0) this.focusSegment(n, "previous");
-				else {
-					let e = new o(this.getModifierParams(t));
-					this.setSegmentsForField(t, e.modify(r)), this.updateValueFromSegments(t), this.dispatchInputEvent();
-				}
-				break;
+			case "Delete": if (e.preventDefault(), this.getSegments(t).getByType(r)?.value === void 0) this.focusSegment(n, "previous");
+			else {
+				let e = new o(this.getModifierParams(t));
+				this.setSegmentsForField(t, e.modify(r)), this.updateValueFromSegments(t), this.dispatchInputEvent();
+			}
 		}
 	}
 	handleInput(e, t) {
@@ -513,10 +510,14 @@ var H = class extends i(t(r, { validSizes: Object.values(n) })) {
 				}
 			}
 		}
-		return typeof this.dateSeparator == "string" && this.dateSeparator && (i.all?.[1]?.type === p.Literal && (i.all[1].formatted = this.dateSeparator), i.all?.[3]?.type === p.Literal && (i.all[3].formatted = this.dateSeparator)), this.precision === c.Day ? new f(i.all.filter((e) => {
-			let t = e.type;
-			return t === p.Year || t === p.Month || t === p.Day || t === p.Literal;
-		})) : i;
+		if (typeof this.dateSeparator == "string" && this.dateSeparator && (i.all?.[1]?.type === p.Literal && (i.all[1].formatted = this.dateSeparator), i.all?.[3]?.type === p.Literal && (i.all[3].formatted = this.dateSeparator)), this.precision === c.Day) {
+			let e = i.all.filter((e) => {
+				let t = e.type;
+				return t === p.Year || t === p.Month || t === p.Day || t === p.Literal;
+			});
+			return new f(e);
+		}
+		return i;
 	}
 	setNumberParser() {
 		this.numberParser = new R(this._language, { maximumFractionDigits: 0 });
@@ -559,8 +560,7 @@ var H = class extends i(t(r, { validSizes: Object.values(n) })) {
 		}
 	}
 };
-//#endregion
-//#region src/components/date-range-picker/index.ts
+// src/components/date-range-picker/index.ts
 e([x({
 	type: String,
 	attribute: "start-date",
@@ -616,5 +616,4 @@ e([x({
 	type: Boolean,
 	reflect: !0
 })], H.prototype, "focused", void 0), e([C()], H.prototype, "_startDate", void 0), e([C()], H.prototype, "_endDate", void 0), e([C()], H.prototype, "startSegments", void 0), e([C()], H.prototype, "endSegments", void 0), e([C()], H.prototype, "isCalendarOpen", void 0), e([C()], H.prototype, "_leftMonth", void 0), e([C()], H.prototype, "_rightMonth", void 0), e([S(".editable-segment")], H.prototype, "firstEditableSegment", void 0), e([S(".range-wrapper")], H.prototype, "rangeWrapper", void 0), customElements.get("luzmo-date-range-picker") || customElements.define("luzmo-date-range-picker", H);
-//#endregion
 export { H as t };