@luzmo/analytics-components-kit 1.0.9-beta.14 → 1.0.9-beta.15

package/components/item-option-position-picker-Ba7cBvlL.cjs

@@ -0,0 +1,32 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. 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-BWMfo_w4.cjs");const e=require("./decorate-DCJt-2rt.cjs"),t=require("./item-option-base-BMy6dWbc.cjs"),n=require("./superPropGet-DmmlTXgo.cjs");let r=require("lit"),i=require("lit/decorators.js");require("@luzmo/lucero/text-field");var a=`:host{height:var(--luzmo-item-option-position-picker-grid-height,var(--item-option-position-picker-grid-height));align-items:center;display:flex}.luzmo-item-option{height:var(--luzmo-item-option-position-picker-grid-height,var(--item-option-position-picker-grid-height))}.position-grid{gap:var(--luzmo-item-option-position-picker-grid-gap,var(--item-option-position-picker-grid-gap));width:var(--luzmo-item-option-position-picker-grid-width,var(--item-option-position-picker-grid-width));box-sizing:border-box;border:.0625rem solid var(--luzmo-item-option-position-picker-grid-border-color,var(--luzmo-border-color));padding:var(--luzmo-item-option-position-picker-grid-padding,var(--item-option-position-picker-grid-padding));border-radius:var(--luzmo-item-option-position-picker-grid-border-radius,var(--item-option-position-picker-grid-border-radius));grid-template-columns:repeat(3,1fr);display:grid}.position-item{width:100%;height:var(--luzmo-item-option-position-picker-item-height,var(--item-option-position-picker-item-height));box-sizing:border-box;border:.0625rem solid var(--luzmo-item-option-position-picker-border-color,var(--luzmo-border-color));border-radius:var(--luzmo-item-option-position-picker-border-radius,var(--item-option-position-picker-border-radius));background:var(--luzmo-item-option-position-picker-background,var(--luzmo-background-color-highlight));transition:background-color var(--luzmo-item-option-position-picker-animation-duration,var(--luzmo-animation-duration)) ease-in-out;cursor:pointer}.position-item:hover{background-color:var(--luzmo-item-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-item-option-position-picker-background-selected,var(--luzmo-primary));transition:background-color var(--luzmo-item-option-position-picker-selected-animation-duration,0) ease-in-out}.position-item:focus-visible{outline:2px solid var(--luzmo-item-option-position-picker-focus-color,var(--luzmo-primary));outline-offset:1px}.position-item.position-item-not-allowed{opacity:0;pointer-events:none}:host{--item-option-position-picker-grid-height:7rem;--item-option-position-picker-grid-width:7rem;--item-option-position-picker-border-radius:var(--luzmo-border-radius);--item-option-position-picker-grid-border-radius:var(--luzmo-border-radius);--item-option-position-picker-grid-padding:.25rem;--item-option-position-picker-item-height:1.75rem;--item-option-position-picker-grid-gap:.25rem}:host([size=s]){--item-option-position-picker-grid-height:5.125rem;--item-option-position-picker-grid-width:5.625rem;--item-option-position-picker-border-radius:var(--luzmo-border-radius);--item-option-position-picker-grid-border-radius:var(--luzmo-border-radius-s);--item-option-position-picker-grid-padding:.125rem;--item-option-position-picker-item-height:1.5rem;--item-option-position-picker-grid-gap:.125rem}:host([size=l]){--item-option-position-picker-grid-height:8rem;--item-option-position-picker-grid-width:8rem;--item-option-position-picker-border-radius:var(--luzmo-border-radius-l);--item-option-position-picker-grid-border-radius:var(--luzmo-border-radius-l);--item-option-position-picker-grid-padding:.3rem;--item-option-position-picker-item-height:2rem;--item-option-position-picker-grid-gap:.25rem}:host([size=xl]){--item-option-position-picker-grid-height:9rem;--item-option-position-picker-grid-width:9rem;--item-option-position-picker-border-radius:var(--luzmo-border-radius-xl);--item-option-position-picker-grid-border-radius:var(--luzmo-border-radius-xl);--item-option-position-picker-grid-padding:.375rem;--item-option-position-picker-item-height:2.25rem;--item-option-position-picker-grid-gap:.275rem}`,o,s=[`topLeft`,`top`,`topRight`,`left`,`center`,`right`,`bottomLeft`,`bottom`,`bottomRight`],c=s.filter(e=>e!==`center`),l={topLeft:`Top left`,top:`Top center`,topRight:`Top right`,left:`Center left`,center:`Center`,right:`Center right`,bottomLeft:`Bottom left`,bottom:`Bottom center`,bottomRight:`Bottom right`},u=class extends t.t{constructor(...e){super(...e),this.default=`topRight`,this.positions=c,this.readonly=!1}_handleEvent(){this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this.value}}))}_handleClick(e){this.positions?.includes(e)&&(this.value=e,this._handleEvent())}_handleKeyDown(e,t){if(t.key===`Enter`||t.key===` `){t.preventDefault(),this._handleClick(e);return}let n=s.filter(e=>this.positions?.includes(e)),r=n.indexOf(e);if(r===-1)return;let i=-1;if(t.key===`ArrowRight`||t.key===`ArrowDown`?(t.preventDefault(),i=(r+1)%n.length):(t.key===`ArrowLeft`||t.key===`ArrowUp`)&&(t.preventDefault(),i=(r-1+n.length)%n.length),i>=0){let e=n[i];(this.shadowRoot?.querySelector(`[data-position="${e}"]`))?.focus()}}willUpdate(){this.value=this.value??this.default??`topRight`,this.positions=this.positions??c}renderController(){let e=s.map(e=>{let t=this.positions?.includes(e)??!1,n=this.value===e,i=t&&n,a=i||t&&!s.some(e=>this.positions?.includes(e)&&this.value===e);return r.html`
+        <div
+          class="position-item ${t?`position-item-allowed`:`position-item-not-allowed`} ${n?`selected`:``}"
+          role="radio"
+          aria-checked=${n?`true`:`false`}
+          aria-disabled=${t?`false`:`true`}
+          aria-label=${l[e]??e}
+          data-position=${e}
+          tabindex=${t?i||a?`0`:`-1`:r.nothing}
+          @click=${this._handleClick.bind(this,e)}
+          @keydown=${t?this._handleKeyDown.bind(this,e):r.nothing}
+        ></div>
+      `});return r.html` <div class="position-grid" role="radiogroup" aria-label=${this.label??`Position`} id="luzmo-item-option-control">${e}</div> `}};o=u,o.styles=[n.t(o,`styles`,o),(0,r.unsafeCSS)(a)],e.t([(0,i.property)({type:String,reflect:!0})],u.prototype,`value`,void 0),e.t([(0,i.property)({type:String,reflect:!0,attribute:`default-position`})],u.prototype,`default`,void 0),e.t([(0,i.property)({type:Array,reflect:!0})],u.prototype,`positions`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],u.prototype,`readonly`,void 0),customElements.get(`luzmo-item-option-position-picker`)||customElements.define(`luzmo-item-option-position-picker`,u),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return u}});

package/components/item-option-position-picker-DX7lLZKO.js

@@ -0,0 +1,114 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import "./tokens-6HmQYnEP.js";
+import { t as e } from "./decorate-B2TzfnLZ.js";
+import { t } from "./item-option-base-BfHciede.js";
+import { t as n } from "./superPropGet-CUPN9Fvv.js";
+import { html as r, nothing as i, unsafeCSS as a } from "lit";
+import { property as o } from "lit/decorators.js";
+import "@luzmo/lucero/text-field";
+// src/components/item-option-position-picker/item-option-position-picker.module.scss?inline
+var s = ":host{height:var(--luzmo-item-option-position-picker-grid-height,var(--item-option-position-picker-grid-height));align-items:center;display:flex}.luzmo-item-option{height:var(--luzmo-item-option-position-picker-grid-height,var(--item-option-position-picker-grid-height))}.position-grid{gap:var(--luzmo-item-option-position-picker-grid-gap,var(--item-option-position-picker-grid-gap));width:var(--luzmo-item-option-position-picker-grid-width,var(--item-option-position-picker-grid-width));box-sizing:border-box;border:.0625rem solid var(--luzmo-item-option-position-picker-grid-border-color,var(--luzmo-border-color));padding:var(--luzmo-item-option-position-picker-grid-padding,var(--item-option-position-picker-grid-padding));border-radius:var(--luzmo-item-option-position-picker-grid-border-radius,var(--item-option-position-picker-grid-border-radius));grid-template-columns:repeat(3,1fr);display:grid}.position-item{width:100%;height:var(--luzmo-item-option-position-picker-item-height,var(--item-option-position-picker-item-height));box-sizing:border-box;border:.0625rem solid var(--luzmo-item-option-position-picker-border-color,var(--luzmo-border-color));border-radius:var(--luzmo-item-option-position-picker-border-radius,var(--item-option-position-picker-border-radius));background:var(--luzmo-item-option-position-picker-background,var(--luzmo-background-color-highlight));transition:background-color var(--luzmo-item-option-position-picker-animation-duration,var(--luzmo-animation-duration)) ease-in-out;cursor:pointer}.position-item:hover{background-color:var(--luzmo-item-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-item-option-position-picker-background-selected,var(--luzmo-primary));transition:background-color var(--luzmo-item-option-position-picker-selected-animation-duration,0) ease-in-out}.position-item:focus-visible{outline:2px solid var(--luzmo-item-option-position-picker-focus-color,var(--luzmo-primary));outline-offset:1px}.position-item.position-item-not-allowed{opacity:0;pointer-events:none}:host{--item-option-position-picker-grid-height:7rem;--item-option-position-picker-grid-width:7rem;--item-option-position-picker-border-radius:var(--luzmo-border-radius);--item-option-position-picker-grid-border-radius:var(--luzmo-border-radius);--item-option-position-picker-grid-padding:.25rem;--item-option-position-picker-item-height:1.75rem;--item-option-position-picker-grid-gap:.25rem}:host([size=s]){--item-option-position-picker-grid-height:5.125rem;--item-option-position-picker-grid-width:5.625rem;--item-option-position-picker-border-radius:var(--luzmo-border-radius);--item-option-position-picker-grid-border-radius:var(--luzmo-border-radius-s);--item-option-position-picker-grid-padding:.125rem;--item-option-position-picker-item-height:1.5rem;--item-option-position-picker-grid-gap:.125rem}:host([size=l]){--item-option-position-picker-grid-height:8rem;--item-option-position-picker-grid-width:8rem;--item-option-position-picker-border-radius:var(--luzmo-border-radius-l);--item-option-position-picker-grid-border-radius:var(--luzmo-border-radius-l);--item-option-position-picker-grid-padding:.3rem;--item-option-position-picker-item-height:2rem;--item-option-position-picker-grid-gap:.25rem}:host([size=xl]){--item-option-position-picker-grid-height:9rem;--item-option-position-picker-grid-width:9rem;--item-option-position-picker-border-radius:var(--luzmo-border-radius-xl);--item-option-position-picker-grid-border-radius:var(--luzmo-border-radius-xl);--item-option-position-picker-grid-padding:.375rem;--item-option-position-picker-item-height:2.25rem;--item-option-position-picker-grid-gap:.275rem}", c, l = [
+	"topLeft",
+	"top",
+	"topRight",
+	"left",
+	"center",
+	"right",
+	"bottomLeft",
+	"bottom",
+	"bottomRight"
+], u = l.filter((e) => e !== "center"), d = {
+	topLeft: "Top left",
+	top: "Top center",
+	topRight: "Top right",
+	left: "Center left",
+	center: "Center",
+	right: "Center right",
+	bottomLeft: "Bottom left",
+	bottom: "Bottom center",
+	bottomRight: "Bottom right"
+}, f = class extends t {
+	constructor(...e) {
+		super(...e), this.default = "topRight", this.positions = u, this.readonly = !1;
+	}
+	_handleEvent() {
+		this.dispatchEvent(new CustomEvent("luzmo-option-changed", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: { value: this.value }
+		}));
+	}
+	_handleClick(e) {
+		this.positions?.includes(e) && (this.value = e, this._handleEvent());
+	}
+	_handleKeyDown(e, t) {
+		if (t.key === "Enter" || t.key === " ") {
+			t.preventDefault(), this._handleClick(e);
+			return;
+		}
+		let n = l.filter((e) => this.positions?.includes(e)), r = n.indexOf(e);
+		if (r === -1) return;
+		let i = -1;
+		if (t.key === "ArrowRight" || t.key === "ArrowDown" ? (t.preventDefault(), i = (r + 1) % n.length) : (t.key === "ArrowLeft" || t.key === "ArrowUp") && (t.preventDefault(), i = (r - 1 + n.length) % n.length), i >= 0) {
+			let e = n[i];
+			(this.shadowRoot?.querySelector(`[data-position="${e}"]`))?.focus();
+		}
+	}
+	willUpdate() {
+		this.value = this.value ?? this.default ?? "topRight", this.positions = this.positions ?? u;
+	}
+	renderController() {
+		let e = l.map((e) => {
+			let t = this.positions?.includes(e) ?? !1, n = this.value === e, a = t && n, o = a || t && !l.some((e) => this.positions?.includes(e) && this.value === e);
+			return r`
+        <div
+          class="position-item ${t ? "position-item-allowed" : "position-item-not-allowed"} ${n ? "selected" : ""}"
+          role="radio"
+          aria-checked=${n ? "true" : "false"}
+          aria-disabled=${t ? "false" : "true"}
+          aria-label=${d[e] ?? e}
+          data-position=${e}
+          tabindex=${t ? a || o ? "0" : "-1" : i}
+          @click=${this._handleClick.bind(this, e)}
+          @keydown=${t ? this._handleKeyDown.bind(this, e) : i}
+        ></div>
+      `;
+		});
+		return r` <div class="position-grid" role="radiogroup" aria-label=${this.label ?? "Position"} id="luzmo-item-option-control">${e}</div> `;
+	}
+};
+// src/components/item-option-position-picker/index.ts
+c = f, c.styles = [n(c, "styles", c), a(s)], e([o({
+	type: String,
+	reflect: !0
+})], f.prototype, "value", void 0), e([o({
+	type: String,
+	reflect: !0,
+	attribute: "default-position"
+})], f.prototype, "default", void 0), e([o({
+	type: Array,
+	reflect: !0
+})], f.prototype, "positions", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "readonly", void 0), customElements.get("luzmo-item-option-position-picker") || customElements.define("luzmo-item-option-position-picker", f);
+export { f as t };

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

@@ -17,4 +17,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`});const e=require("../item-option-positions-number-field-BM47f9X1.cjs");exports.LuzmoItemOptionPositionsNumberField=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../item-option-positions-number-field-BQ8gFOAn.cjs");exports.LuzmoItemOptionPositionsNumberField=e.t;

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

@@ -17,5 +17,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { t as e } from "../item-option-positions-number-field-C8CQV2Sp.js";
-export { e as LuzmoItemOptionPositionsNumberField };
+export { t as LuzmoItemOptionPositionsNumberField } from "../item-option-positions-number-field-Bqfg0MJm.js";

package/components/item-option-positions-number-field-BQ8gFOAn.cjs

@@ -0,0 +1,49 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. 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-BWMfo_w4.cjs");const e=require("./decorate-DCJt-2rt.cjs"),t=require("./item-option-base-BMy6dWbc.cjs");let n=require("@luzmo/icons"),r=require("lit"),i=require("lit/decorators.js"),a=require("@lit/localize");require("@luzmo/lucero/number-field");var o=`:host{--item-option-positions-number-field-container-row-gap:var(--luzmo-spacing-2);--item-option-positions-number-field-container-column-gap:var(--luzmo-spacing-2);--item-option-positions-number-field-sync-height:calc(var(--luzmo-component-height) * 1.5)}:host([size=s]){--item-option-positions-number-field-sync-height:calc(var(--luzmo-component-height-s) * 1.5)}:host([size=l]){--item-option-positions-number-field-sync-height:calc(var(--luzmo-component-height-l) * 1.5)}:host([size=xl]){--item-option-positions-number-field-sync-height:calc(var(--luzmo-component-height-xl) * 1.5)}.positions-container{max-width:var(--luzmo-item-option-positions-number-field-container-max-width,var(--item-option-positions-number-field-container-max-width));row-gap:var(--luzmo-item-option-positions-number-field-container-row-gap,var(--item-option-positions-number-field-container-row-gap));column-gap:var(--luzmo-item-option-positions-number-field-container-column-gap,var(--item-option-positions-number-field-container-column-gap));grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);display:grid}.position,.sync-button{justify-content:center;align-items:center;display:flex}.sync-button{cursor:pointer;border-radius:var(--luzmo-item-option-positions-number-field-sync-border-radius,var(--luzmo-border-radius));height:var(--luzmo-item-option-positions-number-field-sync-height,var(--item-option-positions-number-field-sync-height));font:inherit;color:inherit;background:0 0;border:none;padding:0}.sync-button:focus-visible{outline:var(--luzmo-indicator-width) solid var(--luzmo-item-option-positions-number-field-sync-border-color,var(--luzmo-indicator-color));outline-offset:1px}.no-sync-center{border:var(--luzmo-item-option-positions-number-field-no-sync-center-border-width,var(--luzmo-border-width)) solid var(--luzmo-item-option-positions-number-field-no-sync-center-border-color,var(--luzmo-border-color));border-radius:var(--luzmo-item-option-positions-number-field-no-sync-center-border-radius,var(--luzmo-border-radius));height:var(--luzmo-item-option-positions-number-field-sync-height,var(--item-option-positions-number-field-sync-height));background-color:var(--luzmo-item-option-positions-number-field-no-sync-center-background-color,var(--luzmo-background-color-highlight))}`,s=class extends t.t{constructor(...e){super(...e),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[(0,r.unsafeCSS)(o)]}_calculateSyncedValue(){let e,t={};return this.positions?.forEach(n=>{t[n]=this.values?.[n]??this.positionConfiguration?.[n]?.default??0,e=typeof e==`number`&&t[n]?Math.min(e,t[n]):t[n]}),e}toggleSync(){if(this.sync=!this.sync,this.sync&&(this.syncedValue=this._calculateSyncedValue(),typeof this.syncedValue==`number`)){this.values={...this.values};for(let e of this.positions??[])this.values[e]=this.syncedValue}}_handleEvent(e){let t=e.target.getAttribute(`position`),n=e.target.value,r={};if(t&&typeof n==`number`){if(this.canSync&&this.sync&&t===`center`){this.syncedValue=n;for(let e of this.positions??[])r[e]=n}else r={...this.values,[t]:n};this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{let e=Object.keys(this.values??{}),t=Object.keys(r),n=!0;e.length!==t.length&&(n=!1);for(let t of e)this.values?.[t]!==r[t]&&(n=!1);n||(this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{values:{...r}}})),this.values=r)},this.debounce??200)}}_renderNumberField(e){return this.positions?.includes(e)||e===`center`?this.canSync&&(this.sync&&e!==`center`||!this.sync&&e===`center`)?r.html`<button
+          class="sync-button ${this.sync?``:`sync`}"
+          position=${e}
+          aria-label=${(0,a.msg)(`Toggle sync`,{desc:`Aria label for sync toggle button`})}
+          aria-pressed=${this.sync?`true`:`false`}
+          @click=${this.toggleSync}
+        >
+          ${(0,n.luzmoIcon)(n.luzmoLockOutline)}
+        </button>`:!this.canSync&&!this.positions?.includes(`center`)&&e===`center`?r.html`
+          <div class="no-sync-center"></div>
+        `:r.html`<div class="position">
+        <luzmo-number-field
+          label=${e}
+          position=${e}
+          .value=${this.sync&&this.canSync?this.syncedValue??0:this.values?.[e]??this.positionConfiguration?.[e]?.default??0}
+          .disabled=${this.disabled}
+          .size=${this.size}
+          .min=${this.positionConfiguration?.[e]?.min??0}
+          .max=${this.positionConfiguration?.[e]?.max??100}
+          .step=${this.positionConfiguration?.[e]?.step??1}
+          .invalid=${this.invalid}
+          @change=${this._handleEvent}
+          @input=${this._handleEvent}
+        >
+        </luzmo-number-field>
+      </div>`:r.html`
+      <div class="position"></div>
+    `}firstUpdated(){if(this.canSync&&!this.positions?.includes(`center`)){let e=this.values?.left??this.positionConfiguration?.left?.default,t=this.values?.top??this.positionConfiguration?.top?.default,n=this.values?.right??this.positionConfiguration?.right?.default,r=this.values?.bottom??this.positionConfiguration?.bottom?.default;this.sync=e===t&&t===n&&n===r}else this.sync=!1}willUpdate(){this.positions||=[`top`,`right`,`bottom`,`left`]}renderController(){this._calculateSyncedValue();let e=this._positions.map(e=>{let t=e.map(e=>this._renderNumberField(e));return r.html`${t}`});return r.html`<div class="positions-container-wrapper" id="luzmo-item-option-control" role="group" aria-label=${this.label??(0,a.msg)(`Position values`,{desc:`Accessible label for positions number field group`})}>
+      <div class="positions-container">${e}</div>
+    </div>`}};e.t([(0,i.property)({type:Array,reflect:!0})],s.prototype,`positions`,void 0),e.t([(0,i.property)({type:Object,reflect:!0})],s.prototype,`values`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0,attribute:`can-sync`})],s.prototype,`canSync`,void 0),e.t([(0,i.property)({type:Object})],s.prototype,`positionConfiguration`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`invalid`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`readonly`,void 0),e.t([(0,i.property)({type:Number,reflect:!0})],s.prototype,`debounce`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`sync`,void 0),e.t([(0,i.state)()],s.prototype,`syncedValue`,void 0),customElements.get(`luzmo-item-option-positions-number-field`)||customElements.define(`luzmo-item-option-positions-number-field`,s),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}});

package/components/item-option-positions-number-field-Bqfg0MJm.js

@@ -0,0 +1,166 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import "./tokens-6HmQYnEP.js";
+import { t as e } from "./decorate-B2TzfnLZ.js";
+import { t } from "./item-option-base-BfHciede.js";
+import { luzmoIcon as n, luzmoLockOutline as r } from "@luzmo/icons";
+import { html as i, unsafeCSS as a } from "lit";
+import { property as o, state as s } from "lit/decorators.js";
+import { msg as c } from "@lit/localize";
+import "@luzmo/lucero/number-field";
+// src/components/item-option-positions-number-field/item-option-positions-number-field.module.scss?inline
+var l = ":host{--item-option-positions-number-field-container-row-gap:var(--luzmo-spacing-2);--item-option-positions-number-field-container-column-gap:var(--luzmo-spacing-2);--item-option-positions-number-field-sync-height:calc(var(--luzmo-component-height) * 1.5)}:host([size=s]){--item-option-positions-number-field-sync-height:calc(var(--luzmo-component-height-s) * 1.5)}:host([size=l]){--item-option-positions-number-field-sync-height:calc(var(--luzmo-component-height-l) * 1.5)}:host([size=xl]){--item-option-positions-number-field-sync-height:calc(var(--luzmo-component-height-xl) * 1.5)}.positions-container{max-width:var(--luzmo-item-option-positions-number-field-container-max-width,var(--item-option-positions-number-field-container-max-width));row-gap:var(--luzmo-item-option-positions-number-field-container-row-gap,var(--item-option-positions-number-field-container-row-gap));column-gap:var(--luzmo-item-option-positions-number-field-container-column-gap,var(--item-option-positions-number-field-container-column-gap));grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);display:grid}.position,.sync-button{justify-content:center;align-items:center;display:flex}.sync-button{cursor:pointer;border-radius:var(--luzmo-item-option-positions-number-field-sync-border-radius,var(--luzmo-border-radius));height:var(--luzmo-item-option-positions-number-field-sync-height,var(--item-option-positions-number-field-sync-height));font:inherit;color:inherit;background:0 0;border:none;padding:0}.sync-button:focus-visible{outline:var(--luzmo-indicator-width) solid var(--luzmo-item-option-positions-number-field-sync-border-color,var(--luzmo-indicator-color));outline-offset:1px}.no-sync-center{border:var(--luzmo-item-option-positions-number-field-no-sync-center-border-width,var(--luzmo-border-width)) solid var(--luzmo-item-option-positions-number-field-no-sync-center-border-color,var(--luzmo-border-color));border-radius:var(--luzmo-item-option-positions-number-field-no-sync-center-border-radius,var(--luzmo-border-radius));height:var(--luzmo-item-option-positions-number-field-sync-height,var(--item-option-positions-number-field-sync-height));background-color:var(--luzmo-item-option-positions-number-field-no-sync-center-background-color,var(--luzmo-background-color-highlight))}", u = class extends t {
+	constructor(...e) {
+		super(...e), 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 [a(l)];
+	}
+	_calculateSyncedValue() {
+		let e, t = {};
+		return this.positions?.forEach((n) => {
+			t[n] = this.values?.[n] ?? this.positionConfiguration?.[n]?.default ?? 0, e = typeof e == "number" && t[n] ? Math.min(e, t[n]) : t[n];
+		}), e;
+	}
+	toggleSync() {
+		if (this.sync = !this.sync, this.sync && (this.syncedValue = this._calculateSyncedValue(), typeof this.syncedValue == "number")) {
+			this.values = { ...this.values };
+			for (let e of this.positions ?? []) this.values[e] = this.syncedValue;
+		}
+	}
+	_handleEvent(e) {
+		let t = e.target.getAttribute("position"), n = e.target.value, r = {};
+		if (t && typeof n == "number") {
+			if (this.canSync && this.sync && t === "center") {
+				this.syncedValue = n;
+				for (let e of this.positions ?? []) r[e] = n;
+			} else r = {
+				...this.values,
+				[t]: n
+			};
+			this.debounceTimeout && clearTimeout(this.debounceTimeout), this.debounceTimeout = setTimeout(() => {
+				let e = Object.keys(this.values ?? {}), t = Object.keys(r), n = !0;
+				e.length !== t.length && (n = !1);
+				for (let t of e) this.values?.[t] !== r[t] && (n = !1);
+				n || (this.dispatchEvent(new CustomEvent("luzmo-option-changed", {
+					bubbles: !0,
+					composed: !0,
+					cancelable: !0,
+					detail: { values: { ...r } }
+				})), this.values = r);
+			}, this.debounce ?? 200);
+		}
+	}
+	_renderNumberField(e) {
+		return this.positions?.includes(e) || e === "center" ? this.canSync && (this.sync && e !== "center" || !this.sync && e === "center") ? i`<button
+          class="sync-button ${this.sync ? "" : "sync"}"
+          position=${e}
+          aria-label=${c("Toggle sync", { desc: "Aria label for sync toggle button" })}
+          aria-pressed=${this.sync ? "true" : "false"}
+          @click=${this.toggleSync}
+        >
+          ${n(r)}
+        </button>` : !this.canSync && !this.positions?.includes("center") && e === "center" ? i`
+          <div class="no-sync-center"></div>
+        ` : i`<div class="position">
+        <luzmo-number-field
+          label=${e}
+          position=${e}
+          .value=${this.sync && this.canSync ? this.syncedValue ?? 0 : this.values?.[e] ?? this.positionConfiguration?.[e]?.default ?? 0}
+          .disabled=${this.disabled}
+          .size=${this.size}
+          .min=${this.positionConfiguration?.[e]?.min ?? 0}
+          .max=${this.positionConfiguration?.[e]?.max ?? 100}
+          .step=${this.positionConfiguration?.[e]?.step ?? 1}
+          .invalid=${this.invalid}
+          @change=${this._handleEvent}
+          @input=${this._handleEvent}
+        >
+        </luzmo-number-field>
+      </div>` : i`
+      <div class="position"></div>
+    `;
+	}
+	firstUpdated() {
+		if (this.canSync && !this.positions?.includes("center")) {
+			let e = this.values?.left ?? this.positionConfiguration?.left?.default, t = this.values?.top ?? this.positionConfiguration?.top?.default, n = this.values?.right ?? this.positionConfiguration?.right?.default, r = this.values?.bottom ?? this.positionConfiguration?.bottom?.default;
+			this.sync = e === t && t === n && n === r;
+		} else this.sync = !1;
+	}
+	willUpdate() {
+		this.positions ||= [
+			"top",
+			"right",
+			"bottom",
+			"left"
+		];
+	}
+	renderController() {
+		this._calculateSyncedValue();
+		let e = this._positions.map((e) => {
+			let t = e.map((e) => this._renderNumberField(e));
+			return i`${t}`;
+		});
+		return i`<div class="positions-container-wrapper" id="luzmo-item-option-control" role="group" aria-label=${this.label ?? c("Position values", { desc: "Accessible label for positions number field group" })}>
+      <div class="positions-container">${e}</div>
+    </div>`;
+	}
+};
+// src/components/item-option-positions-number-field/index.ts
+e([o({
+	type: Array,
+	reflect: !0
+})], u.prototype, "positions", void 0), e([o({
+	type: Object,
+	reflect: !0
+})], u.prototype, "values", void 0), e([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "can-sync"
+})], u.prototype, "canSync", void 0), e([o({ type: Object })], u.prototype, "positionConfiguration", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "invalid", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "readonly", void 0), e([o({
+	type: Number,
+	reflect: !0
+})], u.prototype, "debounce", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "sync", void 0), e([s()], u.prototype, "syncedValue", void 0), customElements.get("luzmo-item-option-positions-number-field") || customElements.define("luzmo-item-option-positions-number-field", u);
+export { u as t };

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

@@ -17,4 +17,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`});const e=require("../item-option-radio-button-group-EWnKhsKv.cjs");exports.LuzmoItemOptionRadioButtonGroup=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../item-option-radio-button-group-2hX-E2WV.cjs");exports.LuzmoItemOptionRadioButtonGroup=e.t;

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

@@ -17,5 +17,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { t as e } from "../item-option-radio-button-group-CeiVKYTC.js";
-export { e as LuzmoItemOptionRadioButtonGroup };
+export { t as LuzmoItemOptionRadioButtonGroup } from "../item-option-radio-button-group-Bk7VQlpx.js";

package/components/item-option-radio-button-group-2hX-E2WV.cjs

@@ -0,0 +1,37 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. 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-BWMfo_w4.cjs");const e=require("./decorate-DCJt-2rt.cjs"),t=require("./item-option-base-BMy6dWbc.cjs"),n=require("./superPropGet-DmmlTXgo.cjs");require("@luzmo/lucero/action-button");let r=require("lit"),i=require("lit/decorators.js");require("@luzmo/lucero/action-group");var a,o=class extends t.t{constructor(...e){super(...e),this.values={},this.disabled=!1}generateRadioButtons(){let e=Object.entries(this.values).map(([e,t])=>r.html`
+        <luzmo-action-button value=${e} ?disabled=${this.disabled}>
+          ${t}
+        </luzmo-action-button>
+      `);return r.html` ${e} `}_handleEvent(){this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue==`function`?this.toValue(this.actionGroup?.selected?.[0]):this.actionGroup?.selected?.[0]}}))}renderController(){let e=typeof this.parseValue==`function`?this.parseValue(this.value):this.value,t=typeof this.parseValue==`function`?this.parseValue(this.default):this.default;return r.html`
+      <luzmo-action-group
+        id="luzmo-item-option-control"
+        compact
+        selects="single"
+        emphasized
+        @change=${this._handleEvent}
+        .size=${this.size}
+        .selected=${e&&this.values[e]?[e]:t&&this.values[t]?[t]:[Object.keys(this.values)[0]]}
+        ?disabled=${this.disabled}
+      >
+        ${this.generateRadioButtons()}
+      </luzmo-action-group>
+    `}};a=o,a.styles=[n.t(a,`styles`,a)],e.t([(0,i.property)({type:Array})],o.prototype,`values`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],o.prototype,`disabled`,void 0),e.t([(0,i.property)({type:String})],o.prototype,`value`,void 0),e.t([(0,i.property)({type:String})],o.prototype,`default`,void 0),e.t([(0,i.property)()],o.prototype,`parseValue`,void 0),e.t([(0,i.property)()],o.prototype,`toValue`,void 0),e.t([(0,i.query)(`luzmo-action-group`)],o.prototype,`actionGroup`,void 0),customElements.get(`luzmo-item-option-radio-button-group`)||customElements.define(`luzmo-item-option-radio-button-group`,o),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});

package/components/item-option-radio-button-group-Bk7VQlpx.js

@@ -0,0 +1,72 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import "./tokens-6HmQYnEP.js";
+import { t as e } from "./decorate-B2TzfnLZ.js";
+import { t } from "./item-option-base-BfHciede.js";
+import { t as n } from "./superPropGet-CUPN9Fvv.js";
+import "@luzmo/lucero/action-button";
+import { html as r } from "lit";
+import { property as i, query as a } from "lit/decorators.js";
+import "@luzmo/lucero/action-group";
+// src/components/item-option-radio-button-group/item-option-radio-button-group.ts
+var o, s = class extends t {
+	constructor(...e) {
+		super(...e), this.values = {}, this.disabled = !1;
+	}
+	generateRadioButtons() {
+		let e = Object.entries(this.values).map(([e, t]) => r`
+        <luzmo-action-button value=${e} ?disabled=${this.disabled}>
+          ${t}
+        </luzmo-action-button>
+      `);
+		return r` ${e} `;
+	}
+	_handleEvent() {
+		this.dispatchEvent(new CustomEvent("luzmo-option-changed", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: { value: typeof this.toValue == "function" ? this.toValue(this.actionGroup?.selected?.[0]) : this.actionGroup?.selected?.[0] }
+		}));
+	}
+	renderController() {
+		let e = typeof this.parseValue == "function" ? this.parseValue(this.value) : this.value, t = typeof this.parseValue == "function" ? this.parseValue(this.default) : this.default;
+		return r`
+      <luzmo-action-group
+        id="luzmo-item-option-control"
+        compact
+        selects="single"
+        emphasized
+        @change=${this._handleEvent}
+        .size=${this.size}
+        .selected=${e && this.values[e] ? [e] : t && this.values[t] ? [t] : [Object.keys(this.values)[0]]}
+        ?disabled=${this.disabled}
+      >
+        ${this.generateRadioButtons()}
+      </luzmo-action-group>
+    `;
+	}
+};
+// src/components/item-option-radio-button-group/index.ts
+o = s, o.styles = [n(o, "styles", o)], e([i({ type: Array })], s.prototype, "values", void 0), e([i({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "disabled", void 0), e([i({ type: String })], s.prototype, "value", void 0), e([i({ type: String })], s.prototype, "default", void 0), e([i()], s.prototype, "parseValue", void 0), e([i()], s.prototype, "toValue", void 0), e([a("luzmo-action-group")], s.prototype, "actionGroup", void 0), customElements.get("luzmo-item-option-radio-button-group") || customElements.define("luzmo-item-option-radio-button-group", s);
+export { s as t };

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

@@ -17,4 +17,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`});const e=require("../item-option-slider-ax9GzaT-.cjs");exports.LuzmoItemOptionSlider=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../item-option-slider-CyWKWr5D.cjs");exports.LuzmoItemOptionSlider=e.t;

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

@@ -17,5 +17,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { t as e } from "../item-option-slider-C7Luz7WZ.js";
-export { e as LuzmoItemOptionSlider };
+export { t as LuzmoItemOptionSlider } from "../item-option-slider-Bo5vs6nr.js";

package/components/item-option-slider-Bo5vs6nr.js

@@ -0,0 +1,89 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import "./tokens-6HmQYnEP.js";
+import { t as e } from "./decorate-B2TzfnLZ.js";
+import { t } from "./item-option-base-BfHciede.js";
+import { html as n, unsafeCSS as r } from "lit";
+import { property as i, query as a } from "lit/decorators.js";
+import "@luzmo/lucero/slider";
+// src/components/item-option-slider/item-option-slider.module.scss?inline
+var o = ":host{overflow:visible}luzmo-slider{contain:layout}", s = class extends t {
+	constructor(...e) {
+		super(...e), this.value = 0, this.default = 0, this.min = 0, this.max = 100, this.step = 100, this.debounce = 200, this._debounceTimeout = null;
+	}
+	static get styles() {
+		return [...super.styles, r(o)];
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._debounceTimeout &&= (clearTimeout(this._debounceTimeout), null);
+	}
+	_emitOptionChanged(e) {
+		this._lastEmittedSliderValue = e, this.dispatchEvent(new CustomEvent("luzmo-option-changed", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0,
+			detail: { value: typeof this.toValue == "function" ? this.toValue(e) : e }
+		}));
+	}
+	_handleEvent(e) {
+		let t = this._slider.value;
+		(e.type !== "change" || this._debounceTimeout || !Object.is(t, this._lastEmittedSliderValue)) && (this._debounceTimeout &&= (clearTimeout(this._debounceTimeout), null), this.debounce > 0 ? this._debounceTimeout = setTimeout(() => {
+			this._debounceTimeout = null, this._emitOptionChanged(t);
+		}, this.debounce) : this._emitOptionChanged(t));
+	}
+	renderController() {
+		let e = typeof this.parseValue == "function" ? this.parseValue(this.value) : this.value, t = typeof this.parseValue == "function" ? this.parseValue(this.default) : this.default;
+		return n`
+      <luzmo-slider
+        id="luzmo-item-option-control"
+        .label=${this.label}
+        .min=${this.min}
+        .max=${this.max}
+        .value=${e ?? t}
+        .step=${this.step}
+        .size=${this.size}
+        .disabled=${this.disabled}
+        @input=${this._handleEvent}
+        @change=${this._handleEvent}
+      ></luzmo-slider>
+    `;
+	}
+};
+// src/components/item-option-slider/index.ts
+e([i({
+	type: Number,
+	reflect: !0
+})], s.prototype, "value", void 0), e([i({
+	type: Number,
+	reflect: !0
+})], s.prototype, "default", void 0), e([i({
+	type: Number,
+	reflect: !0
+})], s.prototype, "min", void 0), e([i({
+	type: Number,
+	reflect: !0
+})], s.prototype, "max", void 0), e([i({
+	type: Number,
+	reflect: !0
+})], s.prototype, "step", void 0), e([i({
+	type: Number,
+	reflect: !0
+})], s.prototype, "debounce", void 0), e([i()], s.prototype, "parseValue", void 0), e([i()], s.prototype, "toValue", void 0), e([a("luzmo-slider")], s.prototype, "_slider", void 0), customElements.get("luzmo-item-option-slider") || customElements.define("luzmo-item-option-slider", s);
+export { s as t };