@luzmo/analytics-components-kit 1.0.1-alpha.33 → 1.0.1-alpha.35

package/components/edit-option-color-picker/index.js

@@ -19,25 +19,25 @@
  * */
 var Co = Object.getPrototypeOf;
 var $o = Reflect.get;
-var oo = (r, o, e) => $o(Co(r), e, o);
-import { a as R, z as s, I as D, R as m, m as X } from "../base-D76d76ww-BGkuhs54.js";
-import { n as uo } from "../directive-helpers-Cm6gitnu-CeYtlPO9.js";
+var eo = (r, o, e) => $o(Co(r), e, o);
+import { a as R, z as s, I as L, R as m, m as X } from "../base-D76d76ww-BGkuhs54.js";
+import { n as ho } from "../directive-helpers-Cm6gitnu-CeYtlPO9.js";
 import { m as N, d as C } from "../if-defined-DOaE2coe-CNT45Xcl.js";
 import { D as J, g as Eo, v as _o, s as Ao } from "../luzmo-icons-DbwDQtuO-QG0fLECn.js";
+import { r as oo } from "../focusable-BxtpnzWp-DJQkL8Zv.js";
 import { w as Mo, a as Ho } from "../async-directive-BfcqVjDp-BCT-lA4F.js";
-import { l as ho, u as mo } from "../streaming-listener-CP-JE6Fa-9MH0gENR.js";
+import { l as mo, u as po } from "../streaming-listener-CP-JE6Fa-9MH0gENR.js";
 import { i as Po } from "../text-field-BIADXoLC-B9oE05VF.js";
-import { p as Ro, d as Fo, a as To } from "../index-BCBLJ-ei.js";
-import { r as po } from "../focusable-BxtpnzWp-DJQkL8Zv.js";
+import { p as Ro, d as Fo, a as To } from "../index-Rydj3Txs.js";
 import "../index-CskV_bXp.js";
 import "../index-CTVNGPeT.js";
-import { o as eo } from "../when-CDK1Tt5Y-C6ViXC43.js";
+import { o as ro } from "../when-CDK1Tt5Y-C6ViXC43.js";
 import { a as Bo } from "../observe-slot-text-BPfIQQtz-v6B-1BYh.js";
 import { m as Io } from "../roving-tabindex-DOg4z6ZU-dufnVmvL.js";
-import "../index-Cb5l6iK_.js";
+import "../index-C8XzR0jl.js";
 import { x as No, n as F } from "../property-CxtZroGf.js";
 import { e as Uo } from "../query-Ddbd72Um.js";
-import { L as Do } from "../edit-option-base-DeQjGX4i.js";
+import { L as Do } from "../edit-option-base-Brji81Gq.js";
 const So = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const r = document.createElement("style");
@@ -68,7 +68,7 @@ var Lo = Object.defineProperty, go = (r, o, e, t) => {
     (a = r[i]) && (l = a(o, e, l) || l);
   return l && Lo(o, e, l), l;
 };
-const bo = class extends D {
+const bo = class extends L {
   constructor() {
     super(...arguments), this.open = !1, this.color = "rgba(255, 0, 0, 0.5)";
   }
@@ -152,7 +152,7 @@ var Ko = Object.defineProperty, W = (r, o, e, t) => {
     (a = r[i]) && (l = a(o, e, l) || l);
   return l && Ko(o, e, l), l;
 };
-const fo = class extends D {
+const fo = class extends L {
   constructor() {
     super(...arguments), this.disabled = !1, this.focused = !1, this.open = !1, this.color = "rgba(255, 0, 0, 0.5)";
   }
@@ -176,23 +176,23 @@ const fo = class extends D {
   }
 };
 fo.styles = R(qo);
-let O = fo;
+let D = fo;
 W([
   s({ type: Boolean, reflect: !0 })
-], O.prototype, "disabled");
+], D.prototype, "disabled");
 W([
   s({ type: Boolean, reflect: !0 })
-], O.prototype, "focused");
+], D.prototype, "focused");
 W([
   s({ type: Boolean, reflect: !0 })
-], O.prototype, "open");
+], D.prototype, "open");
 W([
   s({ type: String })
-], O.prototype, "color");
-customElements.get("luzmo-color-handle") || customElements.define("luzmo-color-handle", O);
+], D.prototype, "color");
+customElements.get("luzmo-color-handle") || customElements.define("luzmo-color-handle", D);
 const Vo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  LuzmoColorHandle: O
+  LuzmoColorHandle: D
 }, Symbol.toStringTag, { value: "Module" }));
 /*! * Lucero - The design system for Luzmo.
  * 
@@ -241,7 +241,7 @@ function Yo(r, o, e) {
     b: p(e, 255) * 255
   };
 }
-function ro(r, o, e) {
+function to(r, o, e) {
   r = p(r, 255), o = p(o, 255), e = p(e, 255);
   const t = Math.max(r, o, e), l = Math.min(r, o, e);
   let i = 0, a = 0;
@@ -278,7 +278,7 @@ function Zo(r, o, e) {
   }
   return { r: t * 255, g: l * 255, b: i * 255 };
 }
-function to(r, o, e) {
+function lo(r, o, e) {
   r = p(r, 255), o = p(o, 255), e = p(e, 255);
   const t = Math.max(r, o, e), l = Math.min(r, o, e);
   let i = 0;
@@ -306,7 +306,7 @@ function Go(r, o, e) {
   const t = Math.floor(r), l = r - t, i = e * (1 - o), a = e * (1 - l * o), n = e * (1 - (1 - l) * o), c = t % 6, d = [e, a, i, i, n, e][c], b = [n, e, e, a, i, i][c], B = [i, i, n, e, e, a][c];
   return { r: d * 255, g: b * 255, b: B * 255 };
 }
-function lo(r, o, e, t) {
+function io(r, o, e, t) {
   const l = [
     I(Math.round(r).toString(16)),
     I(Math.round(o).toString(16)),
@@ -327,7 +327,7 @@ function Qo(r, o, e, t) {
   const l = r / 100, i = o / 100, a = e / 100, n = t / 100, c = 255 * (1 - l) * (1 - n), d = 255 * (1 - i) * (1 - n), b = 255 * (1 - a) * (1 - n);
   return { r: c, g: d, b };
 }
-function io(r, o, e) {
+function ao(r, o, e) {
   let t = 1 - r / 255, l = 1 - o / 255, i = 1 - e / 255, a = Math.min(t, l, i);
   return a === 1 ? (t = 0, l = 0, i = 0) : (t = (t - a) / (1 - a) * 100, l = (l - a) / (1 - a) * 100, i = (i - a) / (1 - a) * 100), a *= 100, {
     c: Math.round(t),
@@ -339,7 +339,7 @@ function io(r, o, e) {
 function oe(r) {
   return Math.round(parseFloat(r) * 255).toString(16);
 }
-function ao(r) {
+function so(r) {
   return x(r) / 255;
 }
 function x(r) {
@@ -548,7 +548,7 @@ function ie(r) {
     r: x(e[1]),
     g: x(e[2]),
     b: x(e[3]),
-    a: ao(e[4]),
+    a: so(e[4]),
     format: o ? "name" : "hex8"
   } : (e = w.hex6.exec(r), e ? {
     r: x(e[1]),
@@ -559,7 +559,7 @@ function ie(r) {
     r: x(e[1] + e[1]),
     g: x(e[2] + e[2]),
     b: x(e[3] + e[3]),
-    a: ao(e[4] + e[4]),
+    a: so(e[4] + e[4]),
     format: o ? "name" : "hex8"
   } : (e = w.hex3.exec(r), e ? {
     r: x(e[1] + e[1]),
@@ -626,7 +626,7 @@ let h = class u {
    * Returns the object as a HSVA object.
    */
   toHsv() {
-    const o = to(this.r, this.g, this.b);
+    const o = lo(this.r, this.g, this.b);
     return { h: o.h * 360, s: o.s, v: o.v, a: this.a };
   }
   /**
@@ -634,14 +634,14 @@ let h = class u {
    * "hsva(xxx, xxx, xxx, xx)".
    */
   toHsvString() {
-    const o = to(this.r, this.g, this.b), e = Math.round(o.h * 360), t = Math.round(o.s * 100), l = Math.round(o.v * 100);
+    const o = lo(this.r, this.g, this.b), e = Math.round(o.h * 360), t = Math.round(o.s * 100), l = Math.round(o.v * 100);
     return this.a === 1 ? `hsv(${e}, ${t}%, ${l}%)` : `hsva(${e}, ${t}%, ${l}%, ${this.roundA})`;
   }
   /**
    * Returns the object as a HSLA object.
    */
   toHsl() {
-    const o = ro(this.r, this.g, this.b);
+    const o = to(this.r, this.g, this.b);
     return { h: o.h * 360, s: o.s, l: o.l, a: this.a };
   }
   /**
@@ -649,7 +649,7 @@ let h = class u {
    * "hsla(xxx, xxx, xxx, xx)".
    */
   toHslString() {
-    const o = ro(this.r, this.g, this.b), e = Math.round(o.h * 360), t = Math.round(o.s * 100), l = Math.round(o.l * 100);
+    const o = to(this.r, this.g, this.b), e = Math.round(o.h * 360), t = Math.round(o.s * 100), l = Math.round(o.l * 100);
     return this.a === 1 ? `hsl(${e}, ${t}%, ${l}%)` : `hsla(${e}, ${t}%, ${l}%, ${this.roundA})`;
   }
   /**
@@ -657,7 +657,7 @@ let h = class u {
    * @param allow3Char will shorten hex value to 3 char if possible
    */
   toHex(o = !1) {
-    return lo(this.r, this.g, this.b, o);
+    return io(this.r, this.g, this.b, o);
   }
   /**
    * Returns the hex value of the color -with a # prefixed.
@@ -727,11 +727,11 @@ let h = class u {
   }
   toCmyk() {
     return {
-      ...io(this.r, this.g, this.b)
+      ...ao(this.r, this.g, this.b)
     };
   }
   toCmykString() {
-    const { c: o, m: e, y: t, k: l } = io(this.r, this.g, this.b);
+    const { c: o, m: e, y: t, k: l } = ao(this.r, this.g, this.b);
     return `cmyk(${o}, ${e}, ${t}, ${l})`;
   }
   /**
@@ -742,7 +742,7 @@ let h = class u {
       return "transparent";
     if (this.a < 1)
       return !1;
-    const o = "#" + lo(this.r, this.g, this.b, !1);
+    const o = "#" + io(this.r, this.g, this.b, !1);
     for (const [e, t] of Object.entries(Q))
       if (o === t)
         return e;
@@ -935,7 +935,7 @@ let h = class u {
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-const so = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, no = /(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/, co = /(^hs[v|l]a?\()\d{1,3}/, V = (r, o) => o ? r.toHexString() : r.toHex();
+const no = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, co = /(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/, uo = /(^hs[v|l]a?\()\d{1,3}/, V = (r, o) => o ? r.toHexString() : r.toHex();
 let xo = class {
   constructor(o, {
     applyColorToState: e,
@@ -950,13 +950,13 @@ let xo = class {
       hsl: (i, a) => {
         if (this.maintains === "hue") {
           if (a)
-            return i.toHslString().replace(co, `$1${this.hue}`);
+            return i.toHslString().replace(uo, `$1${this.hue}`);
           const { s: b, l: B, a: Y } = i.toHsl();
           return { h: this.hue, s: b, l: B, a: Y };
         }
         if (a)
           return i.toHslString().replace(
-            no,
+            co,
             `$1${this.hue}$2${this.saturation}`
           );
         const { s: n, l: c, a: d } = i.toHsl();
@@ -965,13 +965,13 @@ let xo = class {
       hsv: (i, a) => {
         if (this.maintains === "hue") {
           if (a)
-            return i.toHsvString().replace(co, `$1${this.hue}`);
+            return i.toHsvString().replace(uo, `$1${this.hue}`);
           const { s: b, v: B, a: Y } = i.toHsv();
           return { h: this.hue, s: b, v: B, a: Y };
         }
         if (a)
           return i.toHsvString().replace(
-            no,
+            co,
             `$1${this.hue}$2${this.saturation}`
           );
         const { s: n, v: c, a: d } = i.toHsv();
@@ -998,7 +998,7 @@ let xo = class {
     const { h: i, s: a, v: n, a: c } = this._color.toHsv();
     let d;
     if (l && t.startsWith("hs")) {
-      const b = so.exec(e);
+      const b = no.exec(e);
       if (b !== null) {
         const [, B] = b;
         d = Number(B);
@@ -1012,7 +1012,7 @@ let xo = class {
   setColorMaintainSaturation(o, e, t, l) {
     const { a: i } = this._color.toHsv();
     if (l && t.startsWith("hs")) {
-      const a = so.exec(e);
+      const a = no.exec(e);
       if (a !== null) {
         const [, n, c] = a;
         this.hue = Number(n), this.saturation = Number(c);
@@ -1122,9 +1122,9 @@ var ne = Object.defineProperty, ce = Object.getOwnPropertyDescriptor, z = (r, o,
     (a = r[i]) && (l = (t ? a(o, e, l) : a(l)) || l);
   return t && l && ne(o, e, l), l;
 };
-class g extends D {
+class g extends L {
   constructor() {
-    super(...arguments), this.disabled = !1, this.focused = !1, this.labelX = "saturation", this.labelY = "luminosity", this.isLTR = !0, this.languageResolver = new ho(this), this.colorController = new xo(this, {
+    super(...arguments), this.disabled = !1, this.focused = !1, this.labelX = "saturation", this.labelY = "luminosity", this.isLTR = !0, this.languageResolver = new mo(this), this.colorController = new xo(this, {
       extractColorFromState: () => ({
         h: this.hue,
         s: this.x,
@@ -1325,7 +1325,7 @@ class g extends D {
         color=${this.colorController.getHslString()}
         ?disabled=${this.disabled}
         style=${`transform: translate(${(this.isLTR ? this.x : 1 - this.x) * o}px, ${e - this.y * e}px);`}
-        ${mo({
+        ${po({
       start: ["pointerdown", this.handlePointerdown],
       streamInside: ["pointermove", this.handlePointermove],
       end: [
@@ -1558,9 +1558,9 @@ var ge = Object.defineProperty, be = Object.getOwnPropertyDescriptor, y = (r, o,
     (a = r[i]) && (l = (t ? a(o, e, l) : a(l)) || l);
   return t && l && ge(o, e, l), l;
 };
-let f = class extends po {
+let f = class extends oo {
   constructor() {
-    super(...arguments), this.disabled = !1, this.focused = !1, this.label = "hue", this.vertical = !1, this.languageResolver = new ho(this), this.colorController = new xo(this, {
+    super(...arguments), this.disabled = !1, this.focused = !1, this.label = "hue", this.vertical = !1, this.languageResolver = new mo(this), this.colorController = new xo(this, {
       /* c8 ignore next 3 */
       applyColorToState: () => {
         if (this.mode === "opacity") {
@@ -1747,7 +1747,7 @@ let f = class extends po {
         color=${this.mode === "opacity" ? this.color : "hsl(" + this.value + ", 100%, 50%)"}
         ?disabled=${this.disabled}
         style=${this.handlePositionStyles}
-        ${mo({
+        ${po({
       start: ["pointerdown", this.handlePointerdown],
       streamInside: ["pointermove", this.handlePointermove],
       end: [
@@ -1863,7 +1863,7 @@ var ve = Object.defineProperty, xe = Object.getOwnPropertyDescriptor, E = (r, o,
     (a = r[i]) && (l = (t ? a(o, e, l) : a(l)) || l);
   return t && l && ve(o, e, l), l;
 };
-let $ = class extends X(po, {
+let $ = class extends X(oo, {
   validSizes: ["xxs", "xs", "s", "m", "l", "xl"],
   noDefaultSize: !0
 }) {
@@ -1950,8 +1950,8 @@ let $ = class extends X(po, {
     )}
       >
         <slot name="image"></slot>
-        ${eo(this.disabled, this.renderDisabled)}
-        ${eo(this.mixedValue, this.renderMixedValue)}
+        ${ro(this.disabled, this.renderDisabled)}
+        ${ro(this.mixedValue, this.renderMixedValue)}
       </div>
     `;
   }
@@ -2006,7 +2006,7 @@ var we = Object.defineProperty, ke = Object.getOwnPropertyDescriptor, U = (r, o,
     (a = r[i]) && (l = (t ? a(o, e, l) : a(l)) || l);
   return t && l && we(o, e, l), l;
 };
-class T extends X(D, {
+class T extends X(L, {
   validSizes: ["xs", "s", "m", "l"],
   noDefaultSize: !0
 }) {
@@ -2190,7 +2190,7 @@ var Se = Object.defineProperty, M = (r, o, e, t) => {
     (a = r[i]) && (l = a(o, e, l) || l);
   return l && Se(o, e, l), l;
 };
-const wo = class extends X(D) {
+const wo = class extends X(oo) {
   constructor() {
     super(...arguments), this.color = "rgb(255, 0, 0)", this.noAlphaChannel = !1, this._alpha = 1, this._rgbColor = "rgb(255, 0, 0)", this._rgbaColor = "rgb(255, 0, 0, 1)", this._previousColor = "rgb(255, 0, 0)";
   }
@@ -2204,6 +2204,9 @@ const wo = class extends X(D) {
     const e = new h(this._rgbColor);
     this._rgbaColor = e.setAlpha(this._alpha).toRgbString(), this.colorFieldElement.value = this._rgbaColor, this.noAlphaChannel || (this.opacitySliderElement.color = this._rgbaColor), this.colorFieldElement.value = this.formatTextField(e), this.swatchElement.color = this._rgbaColor, this._previousColor = this._rgbaColor, this.color = this._rgbaColor, this.dispatchEvent(new CustomEvent("change", { detail: this.color }));
   }
+  get focusElement() {
+    return this.areaElement || this.colorFieldElement || this;
+  }
   handleHueSliderChange(o) {
     o.stopPropagation(), o.preventDefault();
     const e = new h(this._rgbColor).toHsl();
@@ -2252,7 +2255,7 @@ const wo = class extends X(D) {
   render() {
     var o;
     return m`
-      <div>
+      <div id="color-menu" tabindex="0">
         <luzmo-color-area
           .size=${this.size}
           @input=${this.handleAreaChange}
@@ -2344,7 +2347,7 @@ M([
   C("luzmo-swatch")
 ], A.prototype, "swatchElement");
 M([
-  uo()
+  ho()
 ], A.prototype, "_format");
 customElements.get("luzmo-color-menu") || customElements.define("luzmo-color-menu", A);
 /*! * Lucero - The design system for Luzmo.
@@ -2377,7 +2380,7 @@ var Ae = Object.defineProperty, _ = (r, o, e, t) => {
     (a = r[i]) && (l = a(o, e, l) || l);
   return l && Ae(o, e, l), l;
 };
-const ko = class extends X(D) {
+const ko = class extends X(L) {
   constructor() {
     super(...arguments), this.color = "rgb(255, 0, 0)", this.open = !1, this.disabled = !1, this.placement = "left-start", this.rounding = "full", this.swatches = [], this.noAlphaChannel = !1, this._renderMenu = !1;
   }
@@ -2388,7 +2391,8 @@ const ko = class extends X(D) {
     this.open = !0;
   }
   handleColorChange() {
-    this.color = this.menuElement.color, this.dispatchEvent(
+    const o = this.menuElement.color;
+    this.color = typeof o == "string" ? o : String(o), this.dispatchEvent(
       new Event("change", {
         bubbles: !0,
         composed: !0
@@ -2429,9 +2433,8 @@ const ko = class extends X(D) {
       ></luzmo-swatch>
       <luzmo-overlay
         trigger=${this.disabled ? "" : "trigger@click"}
-        type="auto"
         .placement=${this.placement}
-        type="page"
+        type="auto"
       >
         <luzmo-popover style="position:relative">
           ${this._renderMenu ? this.renderColorMenu() : m``}
@@ -2473,7 +2476,7 @@ _([
   C("luzmo-overlay")
 ], S.prototype, "overlayElement");
 _([
-  uo()
+  ho()
 ], S.prototype, "_renderMenu");
 customElements.get("luzmo-color-picker") || customElements.define("luzmo-color-picker", S);
 var Me = Object.defineProperty, H = (r, o, e, t) => {
@@ -2481,7 +2484,7 @@ var Me = Object.defineProperty, H = (r, o, e, t) => {
     (a = r[i]) && (l = a(o, e, l) || l);
   return l && Me(o, e, l), l;
 };
-const L = class L extends Do {
+const O = class O extends Do {
   constructor() {
     super(...arguments), this.value = "transparent", this.disabled = !1, this.noAlphaChannel = !1, this.swatches = [], this.rounding = "full", this.shape = "circle", this.placement = "left-start", this.debounce = 50;
   }
@@ -2516,8 +2519,8 @@ const L = class L extends Do {
     `;
   }
 };
-L.styles = [oo(L, L, "styles")];
-let k = L;
+O.styles = [eo(O, O, "styles")];
+let k = O;
 H([
   F({ type: String, reflect: !0 })
 ], k.prototype, "value");

package/components/edit-option-multi-language-field/index.cjs

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";var d=Object.getPrototypeOf;var c=Reflect.get;var p=(o,t,n)=>c(d(o),n,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-CeENkpNK.cjs");const l=require("../property-Dlf9S6Jz.cjs"),h=require("../query-D5qWDopr.cjs"),g=require("../edit-option-base-CSJNbo2E.cjs");var m=Object.defineProperty,i=(o,t,n,f)=>{for(var u=void 0,r=o.length-1,s;r>=0;r--)(s=o[r])&&(u=s(t,n,u)||u);return u&&m(t,n,u),u};const a=class a extends g.LuzmoEditOptionBase{constructor(){super(...arguments),this.value={},this.invalid=!1,this.readonly=!1,this.language="en",this.debounce=200}_handleEvent(){this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{var t,n;this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue=="function"?this.toValue(((t=this.multiLangFieldElement)==null?void 0:t.value)??{},this.language??"en"):((n=this.multiLangFieldElement)==null?void 0:n.value)??{}}}))},this.debounce??200)}renderController(){const t=typeof this.parseValue=="function"?this.parseValue(this.value,this.language??"en"):this.value;return l.x`
+"use strict";var d=Object.getPrototypeOf;var c=Reflect.get;var p=(o,t,n)=>c(d(o),n,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-Tx5oQjbt.cjs");const l=require("../property-Dlf9S6Jz.cjs"),h=require("../query-D5qWDopr.cjs"),g=require("../edit-option-base-DDvWhumg.cjs");var m=Object.defineProperty,i=(o,t,n,f)=>{for(var u=void 0,r=o.length-1,s;r>=0;r--)(s=o[r])&&(u=s(t,n,u)||u);return u&&m(t,n,u),u};const a=class a extends g.LuzmoEditOptionBase{constructor(){super(...arguments),this.value={},this.invalid=!1,this.readonly=!1,this.language="en",this.debounce=200}_handleEvent(){this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{var t,n;this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue=="function"?this.toValue(((t=this.multiLangFieldElement)==null?void 0:t.value)??{},this.language??"en"):((n=this.multiLangFieldElement)==null?void 0:n.value)??{}}}))},this.debounce??200)}renderController(){const t=typeof this.parseValue=="function"?this.parseValue(this.value,this.language??"en"):this.value;return l.x`
       <luzmo-multi-language-field
         .value=${t}
         .language=${this.language??"en"}

package/components/edit-option-multi-language-field/index.js

@@ -20,10 +20,10 @@
 var s = Object.getPrototypeOf;
 var d = Reflect.get;
 var c = (r, e, u) => d(s(r), u, e);
-import "../index-CnRQGFHT.js";
+import "../index-CbuHBIDB.js";
 import { x as f, n as t } from "../property-CxtZroGf.js";
 import { e as g } from "../query-Ddbd72Um.js";
-import { L as p } from "../edit-option-base-DeQjGX4i.js";
+import { L as p } from "../edit-option-base-Brji81Gq.js";
 const z = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const r = document.createElement("style");

package/components/edit-option-number-field/index.cjs

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";var d=Object.getPrototypeOf;var c=Reflect.get;var p=(n,r,s)=>c(d(n),s,r);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-CBOAQ3-E.cjs");const t=require("../property-Dlf9S6Jz.cjs"),h=require("../query-D5qWDopr.cjs"),f=require("../edit-option-base-CSJNbo2E.cjs");var m=Object.defineProperty,u=(n,r,s,b)=>{for(var i=void 0,l=n.length-1,a;l>=0;l--)(a=n[l])&&(i=a(r,s,i)||i);return i&&m(r,s,i),i};const o=class o extends f.LuzmoEditOptionBase{constructor(){super(...arguments),this.disabled=!1,this.step=1,this.unit=!1,this.debounce=200}_handleEvent(){this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue=="function"?this.toValue(this.numberField.value):this.numberField.value}}))},this.debounce??200)}renderController(){const r=typeof this.parseValue=="function"?this.parseValue(this.value):this.value,s=typeof this.parseValue=="function"?this.parseValue(this.default):this.default;return t.x`
+"use strict";var d=Object.getPrototypeOf;var c=Reflect.get;var p=(n,r,s)=>c(d(n),s,r);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-CBOAQ3-E.cjs");const t=require("../property-Dlf9S6Jz.cjs"),h=require("../query-D5qWDopr.cjs"),f=require("../edit-option-base-DDvWhumg.cjs");var m=Object.defineProperty,u=(n,r,s,b)=>{for(var i=void 0,l=n.length-1,a;l>=0;l--)(a=n[l])&&(i=a(r,s,i)||i);return i&&m(r,s,i),i};const o=class o extends f.LuzmoEditOptionBase{constructor(){super(...arguments),this.disabled=!1,this.step=1,this.unit=!1,this.debounce=200}_handleEvent(){this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue=="function"?this.toValue(this.numberField.value):this.numberField.value}}))},this.debounce??200)}renderController(){const r=typeof this.parseValue=="function"?this.parseValue(this.value):this.value,s=typeof this.parseValue=="function"?this.parseValue(this.default):this.default;return t.x`
       <luzmo-number-field
         .value=${r??s??0}
         .size=${this.size}

package/components/edit-option-number-field/index.js

@@ -23,7 +23,7 @@ var s = (r, t, u) => d(a(r), u, t);
 import "../index-Desl7GJ0.js";
 import { x as f, n as l } from "../property-CxtZroGf.js";
 import { e as p } from "../query-Ddbd72Um.js";
-import { L as b } from "../edit-option-base-DeQjGX4i.js";
+import { L as b } from "../edit-option-base-Brji81Gq.js";
 const z = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const r = document.createElement("style");

package/components/edit-option-picker/index.cjs

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";var h=Object.getPrototypeOf;var c=Reflect.get;var p=(i,e,l)=>c(h(i),l,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-Bafc5poK.cjs");require("../index-c2uKLWDt.cjs");const s=require("../property-Dlf9S6Jz.cjs"),d=require("../edit-option-base-CSJNbo2E.cjs");var m=Object.defineProperty,a=(i,e,l,f)=>{for(var n=void 0,u=i.length-1,o;u>=0;u--)(o=i[u])&&(n=o(e,l,n)||n);return n&&m(e,l,n),n};const r=class r extends d.LuzmoEditOptionBase{constructor(){super(...arguments),this.values={},this.disabled=!1,this.placement="bottom-end"}_handleEvent(e){this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue=="function"?this.toValue(e.detail):e.detail}}))}generateMenuItems(){return s.x`
+"use strict";var h=Object.getPrototypeOf;var c=Reflect.get;var p=(i,e,l)=>c(h(i),l,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-PfWxaas9.cjs");require("../index-DbPlCKPI.cjs");const s=require("../property-Dlf9S6Jz.cjs"),d=require("../edit-option-base-DDvWhumg.cjs");var m=Object.defineProperty,a=(i,e,l,f)=>{for(var n=void 0,u=i.length-1,o;u>=0;u--)(o=i[u])&&(n=o(e,l,n)||n);return n&&m(e,l,n),n};const r=class r extends d.LuzmoEditOptionBase{constructor(){super(...arguments),this.values={},this.disabled=!1,this.placement="bottom-end"}_handleEvent(e){this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue=="function"?this.toValue(e.detail):e.detail}}))}generateMenuItems(){return s.x`
       ${Object.entries(this.values).map(([e,l])=>s.x`
           <luzmo-menu-item value=${e}> ${l} </luzmo-menu-item>
         `)}

package/components/edit-option-picker/index.js

@@ -20,10 +20,10 @@
 var z = Object.getPrototypeOf;
 var d = Reflect.get;
 var s = (l, o, r) => d(z(l), r, o);
-import "../index-Cb5l6iK_.js";
-import "../index-BwsEWpIS.js";
+import "../index-C8XzR0jl.js";
+import "../index-Cbm8MFTj.js";
 import { x as n, n as t } from "../property-CxtZroGf.js";
-import { L as f } from "../edit-option-base-DeQjGX4i.js";
+import { L as f } from "../edit-option-base-Brji81Gq.js";
 const p = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const l = document.createElement("style");

package/components/edit-option-position-picker/index.cjs

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";var m=Object.getPrototypeOf;var h=Reflect.get;var c=(r,o,i)=>h(m(r),i,o);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-CSm0I7Gz.cjs");const e=require("../property-Dlf9S6Jz.cjs"),k=require("../edit-option-base-CSJNbo2E.cjs"),v=":host{height:var(--luzmo-edit-option-position-picker-grid-height, var(--edit-option-position-picker-grid-height));display:flex;align-items:center}.luzmo-edit-option{height:var(--luzmo-edit-option-position-picker-grid-height, var(--edit-option-position-picker-grid-height))}.position-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--luzmo-edit-option-position-picker-grid-gap, var(--edit-option-position-picker-grid-gap));width:var(--luzmo-edit-option-position-picker-grid-width, var(--edit-option-position-picker-grid-width));box-sizing:border-box;border:.0625rem solid var(--luzmo-edit-option-position-picker-grid-border-color, var(--luzmo-border-color));padding:var(--luzmo-edit-option-position-picker-grid-padding, var(--edit-option-position-picker-grid-padding));border-radius:var(--luzmo-edit-option-position-picker-grid-border-radius, var(--edit-option-position-picker-grid-border-radius))}.position-item{width:100%;height:var(--luzmo-edit-option-position-picker-item-height, var(--edit-option-position-picker-item-height));box-sizing:border-box;border:.0625rem solid var(--luzmo-edit-option-position-picker-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-edit-option-position-picker-border-radius, var(--edit-option-position-picker-border-radius));background:var(--luzmo-edit-option-position-picker-background, var(--luzmo-background-color-highlight));transition:background-color var(--luzmo-edit-option-position-picker-animation-duration, var(--luzmo-animation-duration)) ease-in-out;cursor:pointer}.position-item:hover{background-color:var(--luzmo-edit-option-position-picker-background-hover, var(--luzmo-background-color-highlight-down))}.position-item.selected,.position-item.selected:hover,.position-item.selected:active,.position-item.selected:focus{background-color:var(--luzmo-edit-option-position-picker-background-selected, var(--luzmo-primary));transition:background-color var(--luzmo-edit-option-position-picker-selected-animation-duration, 0) ease-in-out}.position-item.position-item-not-allowed{opacity:0}:host{--edit-option-position-picker-grid-height: 7rem;--edit-option-position-picker-grid-width: 7rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius);--edit-option-position-picker-grid-border-radius: var(--luzmo-border-radius);--edit-option-position-picker-grid-padding: .25rem;--edit-option-position-picker-item-height: 1.75rem;--edit-option-position-picker-grid-gap: .25rem}:host([size=s]){--edit-option-position-picker-grid-height: 5.125rem;--edit-option-position-picker-grid-width: 5.625rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius);--edit-option-position-picker-grid-border-radius: var( --luzmo-border-radius-s );--edit-option-position-picker-grid-padding: .125rem;--edit-option-position-picker-item-height: 1.5rem;--edit-option-position-picker-grid-gap: .125rem}:host([size=l]){--edit-option-position-picker-grid-height: 8rem;--edit-option-position-picker-grid-width: 8rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius-l);--edit-option-position-picker-grid-border-radius: var( --luzmo-border-radius-l );--edit-option-position-picker-grid-padding: .3rem;--edit-option-position-picker-item-height: 2rem;--edit-option-position-picker-grid-gap: .25rem}:host([size=xl]){--edit-option-position-picker-grid-height: 9rem;--edit-option-position-picker-grid-width: 9rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius-xl);--edit-option-position-picker-grid-border-radius: var( --luzmo-border-radius-xl );--edit-option-position-picker-grid-padding: .375rem;--edit-option-position-picker-item-height: 2.25rem;--edit-option-position-picker-grid-gap: .275rem}";var b=Object.defineProperty,n=(r,o,i,s)=>{for(var p=void 0,a=r.length-1,l;a>=0;a--)(l=r[a])&&(p=l(o,i,p)||p);return p&&b(o,i,p),p};const g=["topLeft","top","topRight","left","center","right","bottomLeft","bottom","bottomRight"],u=g.filter(r=>r!=="center"),d=class d extends k.LuzmoEditOptionBase{constructor(){super(...arguments),this.default="topRight",this.positions=u,this.readonly=!1}_handleEvent(){this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this.value}}))}_handleClick(o){var i;(i=this.positions)!=null&&i.includes(o)&&(this.value=o,this._handleEvent())}willUpdate(){this.value=this.value??this.default??"topRight",this.positions=this.positions??u}renderController(){const o=g.map(i=>{var s;return e.x`
+"use strict";var m=Object.getPrototypeOf;var h=Reflect.get;var c=(r,o,i)=>h(m(r),i,o);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-cHKqEi5-.cjs");const e=require("../property-Dlf9S6Jz.cjs"),k=require("../edit-option-base-DDvWhumg.cjs"),v=":host{height:var(--luzmo-edit-option-position-picker-grid-height, var(--edit-option-position-picker-grid-height));display:flex;align-items:center}.luzmo-edit-option{height:var(--luzmo-edit-option-position-picker-grid-height, var(--edit-option-position-picker-grid-height))}.position-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--luzmo-edit-option-position-picker-grid-gap, var(--edit-option-position-picker-grid-gap));width:var(--luzmo-edit-option-position-picker-grid-width, var(--edit-option-position-picker-grid-width));box-sizing:border-box;border:.0625rem solid var(--luzmo-edit-option-position-picker-grid-border-color, var(--luzmo-border-color));padding:var(--luzmo-edit-option-position-picker-grid-padding, var(--edit-option-position-picker-grid-padding));border-radius:var(--luzmo-edit-option-position-picker-grid-border-radius, var(--edit-option-position-picker-grid-border-radius))}.position-item{width:100%;height:var(--luzmo-edit-option-position-picker-item-height, var(--edit-option-position-picker-item-height));box-sizing:border-box;border:.0625rem solid var(--luzmo-edit-option-position-picker-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-edit-option-position-picker-border-radius, var(--edit-option-position-picker-border-radius));background:var(--luzmo-edit-option-position-picker-background, var(--luzmo-background-color-highlight));transition:background-color var(--luzmo-edit-option-position-picker-animation-duration, var(--luzmo-animation-duration)) ease-in-out;cursor:pointer}.position-item:hover{background-color:var(--luzmo-edit-option-position-picker-background-hover, var(--luzmo-background-color-highlight-down))}.position-item.selected,.position-item.selected:hover,.position-item.selected:active,.position-item.selected:focus{background-color:var(--luzmo-edit-option-position-picker-background-selected, var(--luzmo-primary));transition:background-color var(--luzmo-edit-option-position-picker-selected-animation-duration, 0) ease-in-out}.position-item.position-item-not-allowed{opacity:0}:host{--edit-option-position-picker-grid-height: 7rem;--edit-option-position-picker-grid-width: 7rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius);--edit-option-position-picker-grid-border-radius: var(--luzmo-border-radius);--edit-option-position-picker-grid-padding: .25rem;--edit-option-position-picker-item-height: 1.75rem;--edit-option-position-picker-grid-gap: .25rem}:host([size=s]){--edit-option-position-picker-grid-height: 5.125rem;--edit-option-position-picker-grid-width: 5.625rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius);--edit-option-position-picker-grid-border-radius: var( --luzmo-border-radius-s );--edit-option-position-picker-grid-padding: .125rem;--edit-option-position-picker-item-height: 1.5rem;--edit-option-position-picker-grid-gap: .125rem}:host([size=l]){--edit-option-position-picker-grid-height: 8rem;--edit-option-position-picker-grid-width: 8rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius-l);--edit-option-position-picker-grid-border-radius: var( --luzmo-border-radius-l );--edit-option-position-picker-grid-padding: .3rem;--edit-option-position-picker-item-height: 2rem;--edit-option-position-picker-grid-gap: .25rem}:host([size=xl]){--edit-option-position-picker-grid-height: 9rem;--edit-option-position-picker-grid-width: 9rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius-xl);--edit-option-position-picker-grid-border-radius: var( --luzmo-border-radius-xl );--edit-option-position-picker-grid-padding: .375rem;--edit-option-position-picker-item-height: 2.25rem;--edit-option-position-picker-grid-gap: .275rem}";var b=Object.defineProperty,n=(r,o,i,s)=>{for(var p=void 0,a=r.length-1,l;a>=0;a--)(l=r[a])&&(p=l(o,i,p)||p);return p&&b(o,i,p),p};const g=["topLeft","top","topRight","left","center","right","bottomLeft","bottom","bottomRight"],u=g.filter(r=>r!=="center"),d=class d extends k.LuzmoEditOptionBase{constructor(){super(...arguments),this.default="topRight",this.positions=u,this.readonly=!1}_handleEvent(){this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this.value}}))}_handleClick(o){var i;(i=this.positions)!=null&&i.includes(o)&&(this.value=o,this._handleEvent())}willUpdate(){this.value=this.value??this.default??"topRight",this.positions=this.positions??u}renderController(){const o=g.map(i=>{var s;return e.x`
         <div
           class="position-item ${(s=this.positions)!=null&&s.includes(i)?"position-item-allowed":"position-item-not-allowed"} ${this.value===i?"selected":""}"
           @click=${this._handleClick.bind(this,i)}

package/components/edit-option-position-picker/index.js

@@ -20,9 +20,9 @@
 var z = Object.getPrototypeOf;
 var h = Reflect.get;
 var a = (i, r, o) => h(z(i), o, r);
-import "../index-BbuNpVBr.js";
+import "../index-DE3d0E0P.js";
 import { r as f, x as c, n as d } from "../property-CxtZroGf.js";
-import { L as v } from "../edit-option-base-DeQjGX4i.js";
+import { L as v } from "../edit-option-base-Brji81Gq.js";
 const b = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const i = document.createElement("style");

package/components/edit-option-positions-number-field/index.cjs

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("../luzmo-icons-Nyf1P71v.cjs");require("../index-CBOAQ3-E.cjs");const s=require("../property-Dlf9S6Jz.cjs"),$=require("../state-CrfOw8Zp.cjs"),x=require("../edit-option-base-CSJNbo2E.cjs"),S=":host{--edit-option-positions-number-field-container-row-gap: var( --luzmo-spacing-2 );--edit-option-positions-number-field-container-column-gap: var( --luzmo-spacing-2 );--edit-option-positions-number-field-sync-height: calc( var(--luzmo-component-height) * 1.5 )}:host([size=s]){--edit-option-positions-number-field-sync-height: calc( var(--luzmo-component-height-s) * 1.5 )}:host([size=l]){--edit-option-positions-number-field-sync-height: calc( var(--luzmo-component-height-l) * 1.5 )}:host([size=xl]){--edit-option-positions-number-field-sync-height: calc( var(--luzmo-component-height-xl) * 1.5 )}:host{--var: test}.positions-container{max-width:var(--luzmo-edit-option-positions-number-field-container-max-width, var(--edit-option-positions-number-field-container-max-width));display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);row-gap:var(--luzmo-edit-option-positions-number-field-container-row-gap, var(--edit-option-positions-number-field-container-row-gap));column-gap:var(--luzmo-edit-option-positions-number-field-container-column-gap, var(--edit-option-positions-number-field-container-column-gap))}.position,.sync-button{display:flex;align-items:center;justify-content:center}.sync-button{cursor:pointer}.sync-button[position=center].sync{border:var(--luzmo-edit-option-positions-number-field-sync-border-width, var(--luzmo-border-width)) solid var(--luzmo-edit-option-positions-number-field-sync-border-color, var(--luzmo-primary));border-radius:var(--luzmo-edit-option-positions-number-field-sync-border-radius, var(--luzmo-border-radius));height:var(--luzmo-edit-option-positions-number-field-sync-height, var(--edit-option-positions-number-field-sync-height))}.no-sync-center{border:var(--luzmo-edit-option-positions-number-field-no-sync-center-border-width, var(--luzmo-border-width)) solid var(--luzmo-edit-option-positions-number-field-no-sync-center-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-edit-option-positions-number-field-no-sync-center-border-radius, var(--luzmo-border-radius));height:var(--luzmo-edit-option-positions-number-field-sync-height, var(--edit-option-positions-number-field-sync-height));background-color:var(--luzmo-edit-option-positions-number-field-no-sync-center-background-color, var(--luzmo-background-color-highlight))}";var V=Object.defineProperty,a=(f,t,i,n)=>{for(var e=void 0,o=f.length-1,r;o>=0;o--)(r=f[o])&&(e=r(t,i,e)||e);return e&&V(t,i,e),e};class u extends x.LuzmoEditOptionBase{constructor(){super(...arguments),this.canSync=!0,this.invalid=!1,this.readonly=!1,this.debounce=200,this._positions=[["top-left","top","top-right"],["left","center","right"],["bottom-left","bottom","bottom-right"]]}static get styles(){return[s.r(S)]}_calculateSyncedValue(){var n;let t;const i={};return(n=this.positions)==null||n.forEach(e=>{var o,r,l;i[e]=((o=this.values)==null?void 0:o[e])??((l=(r=this.positionConfiguration)==null?void 0:r[e])==null?void 0:l.default)??0,t=typeof t=="number"&&i[e]?Math.min(t,i[e]):i[e]}),t}toggleSync(){if(this.sync=!this.sync,this.sync&&(this.syncedValue=this._calculateSyncedValue(),typeof this.syncedValue=="number")){this.values={...this.values};for(const t of this.positions??[])this.values[t]=this.syncedValue}}_handleEvent(t){const i=t.target.getAttribute("position"),n=t.target.value;let e={};if(!(!i||typeof n!="number")){if(this.canSync&&this.sync&&i==="center"){this.syncedValue=n;for(const o of this.positions??[])e[o]=n}else e={...this.values,[i]:n};this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{var c;const o=Object.keys(this.values??{}),r=Object.keys(e);let l=!0;o.length!==r.length&&(l=!1);for(const d of o)((c=this.values)==null?void 0:c[d])!==e[d]&&(l=!1);l||(this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{values:{...e}}})),this.values=e)},this.debounce??200)}}_renderNumberField(t){var i,n,e,o,r,l,c,d,p,h,m;return(i=this.positions)!=null&&i.includes(t)||t==="center"?this.canSync&&(this.sync&&t!=="center"||!this.sync&&t==="center")?s.x`<div
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("../luzmo-icons-Nyf1P71v.cjs");require("../index-CBOAQ3-E.cjs");const s=require("../property-Dlf9S6Jz.cjs"),$=require("../state-CrfOw8Zp.cjs"),x=require("../edit-option-base-DDvWhumg.cjs"),S=":host{--edit-option-positions-number-field-container-row-gap: var( --luzmo-spacing-2 );--edit-option-positions-number-field-container-column-gap: var( --luzmo-spacing-2 );--edit-option-positions-number-field-sync-height: calc( var(--luzmo-component-height) * 1.5 )}:host([size=s]){--edit-option-positions-number-field-sync-height: calc( var(--luzmo-component-height-s) * 1.5 )}:host([size=l]){--edit-option-positions-number-field-sync-height: calc( var(--luzmo-component-height-l) * 1.5 )}:host([size=xl]){--edit-option-positions-number-field-sync-height: calc( var(--luzmo-component-height-xl) * 1.5 )}:host{--var: test}.positions-container{max-width:var(--luzmo-edit-option-positions-number-field-container-max-width, var(--edit-option-positions-number-field-container-max-width));display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);row-gap:var(--luzmo-edit-option-positions-number-field-container-row-gap, var(--edit-option-positions-number-field-container-row-gap));column-gap:var(--luzmo-edit-option-positions-number-field-container-column-gap, var(--edit-option-positions-number-field-container-column-gap))}.position,.sync-button{display:flex;align-items:center;justify-content:center}.sync-button{cursor:pointer}.sync-button[position=center].sync{border:var(--luzmo-edit-option-positions-number-field-sync-border-width, var(--luzmo-border-width)) solid var(--luzmo-edit-option-positions-number-field-sync-border-color, var(--luzmo-primary));border-radius:var(--luzmo-edit-option-positions-number-field-sync-border-radius, var(--luzmo-border-radius));height:var(--luzmo-edit-option-positions-number-field-sync-height, var(--edit-option-positions-number-field-sync-height))}.no-sync-center{border:var(--luzmo-edit-option-positions-number-field-no-sync-center-border-width, var(--luzmo-border-width)) solid var(--luzmo-edit-option-positions-number-field-no-sync-center-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-edit-option-positions-number-field-no-sync-center-border-radius, var(--luzmo-border-radius));height:var(--luzmo-edit-option-positions-number-field-sync-height, var(--edit-option-positions-number-field-sync-height));background-color:var(--luzmo-edit-option-positions-number-field-no-sync-center-background-color, var(--luzmo-background-color-highlight))}";var V=Object.defineProperty,a=(f,t,i,n)=>{for(var e=void 0,o=f.length-1,r;o>=0;o--)(r=f[o])&&(e=r(t,i,e)||e);return e&&V(t,i,e),e};class u extends x.LuzmoEditOptionBase{constructor(){super(...arguments),this.canSync=!0,this.invalid=!1,this.readonly=!1,this.debounce=200,this._positions=[["top-left","top","top-right"],["left","center","right"],["bottom-left","bottom","bottom-right"]]}static get styles(){return[s.r(S)]}_calculateSyncedValue(){var n;let t;const i={};return(n=this.positions)==null||n.forEach(e=>{var o,r,l;i[e]=((o=this.values)==null?void 0:o[e])??((l=(r=this.positionConfiguration)==null?void 0:r[e])==null?void 0:l.default)??0,t=typeof t=="number"&&i[e]?Math.min(t,i[e]):i[e]}),t}toggleSync(){if(this.sync=!this.sync,this.sync&&(this.syncedValue=this._calculateSyncedValue(),typeof this.syncedValue=="number")){this.values={...this.values};for(const t of this.positions??[])this.values[t]=this.syncedValue}}_handleEvent(t){const i=t.target.getAttribute("position"),n=t.target.value;let e={};if(!(!i||typeof n!="number")){if(this.canSync&&this.sync&&i==="center"){this.syncedValue=n;for(const o of this.positions??[])e[o]=n}else e={...this.values,[i]:n};this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{var c;const o=Object.keys(this.values??{}),r=Object.keys(e);let l=!0;o.length!==r.length&&(l=!1);for(const d of o)((c=this.values)==null?void 0:c[d])!==e[d]&&(l=!1);l||(this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{values:{...e}}})),this.values=e)},this.debounce??200)}}_renderNumberField(t){var i,n,e,o,r,l,c,d,p,h,m;return(i=this.positions)!=null&&i.includes(t)||t==="center"?this.canSync&&(this.sync&&t!=="center"||!this.sync&&t==="center")?s.x`<div
           class="sync-button ${this.sync?"":"sync"}"
           position=${t}
           @click=${this.toggleSync}

package/components/edit-option-positions-number-field/index.js

@@ -21,7 +21,7 @@ import { a3 as k, a4 as S } from "../luzmo-icons-CPucBq6e.js";
 import "../index-Desl7GJ0.js";
 import { r as $, x as p, n as m } from "../property-CxtZroGf.js";
 import { r as C } from "../state-BVYsk_HZ.js";
-import { L as V } from "../edit-option-base-DeQjGX4i.js";
+import { L as V } from "../edit-option-base-Brji81Gq.js";
 const w = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const d = document.createElement("style");

package/components/edit-option-radio-button-group/index.cjs

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";var d=Object.getPrototypeOf;var h=Reflect.get;var c=(l,e,t)=>h(d(l),t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-C2PPSv8E.cjs");require("../index-CnpJUw_z.cjs");const a=require("../property-Dlf9S6Jz.cjs"),v=require("../query-D5qWDopr.cjs"),y=require("../edit-option-base-CSJNbo2E.cjs");var f=Object.defineProperty,i=(l,e,t,r)=>{for(var o=void 0,n=l.length-1,p;n>=0;n--)(p=l[n])&&(o=p(e,t,o)||o);return o&&f(e,t,o),o};const u=class u extends y.LuzmoEditOptionBase{constructor(){super(...arguments),this.values={},this.disabled=!1}generateRadioButtons(){const e=Object.entries(this.values).map(([t,r])=>a.x`
+"use strict";var d=Object.getPrototypeOf;var h=Reflect.get;var c=(l,e,t)=>h(d(l),t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-C2PPSv8E.cjs");require("../index-CnpJUw_z.cjs");const a=require("../property-Dlf9S6Jz.cjs"),v=require("../query-D5qWDopr.cjs"),y=require("../edit-option-base-DDvWhumg.cjs");var f=Object.defineProperty,i=(l,e,t,r)=>{for(var o=void 0,n=l.length-1,p;n>=0;n--)(p=l[n])&&(o=p(e,t,o)||o);return o&&f(e,t,o),o};const u=class u extends y.LuzmoEditOptionBase{constructor(){super(...arguments),this.values={},this.disabled=!1}generateRadioButtons(){const e=Object.entries(this.values).map(([t,r])=>a.x`
         <luzmo-action-button value=${t} ?disabled=${this.disabled}>
           ${r}
         </luzmo-action-button>

package/components/edit-option-radio-button-group/index.js

@@ -24,7 +24,7 @@ import "../index-rQxtPaJl.js";
 import "../index-BHJH1eGn.js";
 import { x as m, n as i } from "../property-CxtZroGf.js";
 import { e as b } from "../query-Ddbd72Um.js";
-import { L as g } from "../edit-option-base-DeQjGX4i.js";
+import { L as g } from "../edit-option-base-Brji81Gq.js";
 const f = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const t = document.createElement("style");

package/components/edit-option-slider/index.cjs

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";var Ve=Object.getPrototypeOf;var Pe=Reflect.get;var Bt=(o,t,i)=>Pe(Ve(o),i,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const H=require("../base-D76d76ww-tT6yr8eb.cjs"),_=require("../property-Dlf9S6Jz.cjs"),Ae=require("../edit-option-base-CSJNbo2E.cjs");/*! * Lucero - The design system for Luzmo.
+"use strict";var Ve=Object.getPrototypeOf;var Pe=Reflect.get;var Bt=(o,t,i)=>Pe(Ve(o),i,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const H=require("../base-D76d76ww-tT6yr8eb.cjs"),_=require("../property-Dlf9S6Jz.cjs"),Ae=require("../edit-option-base-DDvWhumg.cjs");/*! * Lucero - The design system for Luzmo.
  * 
  * Copyright © 2025 Luzmo
  * All rights reserved.

package/components/edit-option-slider/index.js

@@ -22,7 +22,7 @@ var At = Reflect.get;
 var Be = (o, e, i) => At(Vt(o), i, e);
 import { m as Mt, I as Ot, R as Dt, a as Lt, z as W } from "../base-D76d76ww-BGkuhs54.js";
 import { x as Ht, n as B } from "../property-CxtZroGf.js";
-import { L as jt } from "../edit-option-base-DeQjGX4i.js";
+import { L as jt } from "../edit-option-base-Brji81Gq.js";
 const Pt = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const o = document.createElement("style");