@luzmo/analytics-components-kit 1.0.1-alpha.96 → 1.0.1-alpha.97

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

@@ -0,0 +1,52 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 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.
+ * */
+"use strict";var d=Object.getPrototypeOf;var z=Reflect.get;var m=(c,t,e)=>z(d(c),e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@luzmo/icons");require("@luzmo/lucero/action-button");require("@luzmo/lucero/action-group");require("@luzmo/lucero/icon");const u=require("lit"),l=require("lit/decorators.js"),b=require("../edit-option-base-tFr8Qg2B.cjs"),g="luzmo-action-group{--luzmo-edit-option-action-button-group-button-background-hover: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-background-down: rgba( var(--luzmo-primary-rgb), .2 );--luzmo-edit-option-action-button-group-button-background-focus: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-content-color-default: var( --luzmo-font-color-disabled );--luzmo-edit-option-action-button-group-button-content-color-hover: var( --luzmo-font-color-hover );--luzmo-edit-option-action-button-group-button-content-color-down: var( --luzmo-font-color-down );--luzmo-edit-option-action-button-group-button-content-color-focus: var( --luzmo-font-color-focus )}luzmo-action-group[compact][quiet][emphasized]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=s]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=l]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-2)}luzmo-action-group[compact][quiet][emphasized][size=xl]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-3)}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-hover );--luzmo-action-button-background-color-down: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-focus: var( --luzmo-edit-option-action-button-group-button-background-focus );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-default );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-hover );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-focus: var( --luzmo-edit-option-action-button-group-button-content-color-focus )}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]:hover,luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-default: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down )}";var h=Object.defineProperty,i=(c,t,e,f)=>{for(var r=void 0,s=c.length-1,p;s>=0;s--)(p=c[s])&&(r=p(t,e,r)||r);return r&&h(t,e,r),r};const v={alignBottom:o.luzmoAlignBottom,alignMiddle:o.luzmoAlignMiddle,alignTop:o.luzmoAlignTop,alignLeft:o.luzmoAlignLeft,alignCenter:o.luzmoAlignCenter,alignRight:o.luzmoAlignRight,ban:o.luzmoBan,borderSolid:o.luzmoBorderSolid,borderDashed:o.luzmoBorderDashed,borderDotted:o.luzmoBorderDotted,compress:o.luzmoCompress,expand:o.luzmoExpand,arrowsExpand:o.luzmoArrowsExpand,arrowsHorizontal:o.luzmoArrowsHorizontal,arrowsVertical:o.luzmoArrowsVertical,italic:o.luzmoItalic,bold:o.luzmoBold,underline:o.luzmoUnderline,rows:o.luzmoRows,columns:o.luzmoColumns,table:o.luzmoTable},a=class a extends b.LuzmoEditOptionBase{constructor(){super(...arguments),this.values={},this.disabled=!1}_handleEvent(){const t=this.selects==="multiple"?this.actionGroup?.selected:this.actionGroup?.selected?.[0];this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:t}}))}_generateButtonContents(t){return typeof t=="string"?u.html`${t}`:t.iconName||t.icon?u.html`
+        <luzmo-icon
+          slot="icon"
+          .size=${this.size}
+          .icon=${t.icon??v[t.iconName]}
+          .label=${t.label??""}
+        ></luzmo-icon>
+        ${t.buttonText??""}
+      `:u.html`${t.buttonText??""}`}_generateActionButtons(){return Object.entries(this.values).map(([t,e])=>u.html`
+        <luzmo-action-button value=${t} ?disabled=${this.disabled}>
+          ${this._generateButtonContents(e)}
+          ${e.label?u.html`<luzmo-tooltip
+                self-managed
+                placement="top"
+                size=${this.size}
+              >
+                ${e.label}
+              </luzmo-tooltip>`:""}
+        </luzmo-action-button>
+      `)}renderController(){const t=this._generateActionButtons();return u.html`
+      <luzmo-action-group
+        compact
+        quiet
+        emphasized
+        .selects=${this.selects??"single"}
+        .size=${this.size}
+        .selected=${this.value||this.default||[]}
+        @change=${this._handleEvent}
+        .disabled=${this.disabled}
+      >
+        ${t}
+      </luzmo-action-group>
+    `}};a.styles=[...m(a,a,"styles"),u.unsafeCSS(g)];let n=a;i([l.property({type:Array})],n.prototype,"values");i([l.property({type:Boolean,reflect:!0})],n.prototype,"disabled");i([l.property({type:String})],n.prototype,"selects");i([l.property({type:Array})],n.prototype,"value");i([l.property({type:Array})],n.prototype,"default");i([l.query("luzmo-action-group")],n.prototype,"actionGroup");customElements.get("luzmo-edit-option-action-button-group")||customElements.define("luzmo-edit-option-action-button-group",n);exports.LuzmoEditOptionActionButtonGroup=n;

package/components/edit-option-action-button-group/index.d.ts

@@ -0,0 +1,7 @@
+import { LuzmoEditOptionActionButtonGroup } from './edit-option-action-button-group';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-edit-option-action-button-group': LuzmoEditOptionActionButtonGroup;
+    }
+}
+export { LuzmoEditOptionActionButtonGroup } from './edit-option-action-button-group';

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

@@ -17,57 +17,56 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-var s = Object.getPrototypeOf;
-var p = Reflect.get;
-var d = (n, o, t) => p(s(n), t, o);
-import { luzmoTable as b, luzmoColumns as g, luzmoRows as f, luzmoUnderline as h, luzmoBold as v, luzmoItalic as x, luzmoArrowsVertical as y, luzmoArrowsHorizontal as w, luzmoArrowsExpand as k, luzmoExpand as $, luzmoCompress as C, luzmoBorderDotted as A, luzmoBorderDashed as B, luzmoBorderSolid as S, luzmoBan as q, luzmoAlignRight as E, luzmoAlignCenter as _, luzmoAlignLeft as T, luzmoAlignTop as D, luzmoAlignMiddle as H, luzmoAlignBottom as R } from "@luzmo/icons";
+var d = Object.getPrototypeOf;
+var s = Reflect.get;
+var z = (n, o, l) => s(d(n), l, o);
+import { luzmoTable as p, luzmoColumns as b, luzmoRows as g, luzmoUnderline as f, luzmoBold as h, luzmoItalic as v, luzmoArrowsVertical as x, luzmoArrowsHorizontal as y, luzmoArrowsExpand as w, luzmoExpand as k, luzmoCompress as $, luzmoBorderDotted as C, luzmoBorderDashed as A, luzmoBorderSolid as B, luzmoBan as S, luzmoAlignRight as q, luzmoAlignCenter as E, luzmoAlignLeft as _, luzmoAlignTop as T, luzmoAlignMiddle as D, luzmoAlignBottom as H } from "@luzmo/icons";
 import "@luzmo/lucero/action-button";
 import "@luzmo/lucero/action-group";
 import "@luzmo/lucero/icon";
-import { unsafeCSS as M, html as e } from "lit";
-import { property as c, query as N } from "lit/decorators.js";
-import { L as U } from "../edit-option-base-DIc7iC-b.js";
+import { unsafeCSS as R, html as e } from "lit";
+import { property as c, query as M } from "lit/decorators.js";
+import { L as N } from "../edit-option-base-Bh29-Cak.js";
 (function() {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const o = document.createElement("style");
     o.setAttribute("data-luzmo-vars", ""), o.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: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--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: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--luzmo-border-width: 1px;--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: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--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: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--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(o);
   }
 })();
-const V = "luzmo-action-group{--luzmo-edit-option-action-button-group-button-background-hover: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-background-down: rgba( var(--luzmo-primary-rgb), .2 );--luzmo-edit-option-action-button-group-button-background-focus: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-content-color-default: var( --luzmo-font-color-disabled );--luzmo-edit-option-action-button-group-button-content-color-hover: var( --luzmo-font-color-hover );--luzmo-edit-option-action-button-group-button-content-color-down: var( --luzmo-font-color-down );--luzmo-edit-option-action-button-group-button-content-color-focus: var( --luzmo-font-color-focus )}luzmo-action-group[compact][quiet][emphasized]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=s]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=l]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-2)}luzmo-action-group[compact][quiet][emphasized][size=xl]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-3)}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-hover );--luzmo-action-button-background-color-down: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-focus: var( --luzmo-edit-option-action-button-group-button-background-focus );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-default );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-hover );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-focus: var( --luzmo-edit-option-action-button-group-button-content-color-focus )}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]:hover,luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-default: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down )}";
-var j = Object.defineProperty, u = (n, o, t, a) => {
-  for (var l = void 0, m = n.length - 1, z; m >= 0; m--)
-    (z = n[m]) && (l = z(o, t, l) || l);
-  return l && j(o, t, l), l;
+const U = "luzmo-action-group{--luzmo-edit-option-action-button-group-button-background-hover: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-background-down: rgba( var(--luzmo-primary-rgb), .2 );--luzmo-edit-option-action-button-group-button-background-focus: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-content-color-default: var( --luzmo-font-color-disabled );--luzmo-edit-option-action-button-group-button-content-color-hover: var( --luzmo-font-color-hover );--luzmo-edit-option-action-button-group-button-content-color-down: var( --luzmo-font-color-down );--luzmo-edit-option-action-button-group-button-content-color-focus: var( --luzmo-font-color-focus )}luzmo-action-group[compact][quiet][emphasized]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=s]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=l]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-2)}luzmo-action-group[compact][quiet][emphasized][size=xl]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-3)}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-hover );--luzmo-action-button-background-color-down: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-focus: var( --luzmo-edit-option-action-button-group-button-background-focus );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-default );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-hover );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-focus: var( --luzmo-edit-option-action-button-group-button-content-color-focus )}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]:hover,luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-default: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down )}";
+var V = Object.defineProperty, u = (n, o, l, I) => {
+  for (var r = void 0, a = n.length - 1, m; a >= 0; a--)
+    (m = n[a]) && (r = m(o, l, r) || r);
+  return r && V(o, l, r), r;
 };
-const I = {
-  alignBottom: R,
-  alignMiddle: H,
-  alignTop: D,
-  alignLeft: T,
-  alignCenter: _,
-  alignRight: E,
-  ban: q,
-  borderSolid: S,
-  borderDashed: B,
-  borderDotted: A,
-  compress: C,
-  expand: $,
-  arrowsExpand: k,
-  arrowsHorizontal: w,
-  arrowsVertical: y,
-  italic: x,
-  bold: v,
-  underline: h,
-  rows: f,
-  columns: g,
-  table: b
-}, i = class i extends U {
+const j = {
+  alignBottom: H,
+  alignMiddle: D,
+  alignTop: T,
+  alignLeft: _,
+  alignCenter: E,
+  alignRight: q,
+  ban: S,
+  borderSolid: B,
+  borderDashed: A,
+  borderDotted: C,
+  compress: $,
+  expand: k,
+  arrowsExpand: w,
+  arrowsHorizontal: y,
+  arrowsVertical: x,
+  italic: v,
+  bold: h,
+  underline: f,
+  rows: g,
+  columns: b,
+  table: p
+}, i = class i extends N {
   constructor() {
     super(...arguments), this.values = {}, this.disabled = !1;
   }
   _handleEvent() {
-    var t, a, l;
-    const o = this.selects === "multiple" ? (t = this.actionGroup) == null ? void 0 : t.selected : (l = (a = this.actionGroup) == null ? void 0 : a.selected) == null ? void 0 : l[0];
+    const o = this.selects === "multiple" ? this.actionGroup?.selected : this.actionGroup?.selected?.[0];
     this.dispatchEvent(
       new CustomEvent("option-changed", {
         bubbles: !0,
@@ -84,7 +83,7 @@ const I = {
         <luzmo-icon
           slot="icon"
           .size=${this.size}
-          .icon=${o.icon ?? I[o.iconName]}
+          .icon=${o.icon ?? j[o.iconName]}
           .label=${o.label ?? ""}
         ></luzmo-icon>
         ${o.buttonText ?? ""}
@@ -92,15 +91,15 @@ const I = {
   }
   _generateActionButtons() {
     return Object.entries(this.values).map(
-      ([o, t]) => e`
+      ([o, l]) => e`
         <luzmo-action-button value=${o} ?disabled=${this.disabled}>
-          ${this._generateButtonContents(t)}
-          ${t.label ? e`<luzmo-tooltip
+          ${this._generateButtonContents(l)}
+          ${l.label ? e`<luzmo-tooltip
                 self-managed
                 placement="top"
                 size=${this.size}
               >
-                ${t.label}
+                ${l.label}
               </luzmo-tooltip>` : ""}
         </luzmo-action-button>
       `
@@ -124,30 +123,30 @@ const I = {
     `;
   }
 };
-i.styles = [...d(i, i, "styles"), M(V)];
-let r = i;
+i.styles = [...z(i, i, "styles"), R(U)];
+let t = i;
 u([
   c({ type: Array })
-], r.prototype, "values");
+], t.prototype, "values");
 u([
   c({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled");
+], t.prototype, "disabled");
 u([
   c({ type: String })
-], r.prototype, "selects");
+], t.prototype, "selects");
 u([
   c({ type: Array })
-], r.prototype, "value");
+], t.prototype, "value");
 u([
   c({ type: Array })
-], r.prototype, "default");
+], t.prototype, "default");
 u([
-  N("luzmo-action-group")
-], r.prototype, "actionGroup");
+  M("luzmo-action-group")
+], t.prototype, "actionGroup");
 customElements.get("luzmo-edit-option-action-button-group") || customElements.define(
   "luzmo-edit-option-action-button-group",
-  r
+  t
 );
 export {
-  r as LuzmoEditOptionActionButtonGroup
+  t as LuzmoEditOptionActionButtonGroup
 };

package/components/edit-option-base/edit-option-base.d.ts

@@ -0,0 +1,23 @@
+import '@luzmo/lucero/field-label';
+import '@luzmo/lucero/tooltip';
+import { CSSResultArray, TemplateResult } from 'lit';
+import { LuzmoElement } from '../../utils/base';
+declare const LuzmoEditOptionBase_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
+};
+export declare abstract class LuzmoEditOptionBase extends LuzmoEditOptionBase_base {
+    static styles: CSSResultArray;
+    disabled: boolean;
+    hideLabel: boolean;
+    label: string;
+    tooltip: string;
+    extraLabel: string;
+    extraLabelHasClickAction: boolean;
+    extraLabelClickAction: any;
+    extraLabelTooltip: string;
+    protected abstract renderController(): TemplateResult;
+    protected handleExtraLabelClick(event: MouseEvent): void;
+    render(): TemplateResult<1>;
+}
+export {};

package/components/{edit-option-base-DIc7iC-b.js → edit-option-base-Bh29-Cak.js}

@@ -21,7 +21,7 @@ import "@luzmo/lucero/field-label";
 import "@luzmo/lucero/tooltip";
 import { unsafeCSS as h, nothing as p, html as n } from "lit";
 import { property as e } from "lit/decorators.js";
-import { L as m } from "./focusable-DCIFkpiW.js";
+import { L as m } from "./focusable-BS2pbY7w.js";
 import { S as u } from "./sized-mixin-cJbo3PKR.js";
 const b = ":host{font-family:var(--luzmo-edit-option-component-font-family, var(--luzmo-font-family))}.luzmo-edit-option{height:var(--luzmo-edit-option-component-height, var(--edit-option-component-height));width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--luzmo-spacing-3);color:var(--luzmo-font-color);font-size:var(--luzmo-font-size-s)}.control-container{display:flex;align-items:center;gap:var(--luzmo-edit-option-control-container-gap, var(--edit-option-control-container-gap));justify-content:end;flex:1}.extra-label{padding-left:var(--luzmo-edit-option-extra-label-padding-left, var(--edit-option-extra-label-padding-left));padding-right:var(--luzmo-edit-option-extra-label-padding-right, var(--edit-option-extra-label-padding-right));font-size:var(--luzmo-edit-option-extra-label-font-size, var(--edit-option-extra-label-font-size))}.extra-link{text-align:right;text-decoration:underline;cursor:pointer}.extra-link:hover{color:var(--luzmo-font-color-hover)}.extra-link.disabled{opacity:.65;cursor:not-allowed}.extra-link.disabled:hover{color:var(--luzmo-font-color-disabled)}:host{--edit-option-component-height: var(--luzmo-component-height);--edit-option-extra-label-padding-right: var(--luzmo-spacing-4);--edit-option-extra-label-padding-left: var(--luzmo-spacing-5);--edit-option-control-container-gap: var(--luzmo-spacing-2);--edit-option-extra-label-font-size: var(--luzmo-font-size-s)}:host([size=s]){--edit-option-component-height: var(--luzmo-component-height-s);--edit-option-extra-label-padding-right: var(--luzmo-spacing-3);--edit-option-extra-label-padding-left: var(--luzmo-spacing-4);--edit-option-control-container-gap: var(--luzmo-spacing-2);--edit-option-extra-label-font-size: var(--luzmo-font-size-xs)}:host([size=l]){--edit-option-component-height: var(--luzmo-component-height-l);--edit-option-extra-label-padding-right: var(--luzmo-spacing-4);--edit-option-extra-label-padding-left: var(--luzmo-spacing-5);--edit-option-control-container-gap: var(--luzmo-spacing-3);--edit-option-extra-label-font-size: var(--luzmo-font-size)}:host([size=xl]){--edit-option-component-height: var(--luzmo-component-height-xl);--edit-option-extra-label-padding-right: var(--luzmo-spacing-5);--edit-option-extra-label-padding-left: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--edit-option-control-container-gap: var(--luzmo-spacing-4);--edit-option-extra-label-font-size: var(--luzmo-font-size-l)}:host{display:block}";
 var g = Object.defineProperty, o = (d, a, l, z) => {

package/components/edit-option-base-tFr8Qg2B.cjs

@@ -0,0 +1,53 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 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.
+ * */
+"use strict";require("@luzmo/lucero/field-label");require("@luzmo/lucero/tooltip");const e=require("lit"),o=require("lit/decorators.js"),c=require("./focusable-QLh-LlNt.cjs"),h=require("./sized-mixin-DcvJLFeo.cjs"),u=":host{font-family:var(--luzmo-edit-option-component-font-family, var(--luzmo-font-family))}.luzmo-edit-option{height:var(--luzmo-edit-option-component-height, var(--edit-option-component-height));width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--luzmo-spacing-3);color:var(--luzmo-font-color);font-size:var(--luzmo-font-size-s)}.control-container{display:flex;align-items:center;gap:var(--luzmo-edit-option-control-container-gap, var(--edit-option-control-container-gap));justify-content:end;flex:1}.extra-label{padding-left:var(--luzmo-edit-option-extra-label-padding-left, var(--edit-option-extra-label-padding-left));padding-right:var(--luzmo-edit-option-extra-label-padding-right, var(--edit-option-extra-label-padding-right));font-size:var(--luzmo-edit-option-extra-label-font-size, var(--edit-option-extra-label-font-size))}.extra-link{text-align:right;text-decoration:underline;cursor:pointer}.extra-link:hover{color:var(--luzmo-font-color-hover)}.extra-link.disabled{opacity:.65;cursor:not-allowed}.extra-link.disabled:hover{color:var(--luzmo-font-color-disabled)}:host{--edit-option-component-height: var(--luzmo-component-height);--edit-option-extra-label-padding-right: var(--luzmo-spacing-4);--edit-option-extra-label-padding-left: var(--luzmo-spacing-5);--edit-option-control-container-gap: var(--luzmo-spacing-2);--edit-option-extra-label-font-size: var(--luzmo-font-size-s)}:host([size=s]){--edit-option-component-height: var(--luzmo-component-height-s);--edit-option-extra-label-padding-right: var(--luzmo-spacing-3);--edit-option-extra-label-padding-left: var(--luzmo-spacing-4);--edit-option-control-container-gap: var(--luzmo-spacing-2);--edit-option-extra-label-font-size: var(--luzmo-font-size-xs)}:host([size=l]){--edit-option-component-height: var(--luzmo-component-height-l);--edit-option-extra-label-padding-right: var(--luzmo-spacing-4);--edit-option-extra-label-padding-left: var(--luzmo-spacing-5);--edit-option-control-container-gap: var(--luzmo-spacing-3);--edit-option-extra-label-font-size: var(--luzmo-font-size)}:host([size=xl]){--edit-option-component-height: var(--luzmo-component-height-xl);--edit-option-extra-label-padding-right: var(--luzmo-spacing-5);--edit-option-extra-label-padding-left: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--edit-option-control-container-gap: var(--luzmo-spacing-4);--edit-option-extra-label-font-size: var(--luzmo-font-size-l)}:host{display:block}";var b=Object.defineProperty,i=(s,l,n,g)=>{for(var a=void 0,r=s.length-1,d;r>=0;r--)(d=s[r])&&(a=d(l,n,a)||a);return a&&b(l,n,a),a};const p=class p extends h.SizedMixin(c.LuzmoElement,{defaultSize:"s",validSizes:["s","m","l","xl"]}){constructor(){super(...arguments),this.disabled=!1,this.hideLabel=!1,this.label="",this.tooltip="",this.extraLabel="",this.extraLabelHasClickAction=!1,this.extraLabelTooltip=""}handleExtraLabelClick(l){if(this.extraLabelHasClickAction&&typeof this.extraLabelClickAction=="function"){const{value:n}=this.extraLabelClickAction();this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:n}}))}l.preventDefault(),this.dispatchEvent(new CustomEvent("extraLabelClick",{bubbles:!0,composed:!0}))}render(){return e.html`
+      <div class="luzmo-edit-option">
+        ${this.label&&!this.hideLabel?e.html`
+              <luzmo-field-label
+                .size=${this.size}
+                for="luzmo-edit-option-control"
+                side-aligned="start"
+              >
+                ${this.label}
+                ${this.tooltip?e.html`
+                      *<luzmo-tooltip
+                        self-managed
+                        placement="top"
+                        size=${this.size}
+                      >
+                        ${this.tooltip}
+                      </luzmo-tooltip>
+                    `:e.nothing}
+              </luzmo-field-label>
+            `:e.nothing}
+
+        <div class="control-container">
+          ${this.extraLabel?e.html`
+                <div
+                  class="extra-label ${this.extraLabelHasClickAction?"extra-link":""}"
+                  @click=${this.handleExtraLabelClick}
+                >
+                  <span class=""> ${this.extraLabel} </span>
+                </div>
+              `:e.nothing}
+          ${this.renderController()}
+        </div>
+      </div>
+    `}};p.styles=[e.unsafeCSS(u)];let t=p;i([o.property({type:Boolean,reflect:!0})],t.prototype,"disabled");i([o.property({type:Boolean,reflect:!0,attribute:"hide-label"})],t.prototype,"hideLabel");i([o.property({type:String,reflect:!0})],t.prototype,"label");i([o.property({type:String,reflect:!0})],t.prototype,"tooltip");i([o.property({type:String,attribute:"extra-label"})],t.prototype,"extraLabel");i([o.property({type:Boolean,attribute:"extra-label-has-click-action"})],t.prototype,"extraLabelHasClickAction");i([o.property()],t.prototype,"extraLabelClickAction");i([o.property({type:String,attribute:"extra-label-tooltip"})],t.prototype,"extraLabelTooltip");exports.LuzmoEditOptionBase=t;

package/components/edit-option-color-palette-picker/edit-option-color-palette-picker.d.ts

@@ -0,0 +1,42 @@
+import '@luzmo/lucero/color-palette';
+import '@luzmo/lucero/color-palette-group';
+import { TemplateResult } from 'lit';
+import { LuzmoEditOptionBase } from '../edit-option-base/edit-option-base';
+export declare class LuzmoEditOptionColorPalettePicker extends LuzmoEditOptionBase {
+    static styles: (import("lit").CSSResult | import("lit").CSSResultArray)[];
+    /**
+     * The selected color palette key of the picker
+     */
+    value?: string;
+    /**
+     * The default color palette key of the picker
+     */
+    default: string;
+    /**
+     * The color palette keys of the picker
+     */
+    values: string[];
+    /**
+     * Whether the picker is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the picker is horizontal
+     */
+    horizontal: boolean;
+    /**
+     * The function to parse the value
+     */
+    parseValue?: (value: any) => string;
+    /**
+     * The function to convert the value to a string
+     */
+    toValue?: (value: string) => any;
+    /**
+     * The number of colors to display
+     */
+    numberOfColors: number;
+    private _setColorPalette;
+    private generateColorsClasses;
+    protected renderController(): TemplateResult;
+}

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

@@ -0,0 +1,37 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 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.
+ * */
+"use strict";var y=Object.getPrototypeOf;var f=Reflect.get;var d=(p,o,e)=>f(y(p),e,o);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@luzmo/lucero/color-palette");require("@luzmo/lucero/color-palette-group");const u=require("lit"),l=require("lit/decorators.js"),m=require("../color-palettes-DhNHcib8.cjs"),b=require("../edit-option-base-tFr8Qg2B.cjs"),g=".luzmo-edit-option{height:fit-content;align-items:start}.control-container{align-items:start}.color-classes{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--luzmo-spacing-2)}.extra-label{height:var(--edit-option-component-height);display:flex;align-items:center}";var v=Object.defineProperty,a=(p,o,e,c)=>{for(var r=void 0,s=p.length-1,i;s>=0;s--)(i=p[s])&&(r=i(o,e,r)||r);return r&&v(o,e,r),r};const n=class n extends b.LuzmoEditOptionBase{constructor(){super(...arguments),this.default="OrRd",this.values=[],this.disabled=!1,this.horizontal=!1,this.numberOfColors=5}_setColorPalette(o){const e=o.target.selected;this.value=e,this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue=="function"?this.toValue(e??""):e}}))}generateColorsClasses(o){const e=m.getColorMaps(),c=(s,i)=>u.html`
+        <luzmo-color-palette
+          .size=${this.size}
+          .value=${s}
+          ?disabled=${this.disabled}
+          ?horizontal=${this.horizontal}
+          .colors=${i}
+        ></luzmo-color-palette>
+      `,r=(this.values??[]).map(s=>{const i=`colors${this.numberOfColors??5}`,h=e[s][i];return c(s,Array.isArray(h)?h:[])});return u.html`
+      <luzmo-color-palette-group
+        .size=${this.size}
+        ?disabled=${this.disabled}
+        ?horizontal=${this.horizontal}
+        .selected=${o}
+        @change=${this._setColorPalette.bind(this)}
+        >${r}</luzmo-color-palette-group
+      >
+    `}renderController(){const o=typeof this.parseValue=="function"?this.parseValue(this.value):this.value,e=typeof this.parseValue=="function"?this.parseValue(this.default):this.default;return this.generateColorsClasses(o??e??"OrRd")}};n.styles=[d(n,n,"styles"),u.unsafeCSS(g)];let t=n;a([l.property({type:String,reflect:!0})],t.prototype,"value");a([l.property({type:String,reflect:!0})],t.prototype,"default");a([l.property({type:Array,attribute:"values"})],t.prototype,"values");a([l.property({type:Boolean,reflect:!0})],t.prototype,"disabled");a([l.property({type:Boolean,reflect:!0})],t.prototype,"horizontal");a([l.property()],t.prototype,"parseValue");a([l.property()],t.prototype,"toValue");a([l.property({type:Number,attribute:"number-of-colors"})],t.prototype,"numberOfColors");customElements.get("luzmo-edit-option-palette-picker")||customElements.define("luzmo-edit-option-color-palette-picker",t);exports.LuzmoEditOptionColorPalettePicker=t;

package/components/edit-option-color-palette-picker/index.d.ts

@@ -0,0 +1,7 @@
+import { LuzmoEditOptionColorPalettePicker } from './edit-option-color-palette-picker';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-edit-option-color-palette-picker': LuzmoEditOptionColorPalettePicker;
+    }
+}
+export { LuzmoEditOptionColorPalettePicker } from './edit-option-color-palette-picker';

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

@@ -25,7 +25,7 @@ import "@luzmo/lucero/color-palette-group";
 import { unsafeCSS as b, html as d } from "lit";
 import { property as u } from "lit/decorators.js";
 import { g } from "../color-palettes-BqH2Fv19.js";
-import { L as h } from "../edit-option-base-DIc7iC-b.js";
+import { L as h } from "../edit-option-base-Bh29-Cak.js";
 (function() {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const o = document.createElement("style");

package/components/edit-option-color-picker/edit-option-color-picker.d.ts

@@ -0,0 +1,28 @@
+import { Placement } from '@luzmo/lucero';
+import '@luzmo/lucero/color-picker';
+import '@luzmo/lucero/menu';
+import { LuzmoEditOptionBase } from '../edit-option-base/edit-option-base';
+/**
+ * @element luzmo-edit-option-color-picker
+ * @description A component that allows the user to select a color from a color picker.
+ * @fires option-changed - Emitted when the color is changed.
+ */
+export declare class LuzmoEditOptionColorPicker extends LuzmoEditOptionBase {
+    static styles: import("lit").CSSResultArray[];
+    value: string;
+    disabled: boolean;
+    noAlphaChannel: boolean;
+    swatches: string[];
+    rounding: 'full' | 'light' | 'none';
+    shape: 'circle' | 'rectangle';
+    /**
+     * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
+     * @attr
+     */
+    placement: Placement;
+    debounce: number;
+    private colorPicker;
+    debounceTimeout: any;
+    private _handleEvent;
+    protected renderController(): import("lit-html").TemplateResult<1>;
+}

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

@@ -1,4 +1,23 @@
-"use strict";var u=Object.getPrototypeOf;var h=Reflect.get;var c=(i,l,p)=>h(u(i),p,l);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@luzmo/lucero/color-picker");require("@luzmo/lucero/menu");const d=require("lit"),t=require("lit/decorators.js"),y=require("../edit-option-base-VhTih9T1.cjs");var m=Object.defineProperty,r=(i,l,p,f)=>{for(var o=void 0,n=i.length-1,a;n>=0;n--)(a=i[n])&&(o=a(l,p,o)||o);return o&&m(l,p,o),o};const s=class s extends y.LuzmoEditOptionBase{constructor(){super(...arguments),this.value="transparent",this.disabled=!1,this.noAlphaChannel=!1,this.swatches=[],this.rounding="full",this.shape="circle",this.placement="left-start",this.debounce=50}_handleEvent(){this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this.colorPicker.color}}))},this.debounce??200)}renderController(){return d.html`
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 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.
+ * */
+"use strict";var u=Object.getPrototypeOf;var h=Reflect.get;var c=(i,l,p)=>h(u(i),p,l);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@luzmo/lucero/color-picker");require("@luzmo/lucero/menu");const d=require("lit"),t=require("lit/decorators.js"),y=require("../edit-option-base-tFr8Qg2B.cjs");var m=Object.defineProperty,r=(i,l,p,f)=>{for(var o=void 0,n=i.length-1,a;n>=0;n--)(a=i[n])&&(o=a(l,p,o)||o);return o&&m(l,p,o),o};const s=class s extends y.LuzmoEditOptionBase{constructor(){super(...arguments),this.value="transparent",this.disabled=!1,this.noAlphaChannel=!1,this.swatches=[],this.rounding="full",this.shape="circle",this.placement="left-start",this.debounce=50}_handleEvent(){this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this.colorPicker.color}}))},this.debounce??200)}renderController(){return d.html`
       <luzmo-color-picker
         .color=${this.value}
         .size=${this.size}

package/components/edit-option-color-picker/index.d.ts

@@ -0,0 +1,7 @@
+import { LuzmoEditOptionColorPicker } from './edit-option-color-picker';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-edit-option-color-picker': LuzmoEditOptionColorPicker;
+    }
+}
+export { LuzmoEditOptionColorPicker } from './edit-option-color-picker';

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

@@ -24,7 +24,7 @@ import "@luzmo/lucero/color-picker";
 import "@luzmo/lucero/menu";
 import { html as z } from "lit";
 import { property as r, query as p } from "lit/decorators.js";
-import { L as f } from "../edit-option-base-DIc7iC-b.js";
+import { L as f } from "../edit-option-base-Bh29-Cak.js";
 (function() {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const l = document.createElement("style");

package/components/edit-option-color-range/edit-option-color-range.d.ts

@@ -0,0 +1,99 @@
+import '@luzmo/lucero/action-button';
+import '@luzmo/lucero/color-field';
+import '@luzmo/lucero/color-picker';
+import '@luzmo/lucero/icon';
+import '@luzmo/lucero/number-field';
+import '@luzmo/lucero/text-field';
+import { PropertyValues, TemplateResult } from 'lit';
+import { LuzmoEditOptionBase } from '../edit-option-base/edit-option-base';
+/**
+ * @element luzmo-edit-option-color-range
+ * @description A component that allows the user to create a color range.
+ * @fires option-changed - Emitted when the color range is changed.
+ */
+export declare class LuzmoEditOptionColorRange extends LuzmoEditOptionBase {
+    static styles: (import("lit").CSSResult | import("lit").CSSResultArray)[];
+    /**
+     * The color range
+     */
+    value?: {
+        color: string;
+        value?: number;
+    }[];
+    /**
+     * The default color range
+     */
+    default?: {
+        color: string;
+        value?: number;
+    }[];
+    /**
+     * Whether the color-range is disabled
+     * @default false
+     * @type {boolean}
+     */
+    disabled: boolean;
+    /**
+     * Range with percentage values
+     */
+    percentage: boolean;
+    /**
+     * Range colors can have alpha values
+     */
+    noAlphaChannel: boolean;
+    /**
+     * The number of values in the range can be changed
+     */
+    editRangeSize: boolean;
+    /**
+     * The values in the range can be changed by the user in the input field
+     */
+    noValues: boolean;
+    /**
+     * The minimum range size
+     */
+    minimumRangeSize: number;
+    /**
+     * Whether there is a first range value that sets color from negative infinity to the next range value. That first range value has a color, but the value is disregarded
+     */
+    negativeInfinityValue: boolean;
+    /**
+     * The color pickers can be read-only
+     */
+    readOnlyColorPicker: boolean;
+    /**
+     * Whether the colors are reversed
+     */
+    reverse: boolean;
+    /**
+     * The debounce time in milliseconds
+     */
+    debounce: number;
+    /**
+     * The function to parse the value
+     */
+    parseValue?: (value: any) => {
+        color: string;
+        value?: number;
+    }[];
+    /**
+     * The function to convert the value
+     */
+    toValue?: (value: any) => any;
+    private colorRangeLines;
+    /**
+     * @internal
+     */
+    debounceTimeout: any;
+    private _ranges;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private _handleChangeEvent;
+    private _getIndex;
+    private _extrapolateNewValue;
+    private _setColor;
+    private _setNumber;
+    private _removeRangeValue;
+    private _addRangeValue;
+    private renderRangeValues;
+    protected renderController(): TemplateResult;
+}