@luzmo/analytics-components-kit 1.0.9-beta.1 → 1.0.9-beta.11

package/components/item-option-multi-language-field-BFgbOzMM.js

@@ -0,0 +1,81 @@
+/*! * 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-Ov1pCR4Y.js";
+import { t as e } from "./decorate-DyMgX_Uh.js";
+import { t } from "./item-option-base-BIDIiNfI.js";
+import { t as n } from "./superPropGet-CBezYwzm.js";
+import { html as r } from "lit";
+import { property as i, query as a } from "lit/decorators.js";
+import "@luzmo/lucero/multi-language-field";
+//#region src/components/item-option-multi-language-field/item-option-multi-language-field.ts
+var o, s = class extends t {
+	constructor(...e) {
+		super(...e), this.value = {}, this.invalid = !1, this.readonly = !1, this.language = "en", this.debounce = 200;
+	}
+	_handleEvent() {
+		this.debounceTimeout && clearTimeout(this.debounceTimeout), this.debounceTimeout = setTimeout(() => {
+			this.dispatchEvent(new CustomEvent("luzmo-option-changed", {
+				bubbles: !0,
+				composed: !0,
+				cancelable: !0,
+				detail: { value: typeof this.toValue == "function" ? this.toValue(this.multiLangFieldElement?.value ?? {}, this.language ?? "en") : this.multiLangFieldElement?.value ?? {} }
+			}));
+		}, this.debounce ?? 200);
+	}
+	renderController() {
+		return r`
+      <luzmo-multi-language-field
+        id="luzmo-item-option-control"
+        .value=${typeof this.parseValue == "function" ? this.parseValue(this.value, this.language ?? "en") : this.value}
+        .label=${this.label}
+        .language=${this.language ?? "en"}
+        .disabled=${this.disabled}
+        .size=${this.size}
+        .i18nPlaceholder=${this.placeholder ?? {}}
+        .invalid=${this.invalid}
+        @change=${this._handleEvent}
+      >
+      </luzmo-multi-language-field>
+    `;
+	}
+};
+//#endregion
+//#region src/components/item-option-multi-language-field/index.ts
+o = s, o.styles = [n(o, "styles", o)], e([i({
+	type: Object,
+	reflect: !0
+})], s.prototype, "value", void 0), e([i({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "invalid", void 0), e([i({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "readonly", void 0), e([i({
+	type: String,
+	reflect: !0
+})], s.prototype, "language", void 0), e([i({
+	type: Object,
+	reflect: !0
+})], s.prototype, "placeholder", void 0), e([i()], s.prototype, "parseValue", void 0), e([i()], s.prototype, "toValue", void 0), e([i({
+	type: Number,
+	reflect: !0
+})], s.prototype, "debounce", void 0), e([a("luzmo-multi-language-field")], s.prototype, "multiLangFieldElement", void 0), customElements.get("luzmo-item-option-multi-language-field") || customElements.define("luzmo-item-option-multi-language-field", s);
+//#endregion
+export { s as t };

package/components/item-option-multi-language-field-Du609wC_.cjs

@@ -0,0 +1,33 @@
+/*! * 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-C6RQH9M8.cjs"),n=require("./superPropGet-DmmlTXgo.cjs");let r=require("lit"),i=require("lit/decorators.js");require("@luzmo/lucero/multi-language-field");var a,o=class extends t.t{constructor(...e){super(...e),this.value={},this.invalid=!1,this.readonly=!1,this.language=`en`,this.debounce=200}_handleEvent(){this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue==`function`?this.toValue(this.multiLangFieldElement?.value??{},this.language??`en`):this.multiLangFieldElement?.value??{}}}))},this.debounce??200)}renderController(){return r.html`
+      <luzmo-multi-language-field
+        id="luzmo-item-option-control"
+        .value=${typeof this.parseValue==`function`?this.parseValue(this.value,this.language??`en`):this.value}
+        .label=${this.label}
+        .language=${this.language??`en`}
+        .disabled=${this.disabled}
+        .size=${this.size}
+        .i18nPlaceholder=${this.placeholder??{}}
+        .invalid=${this.invalid}
+        @change=${this._handleEvent}
+      >
+      </luzmo-multi-language-field>
+    `}};a=o,a.styles=[n.t(a,`styles`,a)],e.t([(0,i.property)({type:Object,reflect:!0})],o.prototype,`value`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],o.prototype,`invalid`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],o.prototype,`readonly`,void 0),e.t([(0,i.property)({type:String,reflect:!0})],o.prototype,`language`,void 0),e.t([(0,i.property)({type:Object,reflect:!0})],o.prototype,`placeholder`,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.property)({type:Number,reflect:!0})],o.prototype,`debounce`,void 0),e.t([(0,i.query)(`luzmo-multi-language-field`)],o.prototype,`multiLangFieldElement`,void 0),customElements.get(`luzmo-item-option-multi-language-field`)||customElements.define(`luzmo-item-option-multi-language-field`,o),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});

package/components/item-option-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-number-field-Bg5r0IAX.cjs");exports.LuzmoItemOptionNumberField=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../item-option-number-field-CVAtj0UX.cjs");exports.LuzmoItemOptionNumberField=e.t;

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

@@ -17,12 +17,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-// Auto-generated initialization code
-(function() {
-	if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-		let e = document.createElement("style");
-		e.setAttribute("data-luzmo-vars", ""), e.textContent = "html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 20%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--luzmo-border-width: 1px;--luzmo-shadow-color-rgb: 0, 0, 0;--luzmo-shadow-opacity: 0.1;--luzmo-shadow-color: rgba(var(--luzmo-shadow-color-rgb), var(--luzmo-shadow-opacity));--luzmo-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-width: thin;--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba(var(--luzmo-border-color-rgb), 0.4);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-secondary-outline: rgba(255, 0, 255, 0.2);--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}", document.head.appendChild(e);
-	}
-})();
-import { t as e } from "../item-option-number-field-CALw8q_J.js";
+import { t as e } from "../item-option-number-field-CDcf6_4D.js";
 export { e as LuzmoItemOptionNumberField };

package/components/item-option-number-field-CDcf6_4D.js

@@ -0,0 +1,101 @@
+/*! * 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-Ov1pCR4Y.js";
+import { t as e } from "./decorate-DyMgX_Uh.js";
+import { t } from "./item-option-base-BIDIiNfI.js";
+import { t as n } from "./superPropGet-CBezYwzm.js";
+import { html as r } from "lit";
+import { property as i, query as a } from "lit/decorators.js";
+import "@luzmo/lucero/number-field";
+import { ifDefined as o } from "lit/directives/if-defined.js";
+//#region src/components/item-option-number-field/item-option-number-field.ts
+var s, c = class extends t {
+	constructor(...e) {
+		super(...e), 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("luzmo-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() {
+		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-number-field
+        id="luzmo-item-option-control"
+        style="min-width: ${this.minWidthInputField ?? "auto"}"
+        value=${o(e ?? t)}
+        .label=${this.label}
+        .size=${this.size}
+        .step=${this.step}
+        .min=${this.min}
+        .max=${this.max}
+        .unit=${this.unit}
+        .debounce=${this.debounce}
+        placeholder=${o(this.placeholder)}
+        .disabled=${this.disabled}
+        @change=${this._handleEvent}
+        @input=${this._handleEvent}
+      >
+      </luzmo-number-field>
+    `;
+	}
+};
+//#endregion
+//#region src/components/item-option-number-field/index.ts
+s = c, s.styles = [n(s, "styles", s)], e([i({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "disabled", void 0), e([i({
+	type: Number,
+	reflect: !0
+})], c.prototype, "min", void 0), e([i({
+	type: Number,
+	reflect: !0
+})], c.prototype, "max", void 0), e([i({
+	type: Number,
+	reflect: !0
+})], c.prototype, "default", void 0), e([i({
+	type: Number,
+	reflect: !0
+})], c.prototype, "value", void 0), e([i({
+	type: String,
+	reflect: !0
+})], c.prototype, "placeholder", void 0), e([i({
+	type: String,
+	reflect: !0,
+	attribute: "min-width-input-field"
+})], c.prototype, "minWidthInputField", void 0), e([i({
+	type: Number,
+	reflect: !0
+})], c.prototype, "step", void 0), e([i({
+	type: String,
+	reflect: !0
+})], c.prototype, "unit", void 0), e([i({
+	type: Number,
+	reflect: !0
+})], c.prototype, "debounce", void 0), e([i()], c.prototype, "parseValue", void 0), e([i()], c.prototype, "toValue", void 0), e([a("luzmo-number-field")], c.prototype, "numberField", void 0), customElements.get("luzmo-item-option-number-field") || customElements.define("luzmo-item-option-number-field", c);
+//#endregion
+export { c as t };

package/components/item-option-number-field-CVAtj0UX.cjs

@@ -0,0 +1,38 @@
+/*! * 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-C6RQH9M8.cjs"),n=require("./superPropGet-DmmlTXgo.cjs");let r=require("lit"),i=require("lit/decorators.js");require("@luzmo/lucero/number-field");let a=require("lit/directives/if-defined.js");var o,s=class extends t.t{constructor(...e){super(...e),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(`luzmo-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(){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-number-field
+        id="luzmo-item-option-control"
+        style="min-width: ${this.minWidthInputField??`auto`}"
+        value=${(0,a.ifDefined)(e??t)}
+        .label=${this.label}
+        .size=${this.size}
+        .step=${this.step}
+        .min=${this.min}
+        .max=${this.max}
+        .unit=${this.unit}
+        .debounce=${this.debounce}
+        placeholder=${(0,a.ifDefined)(this.placeholder)}
+        .disabled=${this.disabled}
+        @change=${this._handleEvent}
+        @input=${this._handleEvent}
+      >
+      </luzmo-number-field>
+    `}};o=s,o.styles=[n.t(o,`styles`,o)],e.t([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`disabled`,void 0),e.t([(0,i.property)({type:Number,reflect:!0})],s.prototype,`min`,void 0),e.t([(0,i.property)({type:Number,reflect:!0})],s.prototype,`max`,void 0),e.t([(0,i.property)({type:Number,reflect:!0})],s.prototype,`default`,void 0),e.t([(0,i.property)({type:Number,reflect:!0})],s.prototype,`value`,void 0),e.t([(0,i.property)({type:String,reflect:!0})],s.prototype,`placeholder`,void 0),e.t([(0,i.property)({type:String,reflect:!0,attribute:`min-width-input-field`})],s.prototype,`minWidthInputField`,void 0),e.t([(0,i.property)({type:Number,reflect:!0})],s.prototype,`step`,void 0),e.t([(0,i.property)({type:String,reflect:!0})],s.prototype,`unit`,void 0),e.t([(0,i.property)({type:Number,reflect:!0})],s.prototype,`debounce`,void 0),e.t([(0,i.property)()],s.prototype,`parseValue`,void 0),e.t([(0,i.property)()],s.prototype,`toValue`,void 0),e.t([(0,i.query)(`luzmo-number-field`)],s.prototype,`numberField`,void 0),customElements.get(`luzmo-item-option-number-field`)||customElements.define(`luzmo-item-option-number-field`,s),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}});

package/components/item-option-panel/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-panel-DBXgOsM4.cjs");exports.LuzmoItemOptionPanel=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../item-option-panel-0iHLl9-q.cjs");exports.LuzmoItemOptionPanel=e.t;

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

@@ -17,12 +17,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-// Auto-generated initialization code
-(function() {
-	if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-		let e = document.createElement("style");
-		e.setAttribute("data-luzmo-vars", ""), e.textContent = "html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 20%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--luzmo-border-width: 1px;--luzmo-shadow-color-rgb: 0, 0, 0;--luzmo-shadow-opacity: 0.1;--luzmo-shadow-color: rgba(var(--luzmo-shadow-color-rgb), var(--luzmo-shadow-opacity));--luzmo-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-width: thin;--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba(var(--luzmo-border-color-rgb), 0.4);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-secondary-outline: rgba(255, 0, 255, 0.2);--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}", document.head.appendChild(e);
-	}
-})();
-import { t as e } from "../item-option-panel-v7yUS9hb.js";
+import { t as e } from "../item-option-panel-DUlIB6qj.js";
 export { e as LuzmoItemOptionPanel };

package/components/item-option-panel-0iHLl9-q.cjs

@@ -0,0 +1,67 @@
+/*! * 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("./base-BmvsQ-s1.cjs"),t=require("./decorate-DCJt-2rt.cjs"),n=require("./item-option-BTSV33ft.cjs");let r=require("lit"),i=require("lit/decorators.js");require("@luzmo/lucero/divider");let a=require("@lit/task");require("@luzmo/lucero/accordion");var o=`:host{font-size:var(--luzmo-item-option-panel-font-size,var(--luzmo-font-size))}:host luzmo-divider{margin:var(--luzmo-item-option-panel-divider-vertical-margin,calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2))) 0;display:block}:host luzmo-item-option{margin:var(--luzmo-item-option-divider-vertical-margin,var(--luzmo-spacing-4)) 0;display:block}:host([size=s]){font-size:var(--luzmo-item-option-panel-font-size-s,var(--luzmo-font-size-s))}:host([size=l]){font-size:var(--luzmo-item-option-panel-font-size-l,var(--luzmo-font-size-l))}:host([size=xl]){font-size:var(--luzmo-item-option-panel-font-size-xl,var(--luzmo-font-size-xl))}`,s,c=class extends e.i{constructor(...e){super(...e),this._loadItemConfig=new a.Task(this,{task:async([e,t,r,i])=>{let a=this._getTranslationOverrides(i),o=this._getTranslationsFile(i),s=this._hasCustomTranslationsFile;if(this._translationOverrides=a??o?.options,this._groupTranslationOverrides=a,this._hasCustomTranslationsFile=!!o,r)return this._isCustomOptionsConfiguration=!0,this._optionsConfiguration=r,this._translations=o??{},this._itemTypeLoaded=void 0,this._languageLoaded=void 0,{config:this._optionsConfiguration};if(e){let r=e!==this._itemTypeLoaded,i=e!==this._itemTypeLoaded||t!==this._languageLoaded||!o&&s;if(r&&(this._optionsConfiguration=await n.r(e)??[],this._itemTypeLoaded=e),o)this._translations=o,this._languageLoaded=t;else if(i){let r=t??`en`;this._translations=await n.i(e,r,!0)??{},this._languageLoaded=t}this._isCustomOptionsConfiguration=!1}else this._optionsConfiguration=[],this._translations=o??{};return{config:this._optionsConfiguration}},args:()=>[this.itemType,this.language,this.customOptionsConfiguration,this.customTranslations]}),this.language=`en`,this.options={},this.slots=[],this.size=`m`,this._optionsConfiguration=[],this._translations={},this._hasCustomTranslationsFile=!1,this.renderAllGroups=e=>{if(!Array.isArray(e))return r.html`
+        
+      `;let t=e?.map(e=>{if(e?.children)return this.renderGroup(e)});return e&&e.length>0?r.html`<luzmo-accordion
+          variant="highlight"
+          .size=${this.size}
+          density="compact"
+          allow-multiple
+          no-content-padding
+          header-case="uppercase"
+          >${t}</luzmo-accordion
+        >`:r.html`
+          
+        `},this.renderGroup=e=>typeof e?.visibleIf==`function`&&!e.visibleIf({options:this.options,slots:this.slots,theme:this.theme})?r.html`
+        
+      `:r.html`<luzmo-accordion-item label=${e.key?this._groupTranslationOverrides?.[e.key]?.label??this._translations.groups?.[e.key]?.label??e.label??e.key:e.label??``} ?open=${e.open}>
+      ${(e=>e?.map(e=>{if(typeof e?.visibleIf==`function`&&!e.visibleIf({options:this.options,slots:this.slots,theme:this.theme}))return r.html`
+            
+          `;if(e?.control&&e.key)return this.renderOptionControl(e.key);if(e?.type===`divider`)return this.renderDivider();if(e?.type===`group`)return r.html`<luzmo-accordion
+            variant="highlight-child"
+            .size=${this.size}
+            density="compact"
+            allow-multiple
+            no-content-padding
+            header-case="default"
+            >${this.renderGroup(e)}</luzmo-accordion
+          >`}))(e.children)}
+    </luzmo-accordion-item>`,this.changedOptions=e=>{let t=e?.detail?.options;this.options=e?.detail?.options,e.preventDefault(),e.stopPropagation(),this.dispatchEvent(new CustomEvent(`luzmo-options-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{options:t}}))},this.renderOptionControl=e=>{let t=this._isCustomOptionsConfiguration,i=t?n.n(e,this.customOptionsConfiguration??[],!0):void 0,a=t?this._getOptionTranslation(e):this._translationOverrides;return r.html`<luzmo-item-option
+      class="control"
+      .itemType=${t?void 0:this.itemType}
+      .optionKey=${e}
+      .options=${this.options}
+      .customOptionConfiguration=${i}
+      .customTranslations=${a}
+      .slots=${this.slots}
+      .theme=${this.theme}
+      .size=${this.size}
+      .language=${this.language}
+      .apiUrl=${this.apiUrl}
+      .authKey=${this.authKey}
+      .authToken=${this.authToken}
+      @luzmo-options-changed=${this.changedOptions}
+    ></luzmo-item-option>`},this.renderDivider=()=>r.html`
+      <luzmo-divider></luzmo-divider>
+    `}render(){return this._loadItemConfig.render({pending:()=>r.html`
+          <p role="status">Loading...</p>
+        `,complete:e=>this.renderAllGroups(e.config),error:e=>(console.error(e),r.html`
+          
+        `)})}_getOptionTranslation(e){return this._translationOverrides?.[e]??this._translations.options?.[e]}_getTranslationsFile(e){if(!(!e||typeof e!=`object`)&&(`groups`in e||`options`in e))return e}_getTranslationOverrides(e){if(!(!e||typeof e!=`object`)&&!(`groups`in e||`options`in e))return e}};s=c,s.styles=(0,r.unsafeCSS)(o),t.t([(0,i.property)({type:String,reflect:!0})],c.prototype,`language`,void 0),t.t([(0,i.property)({type:String,reflect:!0,attribute:`item-type`})],c.prototype,`itemType`,void 0),t.t([(0,i.property)({type:Object})],c.prototype,`options`,void 0),t.t([(0,i.property)({type:Object})],c.prototype,`slots`,void 0),t.t([(0,i.property)({type:Object,reflect:!1})],c.prototype,`customOptionsConfiguration`,void 0),t.t([(0,i.property)({type:Object,reflect:!1})],c.prototype,`customTranslations`,void 0),t.t([(0,i.property)({type:Object})],c.prototype,`theme`,void 0),t.t([(0,i.property)({type:String,reflect:!0})],c.prototype,`size`,void 0),t.t([(0,i.property)({type:String,attribute:`api-url`,reflect:!0})],c.prototype,`apiUrl`,void 0),t.t([(0,i.property)({type:String,attribute:`auth-key`,reflect:!0})],c.prototype,`authKey`,void 0),t.t([(0,i.property)({type:String,attribute:`auth-token`,reflect:!0})],c.prototype,`authToken`,void 0),customElements.get(`luzmo-item-option-panel`)||customElements.define(`luzmo-item-option-panel`,c),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return c}});

package/components/item-option-panel-DUlIB6qj.js

@@ -0,0 +1,181 @@
+/*! * 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-Ov1pCR4Y.js";
+import { i as e } from "./base-CrpOMVeU.js";
+import { t } from "./decorate-DyMgX_Uh.js";
+import { i as n, n as r, r as i } from "./item-option-BUju6ZE1.js";
+import { html as a, unsafeCSS as o } from "lit";
+import { property as s } from "lit/decorators.js";
+import "@luzmo/lucero/divider";
+import { Task as c } from "@lit/task";
+import "@luzmo/lucero/accordion";
+//#region src/components/item-option-panel/item-option-panel.module.scss?inline
+var l = ":host{font-size:var(--luzmo-item-option-panel-font-size,var(--luzmo-font-size))}:host luzmo-divider{margin:var(--luzmo-item-option-panel-divider-vertical-margin,calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2))) 0;display:block}:host luzmo-item-option{margin:var(--luzmo-item-option-divider-vertical-margin,var(--luzmo-spacing-4)) 0;display:block}:host([size=s]){font-size:var(--luzmo-item-option-panel-font-size-s,var(--luzmo-font-size-s))}:host([size=l]){font-size:var(--luzmo-item-option-panel-font-size-l,var(--luzmo-font-size-l))}:host([size=xl]){font-size:var(--luzmo-item-option-panel-font-size-xl,var(--luzmo-font-size-xl))}", u, d = class extends e {
+	constructor(...e) {
+		super(...e), this._loadItemConfig = new c(this, {
+			task: async ([e, t, r, a]) => {
+				let o = this._getTranslationOverrides(a), s = this._getTranslationsFile(a), c = this._hasCustomTranslationsFile;
+				if (this._translationOverrides = o ?? s?.options, this._groupTranslationOverrides = o, this._hasCustomTranslationsFile = !!s, r) return this._isCustomOptionsConfiguration = !0, this._optionsConfiguration = r, this._translations = s ?? {}, this._itemTypeLoaded = void 0, this._languageLoaded = void 0, { config: this._optionsConfiguration };
+				if (e) {
+					let r = e !== this._itemTypeLoaded, a = e !== this._itemTypeLoaded || t !== this._languageLoaded || !s && c;
+					if (r && (this._optionsConfiguration = await i(e) ?? [], this._itemTypeLoaded = e), s) this._translations = s, this._languageLoaded = t;
+					else if (a) {
+						let r = t ?? "en";
+						this._translations = await n(e, r, !0) ?? {}, this._languageLoaded = t;
+					}
+					this._isCustomOptionsConfiguration = !1;
+				} else this._optionsConfiguration = [], this._translations = s ?? {};
+				return { config: this._optionsConfiguration };
+			},
+			args: () => [
+				this.itemType,
+				this.language,
+				this.customOptionsConfiguration,
+				this.customTranslations
+			]
+		}), this.language = "en", this.options = {}, this.slots = [], this.size = "m", this._optionsConfiguration = [], this._translations = {}, this._hasCustomTranslationsFile = !1, this.renderAllGroups = (e) => {
+			if (!Array.isArray(e)) return a`
+        
+      `;
+			let t = e?.map((e) => {
+				if (e?.children) return this.renderGroup(e);
+			});
+			return e && e.length > 0 ? a`<luzmo-accordion
+          variant="highlight"
+          .size=${this.size}
+          density="compact"
+          allow-multiple
+          no-content-padding
+          header-case="uppercase"
+          >${t}</luzmo-accordion
+        >` : a`
+          
+        `;
+		}, this.renderGroup = (e) => typeof e?.visibleIf == "function" && !e.visibleIf({
+			options: this.options,
+			slots: this.slots,
+			theme: this.theme
+		}) ? a`
+        
+      ` : a`<luzmo-accordion-item label=${e.key ? this._groupTranslationOverrides?.[e.key]?.label ?? this._translations.groups?.[e.key]?.label ?? e.label ?? e.key : e.label ?? ""} ?open=${e.open}>
+      ${((e) => e?.map((e) => {
+			if (typeof e?.visibleIf == "function" && !e.visibleIf({
+				options: this.options,
+				slots: this.slots,
+				theme: this.theme
+			})) return a`
+            
+          `;
+			if (e?.control && e.key) return this.renderOptionControl(e.key);
+			if (e?.type === "divider") return this.renderDivider();
+			if (e?.type === "group") return a`<luzmo-accordion
+            variant="highlight-child"
+            .size=${this.size}
+            density="compact"
+            allow-multiple
+            no-content-padding
+            header-case="default"
+            >${this.renderGroup(e)}</luzmo-accordion
+          >`;
+		}))(e.children)}
+    </luzmo-accordion-item>`, this.changedOptions = (e) => {
+			let t = e?.detail?.options;
+			this.options = e?.detail?.options, e.preventDefault(), e.stopPropagation(), this.dispatchEvent(new CustomEvent("luzmo-options-changed", {
+				bubbles: !0,
+				composed: !0,
+				cancelable: !0,
+				detail: { options: t }
+			}));
+		}, this.renderOptionControl = (e) => {
+			let t = this._isCustomOptionsConfiguration, n = t ? r(e, this.customOptionsConfiguration ?? [], !0) : void 0, i = t ? this._getOptionTranslation(e) : this._translationOverrides;
+			return a`<luzmo-item-option
+      class="control"
+      .itemType=${t ? void 0 : this.itemType}
+      .optionKey=${e}
+      .options=${this.options}
+      .customOptionConfiguration=${n}
+      .customTranslations=${i}
+      .slots=${this.slots}
+      .theme=${this.theme}
+      .size=${this.size}
+      .language=${this.language}
+      .apiUrl=${this.apiUrl}
+      .authKey=${this.authKey}
+      .authToken=${this.authToken}
+      @luzmo-options-changed=${this.changedOptions}
+    ></luzmo-item-option>`;
+		}, this.renderDivider = () => a`
+      <luzmo-divider></luzmo-divider>
+    `;
+	}
+	render() {
+		return this._loadItemConfig.render({
+			pending: () => a`
+          <p role="status">Loading...</p>
+        `,
+			complete: (e) => this.renderAllGroups(e.config),
+			error: (e) => (console.error(e), a`
+          
+        `)
+		});
+	}
+	_getOptionTranslation(e) {
+		return this._translationOverrides?.[e] ?? this._translations.options?.[e];
+	}
+	_getTranslationsFile(e) {
+		if (!(!e || typeof e != "object") && ("groups" in e || "options" in e)) return e;
+	}
+	_getTranslationOverrides(e) {
+		if (!(!e || typeof e != "object") && !("groups" in e || "options" in e)) return e;
+	}
+};
+//#endregion
+//#region src/components/item-option-panel/index.ts
+u = d, u.styles = o(l), t([s({
+	type: String,
+	reflect: !0
+})], d.prototype, "language", void 0), t([s({
+	type: String,
+	reflect: !0,
+	attribute: "item-type"
+})], d.prototype, "itemType", void 0), t([s({ type: Object })], d.prototype, "options", void 0), t([s({ type: Object })], d.prototype, "slots", void 0), t([s({
+	type: Object,
+	reflect: !1
+})], d.prototype, "customOptionsConfiguration", void 0), t([s({
+	type: Object,
+	reflect: !1
+})], d.prototype, "customTranslations", void 0), t([s({ type: Object })], d.prototype, "theme", void 0), t([s({
+	type: String,
+	reflect: !0
+})], d.prototype, "size", void 0), t([s({
+	type: String,
+	attribute: "api-url",
+	reflect: !0
+})], d.prototype, "apiUrl", void 0), t([s({
+	type: String,
+	attribute: "auth-key",
+	reflect: !0
+})], d.prototype, "authKey", void 0), t([s({
+	type: String,
+	attribute: "auth-token",
+	reflect: !0
+})], d.prototype, "authToken", void 0), customElements.get("luzmo-item-option-panel") || customElements.define("luzmo-item-option-panel", d);
+//#endregion
+export { d as t };

package/components/item-option-picker/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-picker-RFstpFwI.cjs");exports.LuzmoItemOptionPicker=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../item-option-picker-Dkc3nd3x.cjs");exports.LuzmoItemOptionPicker=e.t;

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

@@ -17,12 +17,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-// Auto-generated initialization code
-(function() {
-	if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-		let e = document.createElement("style");
-		e.setAttribute("data-luzmo-vars", ""), e.textContent = "html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 20%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--luzmo-border-width: 1px;--luzmo-shadow-color-rgb: 0, 0, 0;--luzmo-shadow-opacity: 0.1;--luzmo-shadow-color: rgba(var(--luzmo-shadow-color-rgb), var(--luzmo-shadow-opacity));--luzmo-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-width: thin;--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba(var(--luzmo-border-color-rgb), 0.4);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-secondary-outline: rgba(255, 0, 255, 0.2);--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}", document.head.appendChild(e);
-	}
-})();
-import { t as e } from "../item-option-picker-CZyzd3Nq.js";
+import { t as e } from "../item-option-picker-ClKAGpgs.js";
 export { e as LuzmoItemOptionPicker };