@luzmo/analytics-components-kit 1.1.1 → 1.3.0

package/components/{item-option-guidelines-DNJevmVD.js → item-option-guidelines-k5DwMONo.js}

@@ -21,105 +21,107 @@ import "./tokens-6HmQYnEP.js";
 import "./base-rAte-QzM.js";
 import { t as e } from "./decorate-B2TzfnLZ.js";
 import { t } from "./localized-mixin-FPDNaZhb.js";
-import { a as n, c as r, l as i, n as a, r as o, s, t as c } from "./types-DJuS9IwG.js";
-import { t as l } from "./item-option-base-BfHciede.js";
-import { luzmoBorderDashed as u, luzmoBorderDotted as d, luzmoBorderSolid as f, luzmoPlus as p, luzmoTrashOutline as m } from "@luzmo/icons";
+import { t as n } from "./is-same-option-value-B2oyvEqT.js";
+import { t as r } from "./option-interaction-controller-B8S1N_Oo.js";
+import { a as i, c as a, l as o, n as s, r as c, s as l, t as u } from "./types-DJuS9IwG.js";
+import { t as d } from "./item-option-base-BfHciede.js";
+import { luzmoBorderDashed as f, luzmoBorderDotted as p, luzmoBorderSolid as m, luzmoPlus as h, luzmoTrashOutline as g } from "@luzmo/icons";
 import "@luzmo/lucero/action-button";
 import "@luzmo/lucero/button";
 import "@luzmo/lucero/icon";
-import { html as h, nothing as g, unsafeCSS as _ } from "lit";
-import { property as v, state as y } from "lit/decorators.js";
-import { localized as b, msg as x, str as S } from "@lit/localize";
-import { repeat as C } from "lit/directives/repeat.js";
+import { html as _, nothing as v, unsafeCSS as y } from "lit";
+import { property as b, queryAll as x, state as S } from "lit/decorators.js";
+import { localized as C, msg as w, str as T } from "@lit/localize";
+import { repeat as E } from "lit/directives/repeat.js";
 import "@luzmo/lucero/action-group";
 import "@luzmo/lucero/number-field";
 import "@luzmo/lucero/picker";
 import "@luzmo/lucero/menu";
 import "@luzmo/lucero/color-picker";
 // src/components/item-option-guidelines/helpers/guidelines-value.ts
-var w = new Set(s), T = new Set(r), E = new Set(i), D = {
+var D = new Set(l), O = new Set(a), k = new Set(o), A = {
 	solid: "0",
 	dotted: "1,2",
 	dashed: "3,3"
-}, O = (e) => typeof e == "object" && !!e && !Array.isArray(e), k = (e) => {
+}, j = (e) => typeof e == "object" && !!e && !Array.isArray(e), M = (e) => {
 	if (typeof e == "number" && Number.isFinite(e)) return e;
 	if (typeof e == "string" && e.trim() !== "") {
 		let t = Number(e);
 		return Number.isFinite(t) ? t : void 0;
 	}
-}, A = (e) => typeof e == "string" && w.has(e), j = (e) => {
-	let t = (e ?? []).filter(A);
-	return t.length > 0 ? t : [...c];
-}, M = (e) => e === "dark-edit" ? a : o, N = (e) => structuredClone(e), P = (e) => {
-	if (!O(e)) return { ...n };
-	let t = typeof e.type == "string" ? e.type.trim().toLowerCase() : "", r = T.has(t) ? t : D[t] ?? n.type, i = (typeof e.width == "number" ? String(e.width) : typeof e.width == "string" ? e.width.trim() : "").replace(/px$/i, "");
+}, N = (e) => typeof e == "string" && D.has(e), P = (e) => {
+	let t = (e ?? []).filter(N);
+	return t.length > 0 ? t : [...u];
+}, F = (e) => e === "dark-edit" ? s : c, I = (e) => structuredClone(e), ee = (e) => {
+	if (!j(e)) return { ...i };
+	let t = typeof e.type == "string" ? e.type.trim().toLowerCase() : "", n = O.has(t) ? t : A[t] ?? i.type, r = (typeof e.width == "number" ? String(e.width) : typeof e.width == "string" ? e.width.trim() : "").replace(/px$/i, "");
 	return {
-		type: r,
-		width: E.has(i) ? i : n.width
+		type: n,
+		width: k.has(r) ? r : i.width
 	};
-}, F = (e) => {
-	if (!O(e)) return;
+}, L = (e) => {
+	if (!j(e)) return;
 	let t = typeof e.type == "string" ? e.type.trim().toLowerCase() : "";
-	if (!A(t)) return;
-	let n = typeof e.color == "string" && e.color.trim() !== "" ? e.color.trim() : o;
+	if (!N(t)) return;
+	let n = typeof e.color == "string" && e.color.trim() !== "" ? e.color.trim() : c;
 	return t === "value" ? {
 		type: t,
 		color: n,
-		value: k(e.value) ?? 0
+		value: M(e.value) ?? 0
 	} : {
 		type: t,
 		color: n
 	};
-}, I = (e) => {
+}, R = (e) => {
 	let t = Array.isArray(e) ? { lines: e } : e;
-	if (!O(t) || !(Array.isArray(t.lines) || O(t.lines))) return;
-	let n = Array.isArray(t.lines) ? t.lines : [t.lines], r = n.map(F).filter((e) => e !== void 0);
+	if (!j(t) || !(Array.isArray(t.lines) || j(t.lines))) return;
+	let n = Array.isArray(t.lines) ? t.lines : [t.lines], r = n.map(L).filter((e) => e !== void 0);
 	if (!(n.length > 0 && r.length === 0)) return {
 		lines: r,
-		style: P(t.style)
+		style: ee(t.style)
 	};
-}, L = (e, t) => e === "value" ? {
+}, z = (e, t) => e === "value" ? {
 	type: e,
 	color: t,
 	value: 0
 } : {
 	type: e,
 	color: t
-}, R = (e, t, r) => {
-	let i = j(t)[0], a = L(i, r);
+}, B = (e, t, n) => {
+	let r = P(t)[0], a = z(r, n);
 	if (!e) return {
 		lines: [a],
-		style: { ...n }
+		style: { ...i }
 	};
-	let o = N(e);
+	let o = I(e);
 	return o.lines.push(a), o;
-}, z = (e, t) => {
-	let n = N(e);
+}, V = (e, t) => {
+	let n = I(e);
 	return n.lines.splice(t, 1), n;
-}, B = (e, t, n) => {
-	let r = N(e), i = r.lines[t];
-	return i && (r.lines[t] = L(n, i.color)), r;
-}, V = (e, t, n) => {
-	let r = N(e);
-	return r.lines[t] && (r.lines[t].color = n), r;
 }, H = (e, t, n) => {
-	let r = N(e);
+	let r = I(e), i = r.lines[t];
+	return i && (r.lines[t] = z(n, i.color)), r;
+}, U = (e, t, n) => {
+	let r = I(e);
+	return r.lines[t] && (r.lines[t].color = n), r;
+}, W = (e, t, n) => {
+	let r = I(e);
 	return r.lines[t] && (r.lines[t].value = n), r;
-}, U = (e, t) => {
-	let n = N(e);
+}, G = (e, t) => {
+	let n = I(e);
 	return n.style.type = t, n;
-}, W = (e, t) => {
-	let n = N(e);
+}, K = (e, t) => {
+	let n = I(e);
 	return n.style.width = t, n;
-}, G = ":host{display:block;container-type:inline-size}.luzmo-item-option{align-items:start;height:-moz-fit-content;height:fit-content}.control-container{flex-grow:1;align-items:start}.guidelines{gap:var(--luzmo-item-option-guidelines-shared-gap,var(--item-option-guidelines-shared-gap));flex-direction:column;inline-size:100%;display:flex}.guideline-rows{gap:var(--luzmo-item-option-guidelines-rows-gap,var(--item-option-guidelines-rows-gap));flex-direction:column;display:flex}.guideline-row{align-items:center;gap:var(--luzmo-item-option-guidelines-row-gap,var(--item-option-guidelines-row-gap));grid-template-columns:auto minmax(0,max-content) minmax(6rem,1fr) auto;display:grid}.guideline-value{inline-size:100%}@container (width<=20rem){.guideline-row{grid-template-columns:auto minmax(0,1fr) auto}.guideline-value{grid-column:2}.guideline-value-spacer{display:none}}.guideline-value-spacer{min-inline-size:0;min-block-size:var(--luzmo-component-height)}.guidelines-add{justify-content:flex-end;display:flex}.guideline-shared{gap:var(--luzmo-item-option-guidelines-rows-gap,var(--item-option-guidelines-rows-gap));border-block-start:var(--luzmo-border-width) solid var(--luzmo-border-color);flex-direction:column;padding-block-start:var(--luzmo-item-option-guidelines-shared-gap,var(--item-option-guidelines-shared-gap));display:flex}.guideline-shared-row{justify-content:space-between;align-items:center;gap:var(--luzmo-item-option-guidelines-row-gap,var(--item-option-guidelines-row-gap));flex-wrap:wrap;display:flex}.guideline-shared-label{flex-shrink:0}.guideline-width{min-inline-size:8rem}:host{--item-option-guidelines-rows-gap:var(--luzmo-spacing-2);--item-option-guidelines-row-gap:var(--luzmo-spacing-2);--item-option-guidelines-shared-gap:var(--luzmo-spacing-3)}:host([size=s]){--item-option-guidelines-rows-gap:var(--luzmo-spacing-1);--item-option-guidelines-row-gap:var(--luzmo-spacing-1);--item-option-guidelines-shared-gap:var(--luzmo-spacing-2)}:host([size=l]){--item-option-guidelines-rows-gap:var(--luzmo-spacing-3);--item-option-guidelines-row-gap:var(--luzmo-spacing-3);--item-option-guidelines-shared-gap:var(--luzmo-spacing-4)}:host([size=xl]){--item-option-guidelines-rows-gap:var(--luzmo-spacing-4);--item-option-guidelines-row-gap:var(--luzmo-spacing-3);--item-option-guidelines-shared-gap:var(--luzmo-spacing-4)}", K = 0, q = 6, J = 10 ** -6, Y = { maximumFractionDigits: q }, X = t(l), Z = class extends X {
+}, q = ":host{display:block;container-type:inline-size}.luzmo-item-option{align-items:start;height:-moz-fit-content;height:fit-content}.control-container{flex-grow:1;align-items:start}.guidelines{gap:var(--luzmo-item-option-guidelines-shared-gap,var(--item-option-guidelines-shared-gap));flex-direction:column;inline-size:100%;display:flex}.guideline-rows{gap:var(--luzmo-item-option-guidelines-rows-gap,var(--item-option-guidelines-rows-gap));flex-direction:column;display:flex}.guideline-row{align-items:center;gap:var(--luzmo-item-option-guidelines-row-gap,var(--item-option-guidelines-row-gap));grid-template-columns:auto minmax(0,max-content) minmax(6rem,1fr) auto;display:grid}.guideline-value{inline-size:100%}@container (width<=20rem){.guideline-row{grid-template-columns:auto minmax(0,1fr) auto}.guideline-value{grid-column:2}.guideline-value-spacer{display:none}}.guideline-value-spacer{min-inline-size:0;min-block-size:var(--luzmo-component-height)}.guidelines-add{justify-content:flex-end;display:flex}.guideline-shared{gap:var(--luzmo-item-option-guidelines-rows-gap,var(--item-option-guidelines-rows-gap));border-block-start:var(--luzmo-border-width) solid var(--luzmo-border-color);flex-direction:column;padding-block-start:var(--luzmo-item-option-guidelines-shared-gap,var(--item-option-guidelines-shared-gap));display:flex}.guideline-shared-row{justify-content:space-between;align-items:center;gap:var(--luzmo-item-option-guidelines-row-gap,var(--item-option-guidelines-row-gap));flex-wrap:wrap;display:flex}.guideline-shared-label{flex-shrink:0}.guideline-width{min-inline-size:8rem}:host{--item-option-guidelines-rows-gap:var(--luzmo-spacing-2);--item-option-guidelines-row-gap:var(--luzmo-spacing-2);--item-option-guidelines-shared-gap:var(--luzmo-spacing-3)}:host([size=s]){--item-option-guidelines-rows-gap:var(--luzmo-spacing-1);--item-option-guidelines-row-gap:var(--luzmo-spacing-1);--item-option-guidelines-shared-gap:var(--luzmo-spacing-2)}:host([size=l]){--item-option-guidelines-rows-gap:var(--luzmo-spacing-3);--item-option-guidelines-row-gap:var(--luzmo-spacing-3);--item-option-guidelines-shared-gap:var(--luzmo-spacing-4)}:host([size=xl]){--item-option-guidelines-rows-gap:var(--luzmo-spacing-4);--item-option-guidelines-row-gap:var(--luzmo-spacing-3);--item-option-guidelines-shared-gap:var(--luzmo-spacing-4)}", J = 0, Y = 6, X = 10 ** -6, Z = { maximumFractionDigits: Y }, Q = t(d), $ = class extends Q {
 	constructor(...e) {
-		super(...e), this.lineTypes = [], this.lineTypeLabels = {}, this.defaultColor = M(), this.debounce = 200, this._lineIds = [], this._lineIdCounter = 0, this._styleLabelId = `luzmo-item-option-guidelines-style-${++K}`, this._widthLabelId = `luzmo-item-option-guidelines-width-${K}`;
+		super(...e), this.lineTypes = [], this.lineTypeLabels = {}, this.defaultColor = F(), this.debounce = 200, this.liveInteractions = !1, this._interaction = new r(this, n), this._lineIds = [], this._lineIdCounter = 0, this._styleLabelId = `luzmo-item-option-guidelines-style-${++J}`, this._widthLabelId = `luzmo-item-option-guidelines-width-${J}`;
 	}
 	static get styles() {
-		return [...super.styles, _(G)];
+		return [...super.styles, y(q)];
 	}
 	willUpdate(e) {
-		super.willUpdate(e), e.has("value") && (this._clearDebounce(), this._guidelines = I(this.value), this._lineIds = (this._guidelines?.lines ?? []).map((e, t) => this._lineIds[t] ?? this._createLineId()));
+		super.willUpdate(e), e.has("value") && (this._clearDebounce(), this._guidelines = R(this.value), this._lineIds = (this._guidelines?.lines ?? []).map((e, t) => this._lineIds[t] ?? this._createLineId())), e.has("liveInteractions") && (this.liveInteractions ? this._clearDebounce() : this.endInteraction());
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this._clearDebounce();
@@ -130,43 +132,62 @@ var w = new Set(s), T = new Set(r), E = new Set(i), D = {
 	_clearDebounce() {
 		clearTimeout(this._debounceTimeout), this._debounceTimeout = void 0;
 	}
-	_emit(e, t = !1) {
-		let n = () => {
+	endInteraction() {
+		for (let e of this._colorPickers ?? []) e.endInteraction?.();
+		this._interaction.endAll();
+	}
+	_handleInteractionStart(e, t) {
+		this.liveInteractions && this._interaction.start(t.currentTarget, t.detail, this._guidelines?.lines[e]?.color);
+	}
+	_finalizeBeforeStructureChange() {
+		this.liveInteractions && this.endInteraction();
+	}
+	_handleInteractionEnd(e) {
+		this._interaction.end(e.currentTarget, e.detail);
+	}
+	_handleInteractionCancel(e) {
+		this._interaction.cancel(e.currentTarget, e.detail);
+	}
+	_emit(e, t = !1, n = this, r) {
+		let i = (t) => {
 			this._debounceTimeout = void 0, this.dispatchEvent(new CustomEvent("luzmo-option-changed", {
 				bubbles: !0,
 				composed: !0,
 				cancelable: !0,
-				detail: { value: e }
+				detail: t ? {
+					value: e,
+					interaction: t
+				} : { value: e }
 			}));
 		};
-		this._clearDebounce(), t || this.debounce <= 0 ? n() : this._debounceTimeout = setTimeout(n, this.debounce);
+		this._clearDebounce(), this.liveInteractions ? this._interaction.update(n, e, i, r) : t || this.debounce <= 0 ? i() : this._debounceTimeout = setTimeout(i, this.debounce);
 	}
-	_commit(e, t = !1) {
-		this._guidelines = e, this._emit(e, t);
+	_commit(e, t = !1, n, r) {
+		this._guidelines = e, this._emit(e, t, n, r);
 	}
 	_allowedTypes() {
-		return j(this.lineTypes);
+		return P(this.lineTypes);
 	}
 	_typeLabel(e) {
 		if (this.lineTypeLabels[e]) return this.lineTypeLabels[e];
 		switch (e) {
-			case "value": return x("Value", {
+			case "value": return w("Value", {
 				id: "item-option-guidelines-type-value",
 				desc: "Guideline type: manual numeric value"
 			});
-			case "average": return x("Average", {
+			case "average": return w("Average", {
 				id: "item-option-guidelines-type-average",
 				desc: "Guideline type: average of the plotted data"
 			});
-			case "median": return x("Median", {
+			case "median": return w("Median", {
 				id: "item-option-guidelines-type-median",
 				desc: "Guideline type: median of the plotted data"
 			});
-			case "average open": return x("Average open", {
+			case "average open": return w("Average open", {
 				id: "item-option-guidelines-type-average-open",
 				desc: "Guideline type: average of open values"
 			});
-			case "average close": return x("Average close", {
+			case "average close": return w("Average close", {
 				id: "item-option-guidelines-type-average-close",
 				desc: "Guideline type: average of close values"
 			});
@@ -177,15 +198,15 @@ var w = new Set(s), T = new Set(r), E = new Set(i), D = {
 	}
 	_widthValues() {
 		return {
-			1: x("Thin", {
+			1: w("Thin", {
 				id: "item-option-guidelines-width-thin",
 				desc: "Guideline width: thin"
 			}),
-			2: x("Medium", {
+			2: w("Medium", {
 				id: "item-option-guidelines-width-medium",
 				desc: "Guideline width: medium"
 			}),
-			3: x("Thick", {
+			3: w("Thick", {
 				id: "item-option-guidelines-width-thick",
 				desc: "Guideline width: thick"
 			})
@@ -195,24 +216,24 @@ var w = new Set(s), T = new Set(r), E = new Set(i), D = {
 		return [
 			{
 				key: "0",
-				icon: f,
-				label: x("Solid", {
+				icon: m,
+				label: w("Solid", {
 					id: "item-option-guidelines-style-solid",
 					desc: "Guideline line style: solid"
 				})
 			},
 			{
 				key: "1,2",
-				icon: d,
-				label: x("Dotted", {
+				icon: p,
+				label: w("Dotted", {
 					id: "item-option-guidelines-style-dotted",
 					desc: "Guideline line style: dotted"
 				})
 			},
 			{
 				key: "3,3",
-				icon: u,
-				label: x("Dashed", {
+				icon: f,
+				label: w("Dashed", {
 					id: "item-option-guidelines-style-dashed",
 					desc: "Guideline line style: dashed"
 				})
@@ -220,52 +241,52 @@ var w = new Set(s), T = new Set(r), E = new Set(i), D = {
 		];
 	}
 	_handleAdd() {
-		this.disabled || (this._lineIds = [...this._lineIds, this._createLineId()], this._commit(R(this._guidelines, this.lineTypes, this.defaultColor), !0));
+		this.disabled || (this._finalizeBeforeStructureChange(), this._lineIds = [...this._lineIds, this._createLineId()], this._commit(B(this._guidelines, this.lineTypes, this.defaultColor), !0));
 	}
 	_handleRemove(e) {
-		!this.disabled && this._guidelines && (this._lineIds = this._lineIds.filter((t, n) => n !== e), this._commit(z(this._guidelines, e), !0));
+		!this.disabled && this._guidelines && (this._finalizeBeforeStructureChange(), this._lineIds = this._lineIds.filter((t, n) => n !== e), this._commit(V(this._guidelines, e), !0));
 	}
 	_handleTypeChange(e, t) {
-		!this.disabled && this._guidelines && A(t.detail) && this._commit(B(this._guidelines, e, t.detail), !0);
+		!this.disabled && this._guidelines && N(t.detail) && this._commit(H(this._guidelines, e, t.detail), !0);
 	}
 	_handleColorChange(e, t) {
 		if (this.disabled || !this._guidelines) return;
 		let n = t.target.color;
-		typeof n == "string" && this._commit(V(this._guidelines, e, n));
+		typeof n == "string" && this._commit(U(this._guidelines, e, n), !1, t.currentTarget ?? void 0, n);
 	}
 	_handleValueChange(e, t) {
 		if (this.disabled || !this._guidelines) return;
 		let n = t.target.value;
-		typeof n == "number" && Number.isFinite(n) && this._commit(H(this._guidelines, e, n));
+		typeof n == "number" && Number.isFinite(n) && this._commit(W(this._guidelines, e, n));
 	}
 	_handleStyleChange(e) {
 		if (this.disabled || !this._guidelines) return;
 		let t = e.target.selected?.[0];
-		(t === "0" || t === "1,2" || t === "3,3") && this._commit(U(this._guidelines, t), !0);
+		(t === "0" || t === "1,2" || t === "3,3") && this._commit(G(this._guidelines, t), !0);
 	}
 	_handleWidthChange(e) {
 		if (this.disabled || !this._guidelines) return;
 		let t = e.detail, n = e.target.value, r = t === "1" || t === "2" || t === "3" ? t : n;
-		(r === "1" || r === "2" || r === "3") && this._commit(W(this._guidelines, r), !0);
+		(r === "1" || r === "2" || r === "3") && this._commit(K(this._guidelines, r), !0);
 	}
 	_lineKey(e) {
 		return this._lineIds[e];
 	}
 	_renderLine(e, t) {
-		let n = t + 1, r = x(S`Guideline ${n} color`, {
+		let n = t + 1, r = w(T`Guideline ${n} color`, {
 			id: "item-option-guidelines-color",
 			desc: "Accessible name for one guideline color picker"
-		}), i = x(S`Guideline ${n} type`, {
+		}), i = w(T`Guideline ${n} type`, {
 			id: "item-option-guidelines-type",
 			desc: "Accessible name for one guideline type picker"
-		}), a = x(S`Guideline ${n} value`, {
+		}), a = w(T`Guideline ${n} value`, {
 			id: "item-option-guidelines-value",
 			desc: "Accessible name for one manual guideline value"
-		}), o = x(S`Remove guideline ${n}`, {
+		}), o = w(T`Remove guideline ${n}`, {
 			id: "item-option-guidelines-remove",
 			desc: "Aria label for removing one guideline row"
 		});
-		return h`
+		return _`
       <div class="guideline-row">
         <luzmo-color-picker
           class="guideline-color"
@@ -276,6 +297,9 @@ var w = new Set(s), T = new Set(r), E = new Set(i), D = {
           .label=${r}
           ?disabled=${this.disabled}
           @change=${(e) => this._handleColorChange(t, e)}
+          @luzmo-interaction-start=${(e) => this._handleInteractionStart(t, e)}
+          @luzmo-interaction-end=${this._handleInteractionEnd}
+          @luzmo-interaction-cancel=${this._handleInteractionCancel}
         ></luzmo-color-picker>
         <luzmo-picker
           class="guideline-type"
@@ -286,22 +310,22 @@ var w = new Set(s), T = new Set(r), E = new Set(i), D = {
           ?disabled=${this.disabled}
           @change=${(e) => this._handleTypeChange(t, e)}
         >
-          ${Object.entries(this._typeValues()).map(([e, t]) => h`
+          ${Object.entries(this._typeValues()).map(([e, t]) => _`
               <luzmo-menu-item value=${e}>${t}</luzmo-menu-item>
             `)}
         </luzmo-picker>
-        ${e.type === "value" ? h`
+        ${e.type === "value" ? _`
                 <luzmo-number-field
                   class="guideline-value"
                   .value=${e.value ?? 0}
                   .size=${this.size}
-                  .step=${J}
-                  .formatOptions=${Y}
+                  .step=${X}
+                  .formatOptions=${Z}
                   .label=${a}
                   ?disabled=${this.disabled}
                   @change=${(e) => this._handleValueChange(t, e)}
                 ></luzmo-number-field>
-              ` : h`
+              ` : _`
                 <div class="guideline-value-spacer"></div>
               `}
         <luzmo-action-button
@@ -312,17 +336,17 @@ var w = new Set(s), T = new Set(r), E = new Set(i), D = {
           ?disabled=${this.disabled}
           @click=${() => this._handleRemove(t)}
         >
-          <luzmo-icon slot="icon" .size=${this.size} .icon=${m}></luzmo-icon>
+          <luzmo-icon slot="icon" .size=${this.size} .icon=${g}></luzmo-icon>
         </luzmo-action-button>
       </div>
     `;
 	}
 	_renderSharedStyle(e) {
-		return h`
+		return _`
       <div class="guideline-shared">
         <div class="guideline-shared-row">
           <span class="guideline-shared-label" id=${this._styleLabelId}>
-            ${x("Style", {
+            ${w("Style", {
 			id: "item-option-guidelines-style-label",
 			desc: "Label for shared guideline dash style"
 		})}
@@ -339,7 +363,7 @@ var w = new Set(s), T = new Set(r), E = new Set(i), D = {
             ?disabled=${this.disabled}
             @change=${this._handleStyleChange}
           >
-            ${this._styleOptions().map((e) => h`
+            ${this._styleOptions().map((e) => _`
                 <luzmo-action-button value=${e.key} ?disabled=${this.disabled} .label=${e.label}>
                   <luzmo-icon slot="icon" .size=${this.size} .icon=${e.icon}></luzmo-icon>
                 </luzmo-action-button>
@@ -348,7 +372,7 @@ var w = new Set(s), T = new Set(r), E = new Set(i), D = {
         </div>
         <div class="guideline-shared-row">
           <span class="guideline-shared-label" id=${this._widthLabelId}>
-            ${x("Width", {
+            ${w("Width", {
 			id: "item-option-guidelines-width-label",
 			desc: "Label for shared guideline width"
 		})}
@@ -362,7 +386,7 @@ var w = new Set(s), T = new Set(r), E = new Set(i), D = {
             ?disabled=${this.disabled}
             @change=${this._handleWidthChange}
           >
-            ${Object.entries(this._widthValues()).map(([e, t]) => h`
+            ${Object.entries(this._widthValues()).map(([e, t]) => _`
                 <luzmo-menu-item value=${e}>${t}</luzmo-menu-item>
               `)}
           </luzmo-picker>
@@ -371,17 +395,17 @@ var w = new Set(s), T = new Set(r), E = new Set(i), D = {
     `;
 	}
 	renderController() {
-		let e = this._guidelines?.lines ?? [], t = this.label || x("Guidelines", {
+		let e = this._guidelines?.lines ?? [], t = this.label || w("Guidelines", {
 			id: "item-option-guidelines-group",
 			desc: "Accessible name for the guidelines editor"
 		});
-		return h`
+		return _`
       <div id="luzmo-item-option-control" class="guidelines" role="group" aria-label=${t}>
-        ${e.length > 0 ? h`
+        ${e.length > 0 ? _`
                 <div class="guideline-rows">
-                  ${C(e, (e, t) => this._lineKey(t), (e, t) => this._renderLine(e, t))}
+                  ${E(e, (e, t) => this._lineKey(t), (e, t) => this._renderLine(e, t))}
                 </div>
-              ` : g}
+              ` : v}
         <div class="guidelines-add">
           <luzmo-button
             class="add-guideline"
@@ -390,25 +414,29 @@ var w = new Set(s), T = new Set(r), E = new Set(i), D = {
             ?disabled=${this.disabled}
             @click=${this._handleAdd}
           >
-            <luzmo-icon slot="icon" .icon=${p} .size=${this.size}></luzmo-icon>
-            ${x("Add guideline", {
+            <luzmo-icon slot="icon" .icon=${h} .size=${this.size}></luzmo-icon>
+            ${w("Add guideline", {
 			id: "item-option-guidelines-add",
 			desc: "Button that adds a chart guideline"
 		})}
           </luzmo-button>
         </div>
-        ${this._guidelines && e.length > 0 ? this._renderSharedStyle(this._guidelines) : g}
+        ${this._guidelines && e.length > 0 ? this._renderSharedStyle(this._guidelines) : v}
       </div>
     `;
 	}
 };
 // src/components/item-option-guidelines/index.ts
-e([v({ attribute: !1 })], Z.prototype, "value", void 0), e([v({ attribute: !1 })], Z.prototype, "lineTypes", void 0), e([v({ attribute: !1 })], Z.prototype, "lineTypeLabels", void 0), e([v({
+e([b({ attribute: !1 })], $.prototype, "value", void 0), e([b({ attribute: !1 })], $.prototype, "lineTypes", void 0), e([b({ attribute: !1 })], $.prototype, "lineTypeLabels", void 0), e([b({
 	type: String,
 	reflect: !0,
 	attribute: "default-color"
-})], Z.prototype, "defaultColor", void 0), e([v({
+})], $.prototype, "defaultColor", void 0), e([b({
 	type: Number,
 	reflect: !0
-})], Z.prototype, "debounce", void 0), e([y()], Z.prototype, "_guidelines", void 0), Z = e([b()], Z), typeof customElements < "u" && !customElements.get("luzmo-item-option-guidelines") && customElements.define("luzmo-item-option-guidelines", Z);
-export { Z as t };
+})], $.prototype, "debounce", void 0), e([b({
+	type: Boolean,
+	reflect: !0,
+	attribute: "live-interactions"
+})], $.prototype, "liveInteractions", void 0), e([x("luzmo-color-picker")], $.prototype, "_colorPickers", void 0), e([S()], $.prototype, "_guidelines", void 0), $ = e([C()], $), typeof customElements < "u" && !customElements.get("luzmo-item-option-guidelines") && customElements.define("luzmo-item-option-guidelines", $);
+export { $ as t };