@luzmo/analytics-components-kit 1.0.1-alpha.48 → 1.0.1-alpha.49

package/components/slot-menu-list/index.cjs

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../property-BV1QaY8E.cjs"),v=require("../get-css-variable-DLiZYZEi.cjs"),C=require("../luzmo-icons-Bvm-_ECi.cjs"),_=require("../localize-r7ALOUy_.cjs"),P=require("../query-all-CR2wWKRD.cjs"),j=require("../focusable-B8t8a-WJ.cjs"),k=require("../sized-mixin-C48t6K7U.cjs");var D={large:700};function F(i){i.animate([{backgroundColor:"var(--ds-background-selected, #E9F2FF)"},{}],{duration:D.large,easing:"cubic-bezier(0.25, 0.1, 0.25, 1.0)",iterations:1})}function w(i,t){var e=Object.keys(i);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(i);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(i,s).enumerable})),e.push.apply(e,o)}return e}function S(i){for(var t=1;t<arguments.length;t++){var e=arguments[t]!=null?arguments[t]:{};t%2?w(Object(e),!0).forEach(function(o){v._defineProperty(i,o,e[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(e)):w(Object(e)).forEach(function(o){Object.defineProperty(i,o,Object.getOwnPropertyDescriptor(e,o))})}return i}var L={top:function(t,e){return Math.abs(e.y-t.top)},right:function(t,e){return Math.abs(t.right-e.x)},bottom:function(t,e){return Math.abs(t.bottom-e.y)},left:function(t,e){return Math.abs(e.x-t.left)}},I=Symbol("closestEdge");function $(i,t){var e,o,s=t.element,u=t.input,n=t.allowedEdges,l={x:u.clientX,y:u.clientY},r=s.getBoundingClientRect(),a=n.map(function(c){return{edge:c,value:L[c](r,l)}}),d=(e=(o=a.sort(function(c,b){return c.value-b.value})[0])===null||o===void 0?void 0:o.edge)!==null&&e!==void 0?e:null;return S(S({},i),{},v._defineProperty({},I,d))}function E(i){var t;return(t=i[I])!==null&&t!==void 0?t:null}const M=':host{font-family:var(--luzmo-slot-menu-list-font-family, var(--luzmo-font-family));font-size:var(--luzmo-slot-menu-list-font-size, var(--slot-menu-list-font-size));color:var(--luzmo-slot-menu-listfont-color, var(--luzmo-font-color))}:host{margin:0;padding:0;list-style:none;border-right:var(--luzmo-slot-menu-list-border-right-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-list-border-right-color, var(--luzmo-border-color))}:host li{position:relative;cursor:pointer}:host li:hover{background-color:var(--luzmo-slot-menu-list-background-color-hover, var(--slot-menu-list-background-color-hover))}:host .active{background-color:var(--luzmo-slot-menu-list-active-background-color, var(--slot-menu-list-active-background-color));color:var(--luzmo-slot-menu-list-active-color, var(--slot-menu-list-active-color))}:host .active:hover{background-color:var(--luzmo-slot-menu-list-active-background-color-hover, var(--slot-menu-list-active-background-color-hover))}.drop-indicator{position:absolute;left:0;right:0;height:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height));background-color:var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color))}.drop-indicator:before{content:"";display:block;width:100%;border:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)) solid var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color));border-radius:50%;position:absolute;background:var(--luzmo-slot-menu-list-drop-indicator-background, var(--luzmo-background-color));left:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));top:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));height:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size));width:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size))}.drop-indicator[data-edge=top]{top:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.drop-indicator[data-edge=bottom]{bottom:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.draggable-slot-content{display:flex;justify-content:space-between;gap:var(--luzmo-slot-menu-label-to-icon-gap, var(--slot-menu-label-to-icon-gap));align-items:center}.draggable-slot-content .draggable-slot-content-label,.draggable-slot-content .draggable-slot-content-remove{padding-block-start:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding));padding-block-end:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding))}.draggable-slot-content .draggable-slot-content-label{padding-inline-start:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.draggable-slot-content .draggable-slot-content-remove{padding-inline-end:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:0 0 auto}:host{--slot-menu-list-active-background-color: var(--luzmo-primary);--slot-menu-list-active-background-color-hover: var(--luzmo-primary-hover);--slot-menu-list-active-color: var(--luzmo-primary-inverse-color);--slot-menu-list-background-color-hover: var(--luzmo-background-color-hover);--slot-menu-list-drop-indicator-color: var(--luzmo-font-color-down);--slot-menu-list-drop-indicator-height: 2px;--slot-menu-list-drop-indicator-circle-size: 4px}:host{--slot-menu-display-settings-min-width: 19rem;--slot-menu-min-height: calc(var(--luzmo-component-height) * 2);--slot-menu-font-size: var(--luzmo-font-size);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-3)}:host([size=s]){--slot-menu-display-settings-min-width: 16rem;--slot-menu-min-height: calc(var(--luzmo-component-height-s) * 2);--slot-menu-font-size: var(--luzmo-font-size-s);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-2)}:host([size=l]){--slot-menu-display-settings-min-width: 23rem;--slot-menu-min-height: calc(var(--luzmo-component-height-l) * 2);--slot-menu-font-size: var(--luzmo-font-size-l);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-4)}:host([size=xl]){--slot-menu-display-settings-min-width: 26rem;--slot-menu-min-height: calc(var(--luzmo-component-height-xl) * 2);--slot-menu-font-size: var(--luzmo-font-size-xl);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-4);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-5)}';var q=Object.defineProperty,f=(i,t,e,o)=>{for(var s=void 0,u=i.length-1,n;u>=0;u--)(n=i[u])&&(s=n(t,e,s)||s);return s&&q(t,e,s),s};class h extends k.SizedMixin(j.LuzmoElement,{validSizes:Object.values(k.ElementSizes)}){constructor(){super(...arguments),this.language="en",this.contentLanguage="en",this.slotContents=[],this.activeIndex=0,this._sendChangeEvent=()=>{this.dispatchEvent(new CustomEvent("slot-list-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContents:structuredClone(this.slotContents),activeIndex:this.activeIndex}}))},this._cleanupFns=[],this._attachAll=()=>{[...this._draggableSlotContentElements].forEach(t=>{const e=this._sendChangeEvent.bind(this),o=this,s=v.draggable({element:t,onGenerateDragPreview({nativeSetDragImage:n}){v.setCustomNativeDragPreview({nativeSetDragImage:n,render({container:l}){var d;const r=document.createElement("div");r.classList.add("drag-preview");const a={};[["borderColor","--luzmo-slot-menu-list-border-color","--luzmo-border-color"],["backgroundColor","--luzmo-slot-menu-list-background-color","--luzmo-background-color"],["color","--luzmo-slot-menu-list-font-color","--slot-menu-list-font-color"],["fontSize","--luzmo-slot-menu-list-font-size","--slot-menu-list-font-size"],["horizontalPadding","--luzmo-slot-menu-list-item-horizontal-padding","--slot-menu-list-item-horizontal-padding"],["verticalPadding","--luzmo-slot-menu-list-item-vertical-padding","--slot-menu-list-item-vertical-padding"],["borderRadius","--luzmo-slot-menu-list-border-radius","--luzmo-border-radius"],["fontFamily","--luzmo-slot-menu-list-font-family","--luzmo-font-family"]].forEach(([c,b,y])=>{const m=v.getCssVariableValue(t,b)||v.getCssVariableValue(t,y);a[c]=m}),r.textContent=((d=t.querySelector("[data-task-content]"))==null?void 0:d.textContent)??t.textContent,Object.assign(r.style,{border:`1px solid ${a.borderColor}`,backgroundColor:a.backgroundColor,borderRadius:a.borderRadius,fontFamily:a.fontFamily,fontSize:a.fontSize,color:a.color,paddingInline:`${a.horizontalPadding}`,paddingBlock:`${a.verticalPadding}`}),l.append(r)}})},getInitialData(){var r;const n=t.parentElement;let l=0;return n&&(l=[...((r=n.parentElement)==null?void 0:r.children)??[]].indexOf(n)),{index:l}},onDragStart(){t.style.opacity="0.5"},onDrop(){t.style.opacity="1"}});this._cleanupFns.push(s);const u=v.dropTargetForElements({element:t,canDrop({source:n}){var l;return n.element===t?!1:(l=n==null?void 0:n.element)==null?void 0:l.classList.contains("draggable-slot-content")},getData(n){return $({},{element:t,input:n.input,allowedEdges:["top","bottom"]})},getIsSticky(){return!0},onDragEnter({self:n}){const l=E(n.data);if(!l)return;const r=document.createElement("div");r.classList.add("drop-indicator"),r.dataset.edge=l,t.after(r)},onDrag({self:n}){var a,d,c;const l=E(n.data);if(!l){(a=t.nextElementSibling)==null||a.remove();return}if(((d=t.nextElementSibling)==null?void 0:d.getAttribute("data-edge"))===l)return;(c=t.nextElementSibling)==null||c.remove();const r=document.createElement("div");r.classList.add("drop-indicator"),r.dataset.edge=l,t.after(r)},onDragLeave(){var n;(n=t.nextElementSibling)==null||n.remove()},onDrop({self:n,source:l}){var d,c,b,y;(d=t.nextElementSibling)==null||d.remove();const r=E(n.data),a=n.element.parentElement;if(typeof l.data.index=="number"&&a){let m=[...((c=a.parentElement)==null?void 0:c.children)??[]].indexOf(a);r==="bottom"&&l.data.index>=m&&m<(((y=(b=a==null?void 0:a.parentElement)==null?void 0:b.children)==null?void 0:y.length)??0)-1?m+=1:r==="top"&&m>l.data.index&&(m-=1);const g=o.activeIndex,z=l.data.index,x=m,O=o.slotContents[z];o.slotContents.splice(z,1),o.slotContents.splice(x,0,O),z===g?o.activeIndex=x:z<g&&x>=g?o.activeIndex=g-1:z>g&&x<=g&&(o.activeIndex=g+1)}r&&(F(l.element),o.requestUpdate(),e())}});this._cleanupFns.push(u)})},this._detachAll=()=>{this._cleanupFns.forEach(t=>t()),this._cleanupFns=[]}}static get styles(){return[p.r(M)]}willUpdate(){this._detachAll()}updated(){this._attachAll()}setActiveIndex(t){this.activeIndex=t,this._sendChangeEvent()}removeSlotContent(t){this.slotContents=this.slotContents.filter((e,o)=>o!==t),this.activeIndex===t?this.activeIndex=t:this.slotContents.length>0&&this.activeIndex>t&&this.activeIndex--,this._sendChangeEvent()}render(){const t=this.slotContents.map((e,o)=>{const s=_.localize(e.label,this.contentLanguage);return p.x`<li class=${o===this.activeIndex?"active":""}>
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../property-Cu4Q1hS4.cjs"),v=require("../get-css-variable-DLiZYZEi.cjs"),C=require("../luzmo-icons-DonyjSXg.cjs"),_=require("../localize-r7ALOUy_.cjs"),P=require("../query-all-CR2wWKRD.cjs"),j=require("../focusable-DAGGGYyz.cjs"),k=require("../sized-mixin-j_7aJM4b.cjs");var D={large:700};function F(i){i.animate([{backgroundColor:"var(--ds-background-selected, #E9F2FF)"},{}],{duration:D.large,easing:"cubic-bezier(0.25, 0.1, 0.25, 1.0)",iterations:1})}function w(i,t){var e=Object.keys(i);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(i);t&&(o=o.filter(function(s){return Object.getOwnPropertyDescriptor(i,s).enumerable})),e.push.apply(e,o)}return e}function S(i){for(var t=1;t<arguments.length;t++){var e=arguments[t]!=null?arguments[t]:{};t%2?w(Object(e),!0).forEach(function(o){v._defineProperty(i,o,e[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(e)):w(Object(e)).forEach(function(o){Object.defineProperty(i,o,Object.getOwnPropertyDescriptor(e,o))})}return i}var L={top:function(t,e){return Math.abs(e.y-t.top)},right:function(t,e){return Math.abs(t.right-e.x)},bottom:function(t,e){return Math.abs(t.bottom-e.y)},left:function(t,e){return Math.abs(e.x-t.left)}},I=Symbol("closestEdge");function $(i,t){var e,o,s=t.element,u=t.input,n=t.allowedEdges,l={x:u.clientX,y:u.clientY},r=s.getBoundingClientRect(),a=n.map(function(c){return{edge:c,value:L[c](r,l)}}),d=(e=(o=a.sort(function(c,b){return c.value-b.value})[0])===null||o===void 0?void 0:o.edge)!==null&&e!==void 0?e:null;return S(S({},i),{},v._defineProperty({},I,d))}function E(i){var t;return(t=i[I])!==null&&t!==void 0?t:null}const M=':host{font-family:var(--luzmo-slot-menu-list-font-family, var(--luzmo-font-family));font-size:var(--luzmo-slot-menu-list-font-size, var(--slot-menu-list-font-size));color:var(--luzmo-slot-menu-listfont-color, var(--luzmo-font-color))}:host{margin:0;padding:0;list-style:none;border-right:var(--luzmo-slot-menu-list-border-right-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-list-border-right-color, var(--luzmo-border-color))}:host li{position:relative;cursor:pointer}:host li:hover{background-color:var(--luzmo-slot-menu-list-background-color-hover, var(--slot-menu-list-background-color-hover))}:host .active{background-color:var(--luzmo-slot-menu-list-active-background-color, var(--slot-menu-list-active-background-color));color:var(--luzmo-slot-menu-list-active-color, var(--slot-menu-list-active-color))}:host .active:hover{background-color:var(--luzmo-slot-menu-list-active-background-color-hover, var(--slot-menu-list-active-background-color-hover))}.drop-indicator{position:absolute;left:0;right:0;height:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height));background-color:var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color))}.drop-indicator:before{content:"";display:block;width:100%;border:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)) solid var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color));border-radius:50%;position:absolute;background:var(--luzmo-slot-menu-list-drop-indicator-background, var(--luzmo-background-color));left:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));top:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));height:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size));width:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size))}.drop-indicator[data-edge=top]{top:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.drop-indicator[data-edge=bottom]{bottom:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.draggable-slot-content{display:flex;justify-content:space-between;gap:var(--luzmo-slot-menu-label-to-icon-gap, var(--slot-menu-label-to-icon-gap));align-items:center}.draggable-slot-content .draggable-slot-content-label,.draggable-slot-content .draggable-slot-content-remove{padding-block-start:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding));padding-block-end:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding))}.draggable-slot-content .draggable-slot-content-label{padding-inline-start:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.draggable-slot-content .draggable-slot-content-remove{padding-inline-end:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:0 0 auto}:host{--slot-menu-list-active-background-color: var(--luzmo-primary);--slot-menu-list-active-background-color-hover: var(--luzmo-primary-hover);--slot-menu-list-active-color: var(--luzmo-primary-inverse-color);--slot-menu-list-background-color-hover: var(--luzmo-background-color-hover);--slot-menu-list-drop-indicator-color: var(--luzmo-font-color-down);--slot-menu-list-drop-indicator-height: 2px;--slot-menu-list-drop-indicator-circle-size: 4px}:host{--slot-menu-display-settings-min-width: 19rem;--slot-menu-min-height: calc(var(--luzmo-component-height) * 2);--slot-menu-font-size: var(--luzmo-font-size);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-3)}:host([size=s]){--slot-menu-display-settings-min-width: 16rem;--slot-menu-min-height: calc(var(--luzmo-component-height-s) * 2);--slot-menu-font-size: var(--luzmo-font-size-s);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-2)}:host([size=l]){--slot-menu-display-settings-min-width: 23rem;--slot-menu-min-height: calc(var(--luzmo-component-height-l) * 2);--slot-menu-font-size: var(--luzmo-font-size-l);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-4)}:host([size=xl]){--slot-menu-display-settings-min-width: 26rem;--slot-menu-min-height: calc(var(--luzmo-component-height-xl) * 2);--slot-menu-font-size: var(--luzmo-font-size-xl);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-4);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-5)}';var q=Object.defineProperty,f=(i,t,e,o)=>{for(var s=void 0,u=i.length-1,n;u>=0;u--)(n=i[u])&&(s=n(t,e,s)||s);return s&&q(t,e,s),s};class h extends k.SizedMixin(j.LuzmoElement,{validSizes:Object.values(k.ElementSizes)}){constructor(){super(...arguments),this.language="en",this.contentLanguage="en",this.slotContents=[],this.activeIndex=0,this._sendChangeEvent=()=>{this.dispatchEvent(new CustomEvent("slot-list-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContents:structuredClone(this.slotContents),activeIndex:this.activeIndex}}))},this._cleanupFns=[],this._attachAll=()=>{[...this._draggableSlotContentElements].forEach(t=>{const e=this._sendChangeEvent.bind(this),o=this,s=v.draggable({element:t,onGenerateDragPreview({nativeSetDragImage:n}){v.setCustomNativeDragPreview({nativeSetDragImage:n,render({container:l}){var d;const r=document.createElement("div");r.classList.add("drag-preview");const a={};[["borderColor","--luzmo-slot-menu-list-border-color","--luzmo-border-color"],["backgroundColor","--luzmo-slot-menu-list-background-color","--luzmo-background-color"],["color","--luzmo-slot-menu-list-font-color","--slot-menu-list-font-color"],["fontSize","--luzmo-slot-menu-list-font-size","--slot-menu-list-font-size"],["horizontalPadding","--luzmo-slot-menu-list-item-horizontal-padding","--slot-menu-list-item-horizontal-padding"],["verticalPadding","--luzmo-slot-menu-list-item-vertical-padding","--slot-menu-list-item-vertical-padding"],["borderRadius","--luzmo-slot-menu-list-border-radius","--luzmo-border-radius"],["fontFamily","--luzmo-slot-menu-list-font-family","--luzmo-font-family"]].forEach(([c,b,y])=>{const m=v.getCssVariableValue(t,b)||v.getCssVariableValue(t,y);a[c]=m}),r.textContent=((d=t.querySelector("[data-task-content]"))==null?void 0:d.textContent)??t.textContent,Object.assign(r.style,{border:`1px solid ${a.borderColor}`,backgroundColor:a.backgroundColor,borderRadius:a.borderRadius,fontFamily:a.fontFamily,fontSize:a.fontSize,color:a.color,paddingInline:`${a.horizontalPadding}`,paddingBlock:`${a.verticalPadding}`}),l.append(r)}})},getInitialData(){var r;const n=t.parentElement;let l=0;return n&&(l=[...((r=n.parentElement)==null?void 0:r.children)??[]].indexOf(n)),{index:l}},onDragStart(){t.style.opacity="0.5"},onDrop(){t.style.opacity="1"}});this._cleanupFns.push(s);const u=v.dropTargetForElements({element:t,canDrop({source:n}){var l;return n.element===t?!1:(l=n==null?void 0:n.element)==null?void 0:l.classList.contains("draggable-slot-content")},getData(n){return $({},{element:t,input:n.input,allowedEdges:["top","bottom"]})},getIsSticky(){return!0},onDragEnter({self:n}){const l=E(n.data);if(!l)return;const r=document.createElement("div");r.classList.add("drop-indicator"),r.dataset.edge=l,t.after(r)},onDrag({self:n}){var a,d,c;const l=E(n.data);if(!l){(a=t.nextElementSibling)==null||a.remove();return}if(((d=t.nextElementSibling)==null?void 0:d.getAttribute("data-edge"))===l)return;(c=t.nextElementSibling)==null||c.remove();const r=document.createElement("div");r.classList.add("drop-indicator"),r.dataset.edge=l,t.after(r)},onDragLeave(){var n;(n=t.nextElementSibling)==null||n.remove()},onDrop({self:n,source:l}){var d,c,b,y;(d=t.nextElementSibling)==null||d.remove();const r=E(n.data),a=n.element.parentElement;if(typeof l.data.index=="number"&&a){let m=[...((c=a.parentElement)==null?void 0:c.children)??[]].indexOf(a);r==="bottom"&&l.data.index>=m&&m<(((y=(b=a==null?void 0:a.parentElement)==null?void 0:b.children)==null?void 0:y.length)??0)-1?m+=1:r==="top"&&m>l.data.index&&(m-=1);const g=o.activeIndex,z=l.data.index,x=m,O=o.slotContents[z];o.slotContents.splice(z,1),o.slotContents.splice(x,0,O),z===g?o.activeIndex=x:z<g&&x>=g?o.activeIndex=g-1:z>g&&x<=g&&(o.activeIndex=g+1)}r&&(F(l.element),o.requestUpdate(),e())}});this._cleanupFns.push(u)})},this._detachAll=()=>{this._cleanupFns.forEach(t=>t()),this._cleanupFns=[]}}static get styles(){return[p.r(M)]}willUpdate(){this._detachAll()}updated(){this._attachAll()}setActiveIndex(t){this.activeIndex=t,this._sendChangeEvent()}removeSlotContent(t){this.slotContents=this.slotContents.filter((e,o)=>o!==t),this.activeIndex===t?this.activeIndex=t:this.slotContents.length>0&&this.activeIndex>t&&this.activeIndex--,this._sendChangeEvent()}render(){const t=this.slotContents.map((e,o)=>{const s=_.localize(e.label,this.contentLanguage);return p.x`<li class=${o===this.activeIndex?"active":""}>
           <div class="draggable-slot-content">
             <div
               class="draggable-slot-content-label"

package/components/slot-menu-list/index.js

@@ -17,17 +17,17 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { r as P, x as E, n as x } from "../property-BFMfZY1k.js";
+import { r as P, x as E, n as x } from "../property-DCzt3DR1.js";
 import { _ as S, d as F, a as j, s as D, g as w } from "../get-css-variable-YlLiVgo8.js";
-import { a8 as $, a7 as L } from "../luzmo-icons-4Tmb3sKr.js";
+import { a8 as $, a7 as L } from "../luzmo-icons-CVeTZ59u.js";
 import { l as M } from "../localize-BX7q0S0M.js";
 import { r as A } from "../query-all-Ddzx2fEK.js";
-import { L as R } from "../focusable-Bhf_beoW.js";
-import { S as T, E as q } from "../sized-mixin-CkdMApAU.js";
+import { L as R } from "../focusable-BbymtxWI.js";
+import { S as T, E as q } from "../sized-mixin-BGzkX2g1.js";
 const _ = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const r = document.createElement("style");
-    r.setAttribute("data-luzmo-vars", ""), r.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-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-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(r);
+    r.setAttribute("data-luzmo-vars", ""), r.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-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(r);
   }
 };
 _();

package/components/{state-CuE7TJCY.cjs → state-fyl3IYMu.cjs}

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";const r=require("./property-BV1QaY8E.cjs");/**
+"use strict";const r=require("./property-Cu4Q1hS4.cjs");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/components/{state-BSTa7W6f.js → state-nDsQPund.js}

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { n as r } from "./property-BFMfZY1k.js";
+import { n as r } from "./property-DCzt3DR1.js";
 /**
  * @license
  * Copyright 2017 Google LLC

package/components/{task-CDsB8Kbr.js → task-Bh_X-xIU.js}

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { f as d } from "./property-BFMfZY1k.js";
+import { f as d } from "./property-DCzt3DR1.js";
 /**
  * @license
  * Copyright 2017 Google LLC

package/components/{task-0B-FC3rj.cjs → task-CwmAXlv0.cjs}

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";const d=require("./property-BV1QaY8E.cjs");/**
+"use strict";const d=require("./property-Cu4Q1hS4.cjs");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/components/{text-field-ol9Ed5lQ-cRqtIf_0.cjs → text-field-BIADXoLC-B8w9TVmS.cjs}

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";const t=require("./base-D76d76ww-tT6yr8eb.cjs"),d=require("./directive-helpers-Cm6gitnu-BeggOiwf.cjs"),a=require("./if-defined-DOaE2coe-Cvlu5s9n.cjs"),c=require("./luzmo-icons-4nDFv1Lq-D6-m-VWM.cjs"),m=require("./focusable-BxtpnzWp-CkK9AeMt.cjs"),p=require("./element-resolution-FCUT-wql-DSTvdyds.cjs");/*! * Lucero - The design system for Luzmo.
+"use strict";const t=require("./base-D76d76ww-tT6yr8eb.cjs"),d=require("./directive-helpers-Cm6gitnu-BeggOiwf.cjs"),a=require("./if-defined-DOaE2coe-Cvlu5s9n.cjs"),c=require("./luzmo-icons-DbwDQtuO-DSQ-uVxy.cjs"),m=require("./focusable-BxtpnzWp-CkK9AeMt.cjs"),p=require("./element-resolution-FCUT-wql-DSTvdyds.cjs");/*! * Lucero - The design system for Luzmo.
  * 
  * Copyright © 2025 Luzmo
  * All rights reserved.

package/components/{text-field-ol9Ed5lQ-DbpeM4EP.js → text-field-BIADXoLC-B9oE05VF.js}

@@ -20,7 +20,7 @@
 import { R as s, m as g, a as b, d as u, v as h, z as r } from "./base-D76d76ww-BGkuhs54.js";
 import { _ as z, n as m, $ as y, s as c, B as k, x as w } from "./directive-helpers-Cm6gitnu-CeYtlPO9.js";
 import { m as n, d as $ } from "./if-defined-DOaE2coe-CNT45Xcl.js";
-import { D as v, u as q, Z as T } from "./luzmo-icons-4nDFv1Lq-DffGNBpO.js";
+import { D as v, u as q, Z as T } from "./luzmo-icons-DbwDQtuO-QG0fLECn.js";
 import { r as E } from "./focusable-BxtpnzWp-DJQkL8Zv.js";
 import { n as f, u as I } from "./element-resolution-FCUT-wql--7ctE626.js";
 /*! * Lucero - The design system for Luzmo.

package/custom-elements.json

@@ -216,6 +216,12 @@
               "fieldName": "size"
             }
           ],
+          "mixins": [
+            {
+              "name": "SignalWatcher",
+              "package": "@lit-labs/signals"
+            }
+          ],
           "superclass": {
             "name": "LuzmoElement",
             "module": "/src/utils/base"
@@ -565,7 +571,7 @@
                 "text": "any[]"
               },
               "default": "[]",
-              "description": "The list of columns that can be used for the rate aggregation",
+              "description": "The list of measure columns grouped by dataset that can be used for the rate aggregation.\nShape: [{ datasetId, datasetName, columns: Column[] }]",
               "attribute": "measureColumns"
             }
           ],
@@ -600,7 +606,7 @@
                 "text": "any[]"
               },
               "default": "[]",
-              "description": "The list of columns that can be used for the rate aggregation",
+              "description": "The list of measure columns grouped by dataset that can be used for the rate aggregation.\nShape: [{ datasetId, datasetName, columns: Column[] }]",
               "fieldName": "measureColumns"
             },
             {
@@ -642,7 +648,7 @@
           "type": {
             "text": "Record<string, () => string>"
           },
-          "default": "{ sum: () => msg('Sum', { desc: 'Numeric Aggregation option' }), cumulativesum: () => msg('Cumulative sum', { desc: 'Numeric Aggregation option' }), average: () => msg('Average', { desc: 'Numeric Aggregation option' }), weightedaverage: () => msg('Weighted average', { desc: 'Numeric Aggregation option' }), median: () => msg('Median', { desc: 'Numeric Aggregation option' }), count: () => msg('Count', { desc: 'Numeric Aggregation option' }), distinctcount: () => msg('Distinct count', { desc: 'Numeric Aggregation option' }), min: () => msg('Minimum', { desc: 'Numeric Aggregation option' }), max: () => msg('Maximum', { desc: 'Numeric Aggregation option' }), stddev: () => msg('Standard deviation', { desc: 'Numeric Aggregation option' }), rate: () => msg('Rate', { desc: 'Numeric Aggregation option' }) }"
+          "default": "{ sum: () => msg('Sum', { desc: 'Numeric Aggregation option' }), cumulativesum: () => msg('Cumulative sum', { desc: 'Numeric Aggregation option' }), average: () => msg('Average', { desc: 'Numeric Aggregation option' }), median: () => msg('Median', { desc: 'Numeric Aggregation option' }), count: () => msg('Count', { desc: 'Numeric Aggregation option' }), distinctcount: () => msg('Distinct count', { desc: 'Numeric Aggregation option' }), min: () => msg('Minimum', { desc: 'Numeric Aggregation option' }), max: () => msg('Maximum', { desc: 'Numeric Aggregation option' }), stddev: () => msg('Standard deviation', { desc: 'Numeric Aggregation option' }), rate: () => msg('Rate', { desc: 'Numeric Aggregation option' }) }"
         },
         {
           "kind": "variable",
@@ -938,6 +944,15 @@
               },
               "default": "{}",
               "attribute": "data"
+            },
+            {
+              "kind": "field",
+              "name": "linkedDatasetsIds",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "attribute": "linked-datasets-ids"
             }
           ],
           "events": [
@@ -1016,6 +1031,14 @@
               "default": "{}",
               "fieldName": "data"
             },
+            {
+              "name": "linked-datasets-ids",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "fieldName": "linkedDatasetsIds"
+            },
             {
               "name": "size",
               "type": {
@@ -1135,6 +1158,16 @@
               },
               "default": "{}",
               "attribute": "data"
+            },
+            {
+              "kind": "field",
+              "name": "linkedDatasetsIds",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "attribute": "linked-datasets-ids",
+              "reflects": true
             }
           ],
           "events": [
@@ -1213,6 +1246,14 @@
               "default": "{}",
               "fieldName": "data"
             },
+            {
+              "name": "linked-datasets-ids",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "fieldName": "linkedDatasetsIds"
+            },
             {
               "name": "size",
               "type": {
@@ -1283,7 +1324,7 @@
               "kind": "field",
               "name": "itemType",
               "type": {
-                "text": "string | undefined"
+                "text": "ItemType | undefined"
               },
               "attribute": "item-type",
               "reflects": true
@@ -1292,7 +1333,7 @@
               "kind": "field",
               "name": "slotName",
               "type": {
-                "text": "string | undefined"
+                "text": "SlotName | undefined"
               },
               "attribute": "slot-name",
               "reflects": true
@@ -1308,12 +1349,12 @@
             },
             {
               "kind": "field",
-              "name": "slotContents",
+              "name": "slotsContents",
               "type": {
-                "text": "SlotContent[]"
+                "text": "VizItemSlots"
               },
               "default": "[]",
-              "attribute": "slotContents"
+              "attribute": "slotsContents"
             },
             {
               "kind": "field",
@@ -1343,6 +1384,39 @@
               "attribute": "drag-boundary",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "apiUrl",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "'https://api.luzmo.com'",
+              "description": "The API URL of the databroker",
+              "attribute": "api-url",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "authKey",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "''",
+              "description": "The auth key of the databroker",
+              "attribute": "auth-key",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "authToken",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "''",
+              "description": "The auth token of the databroker",
+              "attribute": "auth-token",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "menu",
@@ -1389,6 +1463,18 @@
             }
           ],
           "events": [
+            {
+              "name": "slot-menu-highlight-clear",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "name": "slot-menu-highlight",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
             {
               "description": "Announces that the slot contents has changed",
               "name": "slot-contents-changed"
@@ -1398,14 +1484,14 @@
             {
               "name": "item-type",
               "type": {
-                "text": "string | undefined"
+                "text": "ItemType | undefined"
               },
               "fieldName": "itemType"
             },
             {
               "name": "slot-name",
               "type": {
-                "text": "string | undefined"
+                "text": "SlotName | undefined"
               },
               "fieldName": "slotName"
             },
@@ -1418,12 +1504,12 @@
               "fieldName": "slotConfiguration"
             },
             {
-              "name": "slotContents",
+              "name": "slotsContents",
               "type": {
-                "text": "SlotContent[]"
+                "text": "VizItemSlots"
               },
               "default": "[]",
-              "fieldName": "slotContents"
+              "fieldName": "slotsContents"
             },
             {
               "name": "label",
@@ -1447,6 +1533,33 @@
               },
               "fieldName": "dragBoundary"
             },
+            {
+              "name": "api-url",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "'https://api.luzmo.com'",
+              "description": "The API URL of the databroker",
+              "fieldName": "apiUrl"
+            },
+            {
+              "name": "auth-key",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "''",
+              "description": "The auth key of the databroker",
+              "fieldName": "authKey"
+            },
+            {
+              "name": "auth-token",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "''",
+              "description": "The auth token of the databroker",
+              "fieldName": "authToken"
+            },
             {
               "name": "menu",
               "type": {
@@ -6745,6 +6858,24 @@
               "attribute": "slot-type",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "slotName",
+              "type": {
+                "text": "SlotName"
+              },
+              "attribute": "slot-name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "itemType",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "item-type",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "noDrag",
@@ -6794,15 +6925,21 @@
               },
               "attribute": "drag-boundary"
             },
+            {
+              "kind": "field",
+              "name": "slotContents",
+              "type": {
+                "text": "GenericSlotContent[] | undefined"
+              },
+              "attribute": "slot-contents"
+            },
             {
               "kind": "field",
               "name": "measureColumns",
               "type": {
                 "text": "any[]"
               },
-              "default": "[]",
-              "description": "The list of columns that can be used for the rate aggregation",
-              "attribute": "measureColumns"
+              "default": "[]"
             },
             {
               "kind": "field",
@@ -6813,13 +6950,6 @@
               "description": "(Optional) If you only want to display a specific content of a slot, you can set the slotIndex to the index of the content you want to display.",
               "attribute": "slot-index"
             },
-            {
-              "kind": "field",
-              "name": "slotContentLabelElement",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
             {
               "kind": "field",
               "name": "displaySettingsElement",
@@ -6836,36 +6966,41 @@
             },
             {
               "kind": "field",
-              "name": "_slotListData",
+              "name": "apiUrl",
               "type": {
-                "text": "any[]"
+                "text": "string | undefined"
               },
-              "default": "[]"
+              "default": "'https://api.luzmo.com'",
+              "description": "The API URL of the databroker",
+              "attribute": "api-url",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "_slotContents",
+              "name": "authKey",
               "type": {
-                "text": "any[]"
+                "text": "string | undefined"
               },
-              "default": "[]"
+              "default": "'1a6069eb-9a30-424c-ad69-e0aa9e6bb8b6'",
+              "description": "The auth key of the databroker",
+              "attribute": "auth-key",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "_currentSlotContent",
+              "name": "authToken",
               "type": {
-                "text": "any"
+                "text": "string | undefined"
               },
-              "default": "{}"
+              "default": "'AGAjEOVhJPyemwt5QNx1rI6nxuOH9pwdtyeg0aGSKuWenPR8GYmC3g2yKiCIjuD8POQOrEMGLYNnZdYRHZFAMi7QOfGd6gpSgZEbLXyhW9ucYG0U9Mc0uUksxIelkVH5yUESO3c6bVCV7FMVNIo7GW'",
+              "description": "The auth token of the databroker",
+              "attribute": "auth-token",
+              "reflects": true
             },
             {
               "kind": "field",
               "name": "_activeIndex"
             },
-            {
-              "kind": "method",
-              "name": "updateContentLabel"
-            },
             {
               "kind": "method",
               "name": "removeSlotContent",
@@ -6885,6 +7020,11 @@
             {
               "kind": "method",
               "name": "_removeActiveSlotContent"
+            },
+            {
+              "kind": "method",
+              "name": "resetPosition",
+              "description": "Reset the menu position to its original location"
             }
           ],
           "events": [
@@ -6931,6 +7071,20 @@
               "description": "The slot type",
               "fieldName": "slotType"
             },
+            {
+              "name": "slot-name",
+              "type": {
+                "text": "SlotName"
+              },
+              "fieldName": "slotName"
+            },
+            {
+              "name": "item-type",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "itemType"
+            },
             {
               "name": "no-drag",
               "type": {
@@ -6972,13 +7126,11 @@
               "fieldName": "dragBoundary"
             },
             {
-              "name": "measureColumns",
+              "name": "slot-contents",
               "type": {
-                "text": "any[]"
+                "text": "GenericSlotContent[] | undefined"
               },
-              "default": "[]",
-              "description": "The list of columns that can be used for the rate aggregation",
-              "fieldName": "measureColumns"
+              "fieldName": "slotContents"
             },
             {
               "name": "slot-index",
@@ -6988,6 +7140,33 @@
               "description": "(Optional) If you only want to display a specific content of a slot, you can set the slotIndex to the index of the content you want to display.",
               "fieldName": "slotIndex"
             },
+            {
+              "name": "api-url",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "'https://api.luzmo.com'",
+              "description": "The API URL of the databroker",
+              "fieldName": "apiUrl"
+            },
+            {
+              "name": "auth-key",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "'1a6069eb-9a30-424c-ad69-e0aa9e6bb8b6'",
+              "description": "The auth key of the databroker",
+              "fieldName": "authKey"
+            },
+            {
+              "name": "auth-token",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "'AGAjEOVhJPyemwt5QNx1rI6nxuOH9pwdtyeg0aGSKuWenPR8GYmC3g2yKiCIjuD8POQOrEMGLYNnZdYRHZFAMi7QOfGd6gpSgZEbLXyhW9ucYG0U9Mc0uUksxIelkVH5yUESO3c6bVCV7FMVNIo7GW'",
+              "description": "The auth token of the databroker",
+              "fieldName": "authToken"
+            },
             {
               "name": "size",
               "type": {
@@ -6998,6 +7177,12 @@
               "fieldName": "size"
             }
           ],
+          "mixins": [
+            {
+              "name": "SignalWatcher",
+              "package": "@lit-labs/signals"
+            }
+          ],
           "superclass": {
             "name": "LuzmoElement",
             "module": "/src/utils/base"

package/item-definitions/bar-chart/i18n/bar-chart-options.de.d.ts

@@ -41,6 +41,7 @@ declare const _default: {
             tooltip: string;
             enum: {
                 none: string;
+                absolute: string;
                 percentage: string;
                 percentageLegend: string;
                 percentageCategory: string;

package/item-definitions/bar-chart/i18n/bar-chart-options.en.d.ts

@@ -41,6 +41,7 @@ declare const _default: {
             tooltip: string;
             enum: {
                 none: string;
+                absolute: string;
                 percentage: string;
                 percentageLegend: string;
                 percentageCategory: string;