@luzmo/analytics-components-kit 1.0.1-alpha.41 → 1.0.1-alpha.43

package/components/display-settings-period-over-period/index.js

@@ -17,28 +17,28 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { m as t, g as $, t as E, s as L } from "../set-locale-DbEAMqUs.js";
-import { l as O } from "../localized-decorator-DNr1P1m0.js";
-import { D as w, Z as S, g as I } from "../luzmo-icons-DbwDQtuO-QG0fLECn.js";
-import { m as j, a as A, R as p, I as C, z as h } from "../base-D76d76ww-BGkuhs54.js";
-import { k as D } from "../checkbox-mixin-Do7EgtpQ-hne79zc-.js";
+import { m as t, g as I, t as j, s as A } from "../set-locale-DbEAMqUs.js";
+import { l as D } from "../localized-decorator-DNr1P1m0.js";
+import { D as $, Z as T, g as F } from "../luzmo-icons-DbwDQtuO-QG0fLECn.js";
+import { m as H, a as B, R as p, I as E, z as h } from "../base-D76d76ww-BGkuhs54.js";
+import { k as N } from "../checkbox-mixin-Do7EgtpQ-hne79zc-.js";
 import "../index-CsDgk_sj.js";
 import "../index-Bdy8Bz-n.js";
 import "../index-Desl7GJ0.js";
 import "../index-CDpuEf8W.js";
-import { d as T } from "../decompose-numeric-format-BuZcjH2k.js";
-import { r as F, x as z, n as H } from "../property-Dn4zSyxu.js";
-import { r as B } from "../state-vVJlsarL.js";
-import { e as v } from "../query-Ddbd72Um.js";
-import { L as N } from "../focusable-BXhQz3_k.js";
-import { S as R, E as U } from "../sized-mixin-BR_Ii7le.js";
-const _ = () => {
+import { d as R } from "../decompose-numeric-format-BuZcjH2k.js";
+import { r as U, x as z, n as L } from "../property-BFMfZY1k.js";
+import { r as M } from "../state-BSTa7W6f.js";
+import { e as f } from "../query-Ddbd72Um.js";
+import { L as q } from "../focusable-Bhf_beoW.js";
+import { S as V, E as G } from "../sized-mixin-CkdMApAU.js";
+const S = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const e = document.createElement("style");
     e.setAttribute("data-luzmo-vars", ""), e.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: 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(e);
   }
 };
-_();
+S();
 /*! * Lucero - The design system for Luzmo.
  * 
  * Copyright © 2025 Luzmo
@@ -56,20 +56,20 @@ _();
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-const q = () => {
+const Q = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const e = document.createElement("style");
     e.setAttribute("data-luzmo-vars", ""), e.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: 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-disabled-color);--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-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(e);
   }
 };
-q();
-const M = ':host{color:var(--highcontrast-checkbox-content-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-hard)));min-block-size:var(--luzmo-checkbox-height, var(--checkbox-height, 32px));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative;font-family:var(--luzmo-checkbox-font-family, var(--luzmo-font-family))}:host(:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-color-down, var(--luzmo-font-color-hard)))}:host(:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-selected-color-down, var(--luzmo-font-color-hard)))}:host(:is(:active,[active])) #label{color:var(--highcontrast-checkbox-content-color-down, var(--luzmo-checkbox-content-color-down, var(--luzmo-font-color-hard)))}:host([invalid][invalid]) #box:before,:host([invalid][invalid]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-negative-color)))}:host([invalid][invalid]) #input:focus-visible+#box:before,:host([invalid][invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([readonly]){border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-selected-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]) #input:checked:disabled+#box:before,:host([readonly]) #input:disabled+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}:host([readonly]) #input:checked:disabled~#label,:host([readonly]) #input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-hard)))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{opacity:1;display:flex;transform:scale(1)}:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-hard)))}:host([invalid][invalid][indeterminate]) #box:before,:host([invalid][invalid][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-negative-color)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-default, var(--luzmo-primary)))}:host([emphasized]) #input:focus-visible:checked+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-emphasized-color-focus, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]) #input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-focus, var(--luzmo-negative-color)))}@media (hover: hover){:host(:hover) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-color-hover, var(--luzmo-font-color)))}:host(:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hard)))}:host(:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hard)))}:host([invalid][invalid]:hover) #box:before,:host([invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([readonly]:hover) #box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([indeterminate]:hover) #box:before,:host([indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hard)))}:host([invalid][invalid][indeterminate]:hover) #box:before,:host([invalid][invalid][indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([invalid][invalid][indeterminate]:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hard)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}:host([emphasized][invalid][invalid][indeterminate]:hover) #box:before,:host([emphasized][invalid][invalid][indeterminate]:hover) #input:checked+#box:before,:host([emphasized][invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}}:host([emphasized][indeterminate]:is(:active,[active])) #box:before,:host([emphasized][indeterminate]:is(:active,[active])) #input:checked+#box:before,:host([emphasized]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-down, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]:is(:active,[active])) #box:before,:host([emphasized][invalid][invalid]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-invalid-color-down, var(--luzmo-negative-color)))}:host([emphasized]:focus-visible) #box:before,:host([emphasized]:focus-visible) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#label{text-align:start;font-size:var(--luzmo-checkbox-font-size, var(--checkbox-font-size, 14px));transition:color var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;line-height:var(--luzmo-checkbox-line-height, 1.3);margin-block-start:var(--luzmo-checkbox-top-to-text, var(--checkbox-top-to-text, 6px));margin-inline-start:var(--luzmo-checkbox-text-to-control, var(--checkbox-text-to-control, 10px))}#label:lang(ja),#label:lang(ko),#label:lang(zh){line-height:var(--luzmo-checkbox-line-height-cjk, 1.5)}#input{color:var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color));box-sizing:border-box;inline-size:100%;block-size:100%;opacity:.0001;z-index:1;cursor:pointer;margin:0;padding:0;font-family:inherit;font-size:100%;line-height:1.15;position:absolute;overflow:visible}#input:disabled{cursor:default}#input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#input:focus-visible+#box:after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-checkbox-focus-indicator-width, var(--luzmo-indicator-width)) var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));margin:calc(var(--luzmo-checkbox-focus-indicator-gap, 2px) * -1)}#input:focus-visible+#label{color:var(--highcontrast-checkbox-content-color-focus, var(--luzmo-checkbox-content-color-focus, var(--luzmo-font-color-hard)))}#input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-hard)))}#box{--luzmo-checkbox-spacing: calc( var(--luzmo-checkbox-height, var(--checkbox-height, 32px)) - var( --luzmo-checkbox-control-size, var(--checkbox-control-size, 14px) ) );margin:calc(var(--luzmo-checkbox-spacing) / 2) 0;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}#box,#box:before{box-sizing:border-box;inline-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px));block-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px))}#box:before{forced-color-adjust:none;border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color)));z-index:0;content:"";border-radius:var(--luzmo-checkbox-control-corner-radius, 2px);border-width:var(--luzmo-checkbox-border-width, var(--luzmo-border-width));transition:border var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;border-style:solid;display:block;position:absolute}#box:after{border-radius:calc(var(--luzmo-checkbox-control-corner-radius, 2px) + var(--luzmo-checkbox-focus-indicator-gap, 2px));content:"";margin:var(--luzmo-checkbox-focus-indicator-gap, 2px);transition:box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out,margin var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out;display:block;position:absolute;inset-block:0;inset-inline:0;transform:translate(0)}#checkmark,#partialCheckmark{pointer-events:none;color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)));opacity:0;transition:opacity var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,transform var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;transform:scale(0);width:var(--textbox-control-size, 14px);display:flex;align-items:center;justify-content:center;font-size:var(--checkbox-icon-size)}#partialCheckmark{display:none}#input:checked:disabled+#box:before,#input:disabled+#box:before{border-color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-control-color-disabled, var(--luzmo-disabled-color)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}#input:checked:disabled~#label,#input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-content-color-disabled, var(--luzmo-disabled-color)))}@media (forced-colors: active){#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));outline-offset:var(--highcontrast-checkbox-focus-indicator-gap, var(--luzmo-checkbox-focus-indicator-gap, 2px));outline-style:auto;outline-width:var(--luzmo-focus-indicator-width, var(--luzmo-indicator-width))}#input:focus-visible+#box:after{box-shadow:0 0 0 0 var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)))}:host{--highcontrast-checkbox-content-color-default: CanvasText;--highcontrast-checkbox-content-color-hover: CanvasText;--highcontrast-checkbox-content-color-down: CanvasText;--highcontrast-checkbox-content-color-focus: CanvasText;--highcontrast-checkbox-background-color-default: Canvas;--highcontrast-checkbox-color-default: ButtonText;--highcontrast-checkbox-color-hover: ButtonText;--highcontrast-checkbox-color-focus: Highlight;--highcontrast-checkbox-highlight-color-default: Highlight;--highcontrast-checkbox-highlight-color-hover: Highlight;--highcontrast-checkbox-highlight-color-down: Highlight;--highcontrast-checkbox-highlight-color-focus: Highlight;--highcontrast-checkbox-disabled-color-default: GrayText;--highcontrast-checkbox-focus-indicator-color: CanvasText}}:host([size=s]){--checkbox-font-size: var(--luzmo-checkbox-size-s-font-size, 12px);--checkbox-height: var(--luzmo-checkbox-size-s-height, 24px);--checkbox-control-size: var(--luzmo-checkbox-size-s-control-size, 12px);--checkbox-top-to-text: var(--luzmo-checkbox-size-s-top-to-text, 4px);--checkbox-text-to-control: var(--luzmo-checkbox-size-s-text-to-control, 9px);--checkbox-icon-size: var(--luzmo-checkbox-size-s-icon-size, 9px)}:host{--checkbox-font-size: var(--luzmo-checkbox-size-m-font-size, 14px);--checkbox-height: var(--luzmo-checkbox-size-m-height, 32px);--checkbox-control-size: var(--luzmo-checkbox-size-m-control-size, 14px);--checkbox-top-to-text: var(--luzmo-checkbox-size-m-top-to-text, 6px);--checkbox-text-to-control: var( --luzmo-checkbox-size-m-text-to-control, 10px );--checkbox-icon-size: var(--luzmo-checkbox-size-m-icon-size, 10px)}:host([size=l]){--checkbox-font-size: var(--luzmo-checkbox-size-l-font-size, 16px);--checkbox-height: var(--luzmo-checkbox-size-l-height, 40px);--checkbox-control-size: var(--luzmo-checkbox-size-l-control-size, 16px);--checkbox-top-to-text: var(--luzmo-checkbox-size-l-top-to-text, 9px);--checkbox-text-to-control: var( --luzmo-checkbox-size-l-text-to-control, 11px );--checkbox-icon-size: var(--luzmo-checkbox-size-l-icon-size, 11px)}:host([size=xl]){--checkbox-font-size: var(--luzmo-checkbox-size-xl-font-size, 18px);--checkbox-height: var(--luzmo-checkbox-size-xl-height, 48px);--checkbox-control-size: var(--luzmo-checkbox-size-xl-control-size, 18px);--checkbox-top-to-text: var(--luzmo-checkbox-size-xl-top-to-text, 12px);--checkbox-text-to-control: var( --luzmo-checkbox-size-xl-text-to-control, 13px );--checkbox-icon-size: var(--luzmo-checkbox-size-xl-icon-size, 12px)}:host{display:inline-flex;vertical-align:top}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host(:empty) label{display:none}';
-var V = Object.defineProperty, u = (e, o, l, a) => {
-  for (var r = void 0, i = e.length - 1, c; i >= 0; i--)
-    (c = e[i]) && (r = c(o, l, r) || r);
-  return r && V(o, l, r), r;
+Q();
+const W = ':host{color:var(--highcontrast-checkbox-content-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-hard)));min-block-size:var(--luzmo-checkbox-height, var(--checkbox-height, 32px));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative;font-family:var(--luzmo-checkbox-font-family, var(--luzmo-font-family))}:host(:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-color-down, var(--luzmo-font-color-hard)))}:host(:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-down, var(--luzmo-checkbox-control-selected-color-down, var(--luzmo-font-color-hard)))}:host(:is(:active,[active])) #label{color:var(--highcontrast-checkbox-content-color-down, var(--luzmo-checkbox-content-color-down, var(--luzmo-font-color-hard)))}:host([invalid][invalid]) #box:before,:host([invalid][invalid]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-negative-color)))}:host([invalid][invalid]) #input:focus-visible+#box:before,:host([invalid][invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([readonly]){border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-selected-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([readonly]) #input:checked:disabled+#box:before,:host([readonly]) #input:disabled+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}:host([readonly]) #input:checked:disabled~#label,:host([readonly]) #input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-content-color-default, var(--luzmo-font-color-hard)))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{opacity:1;display:flex;transform:scale(1)}:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-hard)))}:host([invalid][invalid][indeterminate]) #box:before,:host([invalid][invalid][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-default, var(--luzmo-negative-color)));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-default, var(--luzmo-primary)))}:host([emphasized]) #input:focus-visible:checked+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-emphasized-color-focus, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]) #input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-focus, var(--luzmo-negative-color)))}@media (hover: hover){:host(:hover) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-color-hover, var(--luzmo-font-color)))}:host(:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hard)))}:host(:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hard)))}:host([invalid][invalid]:hover) #box:before,:host([invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([readonly]:hover) #box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)))}:host([indeterminate]:hover) #box:before,:host([indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-control-selected-color-hover, var(--luzmo-font-color-hard)))}:host([invalid][invalid][indeterminate]:hover) #box:before,:host([invalid][invalid][indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([invalid][invalid][indeterminate]:hover) #label{color:var(--highcontrast-checkbox-content-color-hover, var(--luzmo-checkbox-content-color-hover, var(--luzmo-font-color-hard)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}:host([emphasized][invalid][invalid][indeterminate]:hover) #box:before,:host([emphasized][invalid][invalid][indeterminate]:hover) #input:checked+#box:before,:host([emphasized][invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover, var(--luzmo-checkbox-invalid-color-hover, var(--luzmo-negative-color)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover, var(--luzmo-checkbox-emphasized-color-hover, var(--luzmo-primary)))}}:host([emphasized][indeterminate]:is(:active,[active])) #box:before,:host([emphasized][indeterminate]:is(:active,[active])) #input:checked+#box:before,:host([emphasized]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-emphasized-color-down, var(--luzmo-primary)))}:host([emphasized][invalid][invalid]:is(:active,[active])) #box:before,:host([emphasized][invalid][invalid]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-invalid-color-down, var(--luzmo-negative-color)))}:host([emphasized]:focus-visible) #box:before,:host([emphasized]:focus-visible) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#label{text-align:start;font-size:var(--luzmo-checkbox-font-size, var(--checkbox-font-size, 14px));transition:color var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;line-height:var(--luzmo-checkbox-line-height, 1.3);margin-block-start:var(--luzmo-checkbox-top-to-text, var(--checkbox-top-to-text, 6px));margin-inline-start:var(--luzmo-checkbox-text-to-control, var(--checkbox-text-to-control, 10px))}#label:lang(ja),#label:lang(ko),#label:lang(zh){line-height:var(--luzmo-checkbox-line-height-cjk, 1.5)}#input{color:var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color));box-sizing:border-box;inline-size:100%;block-size:100%;opacity:.0001;z-index:1;cursor:pointer;margin:0;padding:0;font-family:inherit;font-size:100%;line-height:1.15;position:absolute;overflow:visible}#input:disabled{cursor:default}#input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default, var(--luzmo-checkbox-control-selected-color-default, var(--luzmo-font-color)));background-color:var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color));border-width:var(--luzmo-checkbox-selected-border-width, calc(var(--checkbox-control-size, 14px) / 2))}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-focus, var(--luzmo-checkbox-control-color-focus, var(--luzmo-font-color)))}#input:focus-visible+#box:after{forced-color-adjust:none;box-shadow:0 0 0 var(--luzmo-checkbox-focus-indicator-width, var(--luzmo-indicator-width)) var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));margin:calc(var(--luzmo-checkbox-focus-indicator-gap, 2px) * -1)}#input:focus-visible+#label{color:var(--highcontrast-checkbox-content-color-focus, var(--luzmo-checkbox-content-color-focus, var(--luzmo-font-color-hard)))}#input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus, var(--luzmo-checkbox-control-selected-color-focus, var(--luzmo-font-color-hard)))}#box{--luzmo-checkbox-spacing: calc( var(--luzmo-checkbox-height, var(--checkbox-height, 32px)) - var( --luzmo-checkbox-control-size, var(--checkbox-control-size, 14px) ) );margin:calc(var(--luzmo-checkbox-spacing) / 2) 0;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}#box,#box:before{box-sizing:border-box;inline-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px));block-size:var(--luzmo-checkbox-control-size, var(--checkbox-control-size, 14px))}#box:before{forced-color-adjust:none;border-color:var(--highcontrast-checkbox-color-default, var(--luzmo-checkbox-control-color-default, var(--luzmo-font-color)));z-index:0;content:"";border-radius:var(--luzmo-checkbox-control-corner-radius, 2px);border-width:var(--luzmo-checkbox-border-width, var(--luzmo-border-width));transition:border var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;border-style:solid;display:block;position:absolute}#box:after{border-radius:calc(var(--luzmo-checkbox-control-corner-radius, 2px) + var(--luzmo-checkbox-focus-indicator-gap, 2px));content:"";margin:var(--luzmo-checkbox-focus-indicator-gap, 2px);transition:box-shadow var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out,margin var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-out;display:block;position:absolute;inset-block:0;inset-inline:0;transform:translate(0)}#checkmark,#partialCheckmark{pointer-events:none;color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)));opacity:0;transition:opacity var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out,transform var(--luzmo-checkbox-animation-duration, var(--luzmo-animation-duration)) ease-in-out;transform:scale(0);width:var(--textbox-control-size, 14px);display:flex;align-items:center;justify-content:center;font-size:var(--checkbox-icon-size)}#partialCheckmark{display:none}#input:checked:disabled+#box:before,#input:disabled+#box:before{border-color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-control-color-disabled, var(--luzmo-disabled-color)));background-color:var(--highcontrast-checkbox-background-color-default, var(--luzmo-checkbox-checkmark-color, var(--luzmo-background-color)))}#input:checked:disabled~#label,#input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-disabled-color-default, var(--luzmo-checkbox-content-color-disabled, var(--luzmo-disabled-color)))}@media (forced-colors: active){#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)));outline-offset:var(--highcontrast-checkbox-focus-indicator-gap, var(--luzmo-checkbox-focus-indicator-gap, 2px));outline-style:auto;outline-width:var(--luzmo-focus-indicator-width, var(--luzmo-indicator-width))}#input:focus-visible+#box:after{box-shadow:0 0 0 0 var(--highcontrast-checkbox-focus-indicator-color, var(--luzmo-checkbox-focus-indicator-color, var(--luzmo-primary)))}:host{--highcontrast-checkbox-content-color-default: CanvasText;--highcontrast-checkbox-content-color-hover: CanvasText;--highcontrast-checkbox-content-color-down: CanvasText;--highcontrast-checkbox-content-color-focus: CanvasText;--highcontrast-checkbox-background-color-default: Canvas;--highcontrast-checkbox-color-default: ButtonText;--highcontrast-checkbox-color-hover: ButtonText;--highcontrast-checkbox-color-focus: Highlight;--highcontrast-checkbox-highlight-color-default: Highlight;--highcontrast-checkbox-highlight-color-hover: Highlight;--highcontrast-checkbox-highlight-color-down: Highlight;--highcontrast-checkbox-highlight-color-focus: Highlight;--highcontrast-checkbox-disabled-color-default: GrayText;--highcontrast-checkbox-focus-indicator-color: CanvasText}}:host([size=s]){--checkbox-font-size: var(--luzmo-checkbox-size-s-font-size, 12px);--checkbox-height: var(--luzmo-checkbox-size-s-height, 24px);--checkbox-control-size: var(--luzmo-checkbox-size-s-control-size, 12px);--checkbox-top-to-text: var(--luzmo-checkbox-size-s-top-to-text, 4px);--checkbox-text-to-control: var(--luzmo-checkbox-size-s-text-to-control, 9px);--checkbox-icon-size: var(--luzmo-checkbox-size-s-icon-size, 9px)}:host{--checkbox-font-size: var(--luzmo-checkbox-size-m-font-size, 14px);--checkbox-height: var(--luzmo-checkbox-size-m-height, 32px);--checkbox-control-size: var(--luzmo-checkbox-size-m-control-size, 14px);--checkbox-top-to-text: var(--luzmo-checkbox-size-m-top-to-text, 6px);--checkbox-text-to-control: var( --luzmo-checkbox-size-m-text-to-control, 10px );--checkbox-icon-size: var(--luzmo-checkbox-size-m-icon-size, 10px)}:host([size=l]){--checkbox-font-size: var(--luzmo-checkbox-size-l-font-size, 16px);--checkbox-height: var(--luzmo-checkbox-size-l-height, 40px);--checkbox-control-size: var(--luzmo-checkbox-size-l-control-size, 16px);--checkbox-top-to-text: var(--luzmo-checkbox-size-l-top-to-text, 9px);--checkbox-text-to-control: var( --luzmo-checkbox-size-l-text-to-control, 11px );--checkbox-icon-size: var(--luzmo-checkbox-size-l-icon-size, 11px)}:host([size=xl]){--checkbox-font-size: var(--luzmo-checkbox-size-xl-font-size, 18px);--checkbox-height: var(--luzmo-checkbox-size-xl-height, 48px);--checkbox-control-size: var(--luzmo-checkbox-size-xl-control-size, 18px);--checkbox-top-to-text: var(--luzmo-checkbox-size-xl-top-to-text, 12px);--checkbox-text-to-control: var( --luzmo-checkbox-size-xl-text-to-control, 13px );--checkbox-icon-size: var(--luzmo-checkbox-size-xl-icon-size, 12px)}:host{display:inline-flex;vertical-align:top}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host(:empty) label{display:none}';
+var Y = Object.defineProperty, u = (e, o, i, l) => {
+  for (var r = void 0, c = e.length - 1, a; c >= 0; c--)
+    (a = e[c]) && (r = a(o, i, r) || r);
+  return r && Y(o, i, r), r;
 };
-const G = () => p`<div id="checkmark">${w(S)}</div>`, Q = () => p`<div id="partialCheckmark">${w(I)}</div>`, P = class extends j(D(C), {
+const Z = () => p`<div id="checkmark">${$(T)}</div>`, J = () => p`<div id="partialCheckmark">${$(F)}</div>`, O = class extends H(N(E), {
   noDefaultSize: !0
 }) {
   constructor() {
@@ -81,7 +81,7 @@ const G = () => p`<div id="checkmark">${w(S)}</div>`, Q = () => p`<div id="parti
     });
   }
   static get styles() {
-    return [A(M)];
+    return [B(W)];
   }
   click() {
     var o;
@@ -94,8 +94,8 @@ const G = () => p`<div id="checkmark">${w(S)}</div>`, Q = () => p`<div id="parti
     return p`
       ${super.render()}
       <span id="box">
-        ${this.checked ? G() : p``}
-        ${this.indeterminate ? Q() : p``}
+        ${this.checked ? Z() : p``}
+        ${this.indeterminate ? J() : p``}
       </span>
       <label id="label" for="input"><slot></slot></label>
     `;
@@ -104,36 +104,36 @@ const G = () => p`<div id="checkmark">${w(S)}</div>`, Q = () => p`<div id="parti
     super.updated(o), o.has("disabled") && (o.get("disabled") !== void 0 || this.disabled) && (this.disabled ? (this.inputElement.tabIndex = this.tabIndex, this.tabIndex = -1) : (this.tabIndex = this.inputElement.tabIndex, this.inputElement.removeAttribute("tabindex")), this.inputElement.disabled = this.disabled), o.has("indeterminate") && (this.inputElement.indeterminate = this.indeterminate), o.has("invalid") && (this.invalid ? this.inputElement.setAttribute("aria-invalid", "true") : this.inputElement.removeAttribute("aria-invalid"));
   }
 };
-P.shadowRootOptions = {
-  ...C.shadowRootOptions,
+O.shadowRootOptions = {
+  ...E.shadowRootOptions,
   delegatesFocus: !0
 };
-let s = P;
+let d = O;
 u([
   h({ type: Boolean, reflect: !0 })
-], s.prototype, "disabled");
+], d.prototype, "disabled");
 u([
   h({ type: Boolean, reflect: !0 })
-], s.prototype, "indeterminate");
+], d.prototype, "indeterminate");
 u([
   h({ type: Boolean, reflect: !0 })
-], s.prototype, "autofocus");
+], d.prototype, "autofocus");
 u([
   h({ type: Boolean, reflect: !0 })
-], s.prototype, "invalid");
+], d.prototype, "invalid");
 u([
   h({ type: Boolean, reflect: !0 })
-], s.prototype, "emphasized");
+], d.prototype, "emphasized");
 u([
   h({ reflect: !0, type: Number, attribute: "tabindex" })
-], s.prototype, "tabIndex");
-customElements.get("luzmo-checkbox") || customElements.define("luzmo-checkbox", s);
-const y = {
+], d.prototype, "tabIndex");
+customElements.get("luzmo-checkbox") || customElements.define("luzmo-checkbox", d);
+const _ = {
   none: () => t("None", { desc: "Period option" }),
   past: () => t("Past value", { desc: "Period option" }),
   absoluteChange: () => t("Absolute change", { desc: "Period option" }),
   percentageChange: () => t("% change", { desc: "Period option" })
-}, W = [
+}, x = [
   { key: "periods", i18n: () => t("Periods", { desc: "Period option" }) },
   { key: "years", i18n: () => t("Years", { desc: "Period option" }) },
   { key: "quarters", i18n: () => t("Quarters", { desc: "Period option" }) },
@@ -143,38 +143,43 @@ const y = {
   { key: "hours", i18n: () => t("Hours", { desc: "Period option" }) },
   { key: "minutes", i18n: () => t("Minutes", { desc: "Period option" }) },
   { key: "seconds", i18n: () => t("Seconds", { desc: "Period option" }) }
-], Y = ":host{font-family:var(--luzmo-display-settings-period-over-period-font-family, var(--luzmo-font-family));font-size:var(--luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size));color:var(--luzmo-display-settings-period-over-period-color, var(--luzmo-font-color))}:host .settings-container{display:flex;flex-direction:column;gap:var(--luzmo-spacing-2)}:host .settings-row{display:flex;justify-content:flex-start;align-items:center;gap:var(--luzmo-display-settings-period-over-period-gap, var(--display-settings-period-over-period-gap))}:host{--display-settings-period-over-period-gap: var(--luzmo-spacing-3);--display-settings-period-over-period-font-size: var(--luzmo-font-size)}:host([size=s]){--display-settings-period-over-period-gap: var(--luzmo-spacing-3);--display-settings-period-over-period-font-size: var(--luzmo-font-size-s)}:host([size=l]){--display-settings-period-over-period-gap: var(--luzmo-spacing-4);--display-settings-period-over-period-font-size: var(--luzmo-font-size-l)}:host([size=xl]){--display-settings-period-over-period-gap: var(--luzmo-spacing-5);--display-settings-period-over-period-font-size: var(--luzmo-font-size-xl)}";
-var Z = Object.defineProperty, J = Object.getOwnPropertyDescriptor, d = (e, o, l, a) => {
-  for (var r = a > 1 ? void 0 : a ? J(o, l) : o, i = e.length - 1, c; i >= 0; i--)
-    (c = e[i]) && (r = (a ? c(o, l, r) : c(r)) || r);
-  return a && r && Z(o, l, r), r;
+], K = ":host{font-family:var(--luzmo-display-settings-period-over-period-font-family, var(--luzmo-font-family));font-size:var(--luzmo-display-settings-period-over-period-font-size, var(--display-settings-period-over-period-font-size));color:var(--luzmo-display-settings-period-over-period-color, var(--luzmo-font-color))}:host .settings-container{display:flex;flex-direction:column;gap:var(--luzmo-spacing-2)}:host .settings-row{display:flex;justify-content:flex-start;align-items:center;gap:var(--luzmo-display-settings-period-over-period-gap, var(--display-settings-period-over-period-gap))}:host{--display-settings-period-over-period-gap: var(--luzmo-spacing-3);--display-settings-period-over-period-font-size: var(--luzmo-font-size)}:host([size=s]){--display-settings-period-over-period-gap: var(--luzmo-spacing-3);--display-settings-period-over-period-font-size: var(--luzmo-font-size-s)}:host([size=l]){--display-settings-period-over-period-gap: var(--luzmo-spacing-4);--display-settings-period-over-period-font-size: var(--luzmo-font-size-l)}:host([size=xl]){--display-settings-period-over-period-gap: var(--luzmo-spacing-5);--display-settings-period-over-period-font-size: var(--luzmo-font-size-xl)}";
+var X = Object.defineProperty, oo = Object.getOwnPropertyDescriptor, s = (e, o, i, l) => {
+  for (var r = l > 1 ? void 0 : l ? oo(o, i) : o, c = e.length - 1, a; c >= 0; c--)
+    (a = e[c]) && (r = (l ? a(o, i, r) : a(r)) || r);
+  return l && r && X(o, i, r), r;
 };
-let n = class extends R(
-  N,
+let n = class extends V(
+  q,
   {
-    validSizes: Object.values(U)
+    validSizes: Object.values(G)
   }
 ) {
   constructor() {
     super(...arguments), this.language = "en", this.slotContent = {};
   }
   static get styles() {
-    return [F(Y)];
+    return [U(K)];
   }
   willUpdate(e) {
-    var o, l, a, r, i, c, m, b, x, f, g, k;
-    e.has("slotContent") && (this._periodComparison = (l = (o = this.slotContent) == null ? void 0 : o.PeriodOverPeriod) == null ? void 0 : l.type, this._numberPeriods = (r = (a = this.slotContent) == null ? void 0 : a.PeriodOverPeriod) == null ? void 0 : r.quantity, this._periodLevel = (c = (i = this.slotContent) == null ? void 0 : i.PeriodOverPeriod) == null ? void 0 : c.level, this._incompletePeriods = (b = (m = this.slotContent) == null ? void 0 : m.PeriodOverPeriod) == null ? void 0 : b.periodToDate, this._minLevel = ((f = (x = this.slotContent) == null ? void 0 : x.PeriodOverPeriod) == null ? void 0 : f.minLevel) ?? ((g = this.slotContent) == null ? void 0 : g.lowestLevel) ?? (((k = this.slotContent) == null ? void 0 : k.subtype) === "date" ? 5 : 9)), this._periodComparison = this._periodComparison ?? "none", this._numberPeriods = this._numberPeriods ?? 1, this._periodLevel = this._periodLevel ?? "periods", this._incompletePeriods = this._incompletePeriods ?? !1, this._minLevel = this._minLevel ?? 9, e.has("language") && this.language !== $() && ([...E].includes(this.language ?? "en") || this.language === "en") && L(this.language);
+    var o, i, l, r, c, a, m, b, g, k, y, w, C, P;
+    if (e.has("slotContent")) {
+      this._periodComparison = (i = (o = this.slotContent) == null ? void 0 : o.periodOverPeriod) == null ? void 0 : i.type, this._numberPeriods = (r = (l = this.slotContent) == null ? void 0 : l.periodOverPeriod) == null ? void 0 : r.quantity;
+      const v = (a = (c = this.slotContent) == null ? void 0 : c.periodOverPeriod) == null ? void 0 : a.level;
+      this._periodLevel = typeof v == "number" && v >= 0 && v < x.length ? x[v].key : ((b = (m = this.slotContent) == null ? void 0 : m.periodOverPeriod) == null ? void 0 : b.level) || "periods", this._incompletePeriods = (k = (g = this.slotContent) == null ? void 0 : g.periodOverPeriod) == null ? void 0 : k.periodToDate, this._minLevel = ((w = (y = this.slotContent) == null ? void 0 : y.periodOverPeriod) == null ? void 0 : w.minLevel) ?? ((C = this.slotContent) == null ? void 0 : C.lowestLevel) ?? (((P = this.slotContent) == null ? void 0 : P.subtype) === "date" ? 5 : 9);
+    }
+    this._periodComparison = this._periodComparison ?? "none", this._numberPeriods = this._numberPeriods ?? 1, this._periodLevel = this._periodLevel ?? "periods", this._incompletePeriods = this._incompletePeriods ?? !1, this._minLevel = this._minLevel ?? 9, e.has("language") && this.language !== I() && ([...j].includes(this.language ?? "en") || this.language === "en") && A(this.language);
   }
   setPeriodComparison() {
     var b;
     const e = { ...this.slotContent };
     this._periodComparison = this._periodComparisonElement.value;
-    const o = T((b = this.slotContent) == null ? void 0 : b.format), l = ["%", "y", "a%", "ay"].includes(
+    const o = R((b = this.slotContent) == null ? void 0 : b.format), i = ["%", "y", "a%", "ay"].includes(
       o.typeFormat
-    ), a = o.typeFormat.includes("a"), r = a ? "a" : "", i = o.comma === "," || a ? "," : "", c = o.precision ? Number.parseInt(o.precision.replace(".", ""), 10) : 0, m = ["z", "az", "y", "ay", "w", "aw"].includes(
+    ), l = o.typeFormat.includes("a"), r = l ? "a" : "", c = o.comma === "," || l ? "," : "", a = o.precision ? Number.parseInt(o.precision.replace(".", ""), 10) : 0, m = ["z", "az", "y", "ay", "w", "aw"].includes(
       o.typeFormat
     );
-    this._periodComparison === "percentageChange" && !l ? e.format = `${i}.${c}${r}${m ? "y" : "%"}` : this._periodComparison !== "percentageChange" && e.subtype === "currency" && l && (e.format = `${i}.${c}${r}${m ? "z" : "f"}`), this.sendEvent(e);
+    this._periodComparison === "percentageChange" && !i ? e.format = `${c}.${a}${r}${m ? "y" : "%"}` : this._periodComparison !== "percentageChange" && e.subtype === "currency" && i && (e.format = `${c}.${a}${r}${m ? "z" : "f"}`), this.sendEvent(e);
   }
   setNumberOfPeriods() {
     this._numberPeriods = Number.parseInt(this._numberPeriodsElement.value, 10);
@@ -192,14 +197,17 @@ let n = class extends R(
     this.sendEvent(e);
   }
   sendEvent(e) {
-    const o = { ...e };
-    o.PeriodOverPeriod = {
+    const o = { ...e }, i = x.findIndex(
+      (l) => l.key === this._periodLevel
+    );
+    o.periodOverPeriod = {
       type: this._periodComparison,
-      level: this._periodLevel,
+      // Use the index as the numeric level value
+      level: Math.max(i, 0),
       quantity: this._numberPeriods,
       periodToDate: this._incompletePeriods,
       minLevel: this._minLevel
-    }, this._periodComparison === "none" && delete o.PeriodOverPeriod, this.dispatchEvent(
+    }, this._periodComparison === "none" && delete o.periodOverPeriod, this.dispatchEvent(
       new CustomEvent("slot-content-changed", {
         bubbles: !0,
         composed: !0,
@@ -211,7 +219,7 @@ let n = class extends R(
     );
   }
   renderPeriodSettings() {
-    const e = W.slice(0, (this._minLevel ?? 0) + 1).map(
+    const e = x.slice(0, (this._minLevel ?? 0) + 1).map(
       (o) => z`<luzmo-menu-item value=${o.key}>
           ${o.i18n()}
         </luzmo-menu-item>`
@@ -261,9 +269,9 @@ let n = class extends R(
       </div>`;
   }
   render() {
-    const e = Object.keys(y).map(
+    const e = Object.keys(_).map(
       (o) => z`<luzmo-menu-item value=${o}>
-          ${y[o]()}
+          ${_[o]()}
         </luzmo-menu-item>`
     );
     return z`<div class="settings-container">
@@ -287,26 +295,29 @@ let n = class extends R(
     </div>`;
   }
 };
-d([
-  H({ type: String, reflect: !0 })
+s([
+  L({ type: String, reflect: !0 })
 ], n.prototype, "language", 2);
-d([
-  v("#period-comparison")
+s([
+  L({ type: Object, attribute: "slot-content" })
+], n.prototype, "slotContent", 2);
+s([
+  f("#period-comparison")
 ], n.prototype, "_periodComparisonElement", 2);
-d([
-  v("#number-periods")
+s([
+  f("#number-periods")
 ], n.prototype, "_numberPeriodsElement", 2);
-d([
-  v("#period-level")
+s([
+  f("#period-level")
 ], n.prototype, "_periodLevelElement", 2);
-d([
-  v("#incomplete-periods")
+s([
+  f("#incomplete-periods")
 ], n.prototype, "_incompletePeriodsElement", 2);
-d([
-  B()
+s([
+  M()
 ], n.prototype, "_periodComparison", 2);
-n = d([
-  O()
+n = s([
+  D()
 ], n);
 customElements.get("luzmo-display-settings-period-over-period") || customElements.define(
   "luzmo-display-settings-period-over-period",

package/components/draggable-data-item/draggable-data-item.d.ts

@@ -8,6 +8,7 @@ declare const LuzmoDraggableDataItem_base: typeof LuzmoElement & {
 /**
  * @element luzmo-draggable-data-item
  * @fires data-item-dropped - Announces that the draggable data item has been dropped
+ * @fires data-item-drag-started - Announces that the drag is started on the data item
  */
 export declare class LuzmoDraggableDataItem extends LuzmoDraggableDataItem_base {
     static styles: import("lit").CSSResult;
@@ -16,6 +17,7 @@ export declare class LuzmoDraggableDataItem extends LuzmoDraggableDataItem_base
     disabled: boolean;
     hideSublevels: boolean;
     hideTypeIcon: boolean;
+    secondaryIconType?: 'derived' | 'formula';
     label: string;
     description: string;
     data: any;

package/components/draggable-data-item/index.cjs

@@ -17,20 +17,20 @@
  * 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 c=require("../localized-decorator-SOrjcPab.cjs"),m=require("../set-locale-Cam8nRIW.cjs"),v=require("../periods.const-CfXsouLz.cjs"),e=require("../property-BCb4Kybn.cjs"),h=require("../focusable-BTJYY_Mf.cjs"),p=require("../sized-mixin-BNtmplgF.cjs");require("../draggable-data-item-level/index.cjs");const z=":host{--draggable-data-item-sublevels-margin-vertical: var(--luzmo-spacing-1);--draggable-data-item-sublevels-gap: 0}:host([size=s]){--draggable-data-item-sublevels-margin-vertical: var(--luzmo-spacing-1)}:host([size=l]){--draggable-data-item-sublevels-margin-vertical: var(--luzmo-spacing-2)}:host([size=xl]){--draggable-data-item-sublevels-margin-vertical: var(--luzmo-spacing-3)}.draggable-data-item-sublevels{display:flex;flex-direction:column;gap:var(--luzmo-draggable-data-item-sublevels-gap, var(--draggable-data-item-sublevels-gap));margin:var(--luzmo-draggable-data-item-sublevels-margin-vertical, var(--draggable-data-item-sublevels-margin-vertical)) 0}:host{box-sizing:border-box}";var y=Object.defineProperty,D=Object.getOwnPropertyDescriptor,l=(d,t,s,r)=>{for(var a=r>1?void 0:r?D(t,s):t,g=d.length-1,o;g>=0;g--)(o=d[g])&&(a=(r?o(t,s,a):o(a))||a);return r&&a&&y(t,s,a),a};exports.LuzmoDraggableDataItem=class extends p.SizedMixin(h.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.language="en",this.data={}}willUpdate(t){t.has("language")&&this.language!==m.getLocale()&&([...m.targetLocales].includes(this.language??"en")||this.language==="en")&&m.setLocale(this.language)}renderSublevels(){var s,r,a,g,o;let t;if(((s=this.data)==null?void 0:s.type)==="datetime")return t=((r=this.data)==null?void 0:r.subtype)==="date"?this.data.lowestLevel??5:this.data.lowestLevel??9,e.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../localized-decorator-SOrjcPab.cjs"),m=require("../set-locale-Cam8nRIW.cjs"),v=require("../periods.const-CfXsouLz.cjs"),e=require("../property-BV1QaY8E.cjs"),p=require("../focusable-B8t8a-WJ.cjs"),h=require("../sized-mixin-C48t6K7U.cjs");require("../draggable-data-item-level/index.cjs");const y=":host{--draggable-data-item-sublevels-margin-vertical: var(--luzmo-spacing-1);--draggable-data-item-sublevels-gap: 0}:host([size=s]){--draggable-data-item-sublevels-margin-vertical: var(--luzmo-spacing-1)}:host([size=l]){--draggable-data-item-sublevels-margin-vertical: var(--luzmo-spacing-2)}:host([size=xl]){--draggable-data-item-sublevels-margin-vertical: var(--luzmo-spacing-3)}.draggable-data-item-sublevels{display:flex;flex-direction:column;gap:var(--luzmo-draggable-data-item-sublevels-gap, var(--draggable-data-item-sublevels-gap));margin:var(--luzmo-draggable-data-item-sublevels-margin-vertical, var(--draggable-data-item-sublevels-margin-vertical)) 0}:host{box-sizing:border-box}";var z=Object.defineProperty,D=Object.getOwnPropertyDescriptor,t=(n,l,s,i)=>{for(var a=i>1?void 0:i?D(l,s):l,g=n.length-1,o;g>=0;g--)(o=n[g])&&(a=(i?o(l,s,a):o(a))||a);return i&&a&&z(l,s,a),a};exports.LuzmoDraggableDataItem=class extends h.SizedMixin(p.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.language="en",this.data={}}willUpdate(l){l.has("language")&&this.language!==m.getLocale()&&([...m.targetLocales].includes(this.language??"en")||this.language==="en")&&m.setLocale(this.language)}renderSublevels(){var s,i,a,g,o;let l;if(((s=this.data)==null?void 0:s.type)==="datetime")return l=((i=this.data)==null?void 0:i.subtype)==="date"?this.data.lowestLevel??5:this.data.lowestLevel??9,e.x`
         <div class="draggable-data-item-sublevels">
-          ${Array.from({length:t},(b,i)=>{const n=v.DATETIME_LEVELS[i].i18n(),u={...this.data,level:i+1};return e.x`<luzmo-draggable-data-item-level
+          ${Array.from({length:l},(b,r)=>{const d=v.DATETIME_LEVELS[r].i18n(),u={...this.data,level:r+1};return e.x`<luzmo-draggable-data-item-level
               sublevel
               .data=${u}
               .language=${this.language}
               .size=${this.size}
               .variant=${this.variant}
               .disabled=${this.disabled}
-              .label=${n}
+              .label=${d}
               ?hide-type-icon=${this.hideTypeIcon}
             ></luzmo-draggable-data-item-level>`})}
         </div>
-      `;if(((a=this.data)==null?void 0:a.type)==="hierarchy"&&((o=(g=this.data)==null?void 0:g.hierarchyLevels)==null?void 0:o.length)>2){const b=this.data.hierarchyLevels.filter(i=>(i==null?void 0:i.level)>=1).map((i,n)=>{const u={...this.data,level:n,label:i.label};return e.x`<luzmo-draggable-data-item-level
+      `;if(((a=this.data)==null?void 0:a.type)==="hierarchy"&&((o=(g=this.data)==null?void 0:g.hierarchyLevels)==null?void 0:o.length)>2){const b=this.data.hierarchyLevels.filter(r=>(r==null?void 0:r.level)>=1).map((r,d)=>{const u={...this.data,level:d,label:r.label};return e.x`<luzmo-draggable-data-item-level
             sublevel
             .data=${u}
             .language=${this.language}
@@ -49,7 +49,8 @@
         .disabled=${this.disabled}
         .label=${this.label}
         .description=${this.description}
+        .secondaryIconType=${this.secondaryIconType}
         ?hide-type-icon=${this.hideTypeIcon}
       ></luzmo-draggable-data-item-level>
       ${this.hideSublevels?"":this.renderSublevels()}
-    `}};exports.LuzmoDraggableDataItem.styles=e.r(z);l([e.n({type:String,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"variant",2);l([e.n({type:String,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"language",2);l([e.n({type:Boolean,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"disabled",2);l([e.n({type:Boolean,reflect:!0,attribute:"hide-sublevels"})],exports.LuzmoDraggableDataItem.prototype,"hideSublevels",2);l([e.n({type:Boolean,reflect:!0,attribute:"hide-type-icon"})],exports.LuzmoDraggableDataItem.prototype,"hideTypeIcon",2);l([e.n({type:String,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"label",2);l([e.n({type:String,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"description",2);l([e.n({type:Object})],exports.LuzmoDraggableDataItem.prototype,"data",2);exports.LuzmoDraggableDataItem=l([c.localized()],exports.LuzmoDraggableDataItem);customElements.get("luzmo-draggable-data-item")||customElements.define("luzmo-draggable-data-item",exports.LuzmoDraggableDataItem);
+    `}};exports.LuzmoDraggableDataItem.styles=e.r(y);t([e.n({type:String,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"variant",2);t([e.n({type:String,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"language",2);t([e.n({type:Boolean,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"disabled",2);t([e.n({type:Boolean,reflect:!0,attribute:"hide-sublevels"})],exports.LuzmoDraggableDataItem.prototype,"hideSublevels",2);t([e.n({type:Boolean,reflect:!0,attribute:"hide-type-icon"})],exports.LuzmoDraggableDataItem.prototype,"hideTypeIcon",2);t([e.n({type:String,reflect:!0,attribute:"secondary-icon-type"})],exports.LuzmoDraggableDataItem.prototype,"secondaryIconType",2);t([e.n({type:String,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"label",2);t([e.n({type:String,reflect:!0})],exports.LuzmoDraggableDataItem.prototype,"description",2);t([e.n({type:Object})],exports.LuzmoDraggableDataItem.prototype,"data",2);exports.LuzmoDraggableDataItem=t([c.localized()],exports.LuzmoDraggableDataItem);customElements.get("luzmo-draggable-data-item")||customElements.define("luzmo-draggable-data-item",exports.LuzmoDraggableDataItem);

package/components/draggable-data-item/index.js

@@ -20,9 +20,9 @@
 import { l as b } from "../localized-decorator-DNr1P1m0.js";
 import { g as p, t as h, s as f } from "../set-locale-DbEAMqUs.js";
 import { D as v } from "../periods.const-C89NNRX-.js";
-import { x as n, r as x, n as t } from "../property-Dn4zSyxu.js";
-import { L as y } from "../focusable-BXhQz3_k.js";
-import { S as $ } from "../sized-mixin-BR_Ii7le.js";
+import { x as n, r as y, n as a } from "../property-BFMfZY1k.js";
+import { L as x } from "../focusable-Bhf_beoW.js";
+import { S as $ } from "../sized-mixin-CkdMApAU.js";
 import "../draggable-data-item-level/index.js";
 const z = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
@@ -37,7 +37,7 @@ var S = Object.defineProperty, L = Object.getOwnPropertyDescriptor, r = (o, i, u
     (d = o[m]) && (l = (s ? d(i, u, l) : d(l)) || l);
   return s && l && S(i, u, l), l;
 };
-let e = class extends $(y, {
+let e = class extends $(x, {
   validSizes: ["s", "m", "l", "xl"],
   noDefaultSize: !0
 }) {
@@ -53,8 +53,8 @@ let e = class extends $(y, {
     if (((i = this.data) == null ? void 0 : i.type) === "datetime")
       return o = ((u = this.data) == null ? void 0 : u.subtype) === "date" ? this.data.lowestLevel ?? 5 : this.data.lowestLevel ?? 9, n`
         <div class="draggable-data-item-sublevels">
-          ${Array.from({ length: o }, (d, a) => {
-        const c = v[a].i18n(), g = { ...this.data, level: a + 1 };
+          ${Array.from({ length: o }, (d, t) => {
+        const c = v[t].i18n(), g = { ...this.data, level: t + 1 };
         return n`<luzmo-draggable-data-item-level
               sublevel
               .data=${g}
@@ -69,8 +69,8 @@ let e = class extends $(y, {
         </div>
       `;
     if (((s = this.data) == null ? void 0 : s.type) === "hierarchy" && ((m = (l = this.data) == null ? void 0 : l.hierarchyLevels) == null ? void 0 : m.length) > 2) {
-      const d = this.data.hierarchyLevels.filter((a) => (a == null ? void 0 : a.level) >= 1).map((a, c) => {
-        const g = { ...this.data, level: c, label: a.label };
+      const d = this.data.hierarchyLevels.filter((t) => (t == null ? void 0 : t.level) >= 1).map((t, c) => {
+        const g = { ...this.data, level: c, label: t.label };
         return n`<luzmo-draggable-data-item-level
             sublevel
             .data=${g}
@@ -97,36 +97,40 @@ let e = class extends $(y, {
         .disabled=${this.disabled}
         .label=${this.label}
         .description=${this.description}
+        .secondaryIconType=${this.secondaryIconType}
         ?hide-type-icon=${this.hideTypeIcon}
       ></luzmo-draggable-data-item-level>
       ${this.hideSublevels ? "" : this.renderSublevels()}
     `;
   }
 };
-e.styles = x(w);
+e.styles = y(w);
 r([
-  t({ type: String, reflect: !0 })
+  a({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
 r([
-  t({ type: String, reflect: !0 })
+  a({ type: String, reflect: !0 })
 ], e.prototype, "language", 2);
 r([
-  t({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
 r([
-  t({ type: Boolean, reflect: !0, attribute: "hide-sublevels" })
+  a({ type: Boolean, reflect: !0, attribute: "hide-sublevels" })
 ], e.prototype, "hideSublevels", 2);
 r([
-  t({ type: Boolean, reflect: !0, attribute: "hide-type-icon" })
+  a({ type: Boolean, reflect: !0, attribute: "hide-type-icon" })
 ], e.prototype, "hideTypeIcon", 2);
 r([
-  t({ type: String, reflect: !0 })
+  a({ type: String, reflect: !0, attribute: "secondary-icon-type" })
+], e.prototype, "secondaryIconType", 2);
+r([
+  a({ type: String, reflect: !0 })
 ], e.prototype, "label", 2);
 r([
-  t({ type: String, reflect: !0 })
+  a({ type: String, reflect: !0 })
 ], e.prototype, "description", 2);
 r([
-  t({ type: Object })
+  a({ type: Object })
 ], e.prototype, "data", 2);
 e = r([
   b()

package/components/draggable-data-item-level/draggable-data-item-level.d.ts

@@ -9,6 +9,7 @@ declare const LuzmoDraggableDataItemLevel_base: typeof LuzmoElement & {
 /**
  * @element luzmo-draggable-data-item-level
  * @fires data-item-dropped - Announces that the draggable data item has been dropped
+ * @fires data-item-drag-started - Announces that the drag is started on the data item
  */
 export declare class LuzmoDraggableDataItemLevel extends LuzmoDraggableDataItemLevel_base {
     static styles: import("lit").CSSResult;
@@ -19,10 +20,12 @@ export declare class LuzmoDraggableDataItemLevel extends LuzmoDraggableDataItemL
     disabled: boolean;
     label: string;
     description: string;
+    secondaryIconType?: 'derived' | 'formula';
     data: any;
     private _cleanupDraggable;
     disconnectedCallback(): void;
     private dataItemLevelDropped;
+    private dataItemLevelDragStarted;
     protected firstUpdated(_changedProperties: PropertyValues): void;
     protected render(): TemplateResult;
 }