q2-tecton-elements 1.66.1 → 1.67.0

package/dist/q2-tecton-elements/q2-link_2.entry.js

@@ -1,15 +1,13 @@
 import { r as t, c as i, h as e, g as n } from "./index-CGkHOjh1.js";
 
-import { h as o } from "./index-B4WYBDS9.js";
+import { h as o } from "./index-C4PILj1_.js";
 
-const r = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host:active{box-shadow:none}:host([ellipsis]:not([ellipsis=false])){display:block;flex:0 1 auto;max-width:var(--tct-link-ellipsis-max-width, 45%);min-width:0;overflow:hidden}:host([ellipsis]:not([ellipsis=false])[full-width]:not([full-width=false])){flex:1 1 0px;max-width:100%}:host([full-width]:not([full-width=false])){display:inline-flex;justify-content:center;width:100%}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.label.ellipsis{display:block;min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.link-container{--comp-link-font-bold-stroke-width:0.5px;background:transparent;border:none;border-radius:var(--tct-link-border-radius, 0);font-size:var(--tct-link-font-size, inherit);font-weight:var(--tct-link-font-weight, inherit);max-width:100%;overflow:hidden}.link-container.standalone{--comp-icon-stroke:var(--tct-link-icon-stroke-width, 1.5);display:block;width:100%;max-width:100%;min-width:0}.link-container.standalone .link{color:var(--tct-link-color-standalone, var(--t-primary));min-height:var(--tct-link-min-height, 24px);display:flex;align-items:center;border-radius:var(--tct-link-border-radius, 0);--tct-icon-size:16px;text-decoration:none;width:100%;max-width:100%;min-width:0;overflow:hidden}.link-container.standalone .link q2-icon{margin-left:var(--tct-link-label-icon-gap, 6px);color:var(--tct-link-icon-color, inherit);flex-shrink:0}.link-container.standalone:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover .link{color:var(--tct-link-color-standalone-active, var(--t-primary-d2));box-shadow:none}.link-container.standalone.disabled .link{cursor:not-allowed;color:var(--tct-link-color-standalone-disabled-color, var(--t-primary));opacity:var(--tct-link-color-standalone-disabled-opacity, var(--tct-link-disabled-opacity, var(--app-disabled-opacity, 0.4)));text-decoration:none}.link-container.standalone.disabled:hover{text-decoration:none}.link-container.inline{margin:0 var(--tct-link-side-margin, 6px);text-decoration:underline;color:var(--tct-link-color-inline, var(--t-primary))}.link-container.inline.ellipsis{display:block;max-width:100%}.link-container.inline:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width))}.link-container.inline:active:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));color:var(--tct-link-color-inline-active, var(--t-primary-d2));box-shadow:none}.link-container.inline.disabled{cursor:not-allowed;opacity:var(--tct-link-disabled-opacity, var(--app-disabled-opacity, 0.4))}.link-container.inline:focus-visible .link-container.inline{box-shadow:var(--const-double-focus-ring)}";
+const s = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host:active{box-shadow:none}:host([ellipsis]:not([ellipsis=false])){display:block;flex:0 1 auto;max-width:var(--tct-link-ellipsis-max-width, 45%);min-width:0;overflow:hidden}:host([ellipsis]:not([ellipsis=false])[full-width]:not([full-width=false])){flex:1 1 0px;max-width:100%}:host([full-width]:not([full-width=false])){display:inline-flex;justify-content:center;width:100%}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.label.ellipsis{display:block;min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.link-container{--comp-link-font-bold-stroke-width:0.5px;background:transparent;border:none;border-radius:var(--tct-link-border-radius, 0);font-size:var(--tct-link-font-size, inherit);font-weight:var(--tct-link-font-weight, inherit);max-width:100%;overflow:hidden}.link-container.standalone{--comp-icon-stroke:var(--tct-link-icon-stroke-width, 1.5);display:block;width:100%;max-width:100%;min-width:0}.link-container.standalone .link{color:var(--tct-link-color-standalone, var(--t-primary));min-height:var(--tct-link-min-height, 24px);display:flex;align-items:center;border-radius:var(--tct-link-border-radius, 0);--tct-icon-size:16px;text-decoration:none;width:100%;max-width:100%;min-width:0;overflow:hidden}.link-container.standalone .link q2-icon{margin-left:var(--tct-link-label-icon-gap, 6px);color:var(--tct-link-icon-color, inherit);flex-shrink:0}.link-container.standalone:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover{text-decoration:underline;-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));--tct-icon-stroke-width:calc(var(--comp-icon-stroke) + 0.5)}.link-container.standalone:active:hover .link{color:var(--tct-link-color-standalone-active, var(--t-primary-d2));box-shadow:none}.link-container.standalone.disabled .link{cursor:not-allowed;color:var(--tct-link-color-standalone-disabled-color, var(--t-primary));opacity:var(--tct-link-color-standalone-disabled-opacity, var(--tct-link-disabled-opacity, var(--app-disabled-opacity, 0.4)));text-decoration:none}.link-container.standalone.disabled:hover{text-decoration:none}.link-container.standalone:has(:focus-visible){box-shadow:var(--tct-link-focus-visible-box-shadow, --const-double-focus-ring)}.link-container.inline{margin:0 var(--tct-link-side-margin, 6px);text-decoration:underline;color:var(--tct-link-color-inline, var(--t-primary))}.link-container.inline.ellipsis{display:block;max-width:100%}.link-container.inline:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width))}.link-container.inline:active:hover{-webkit-text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));text-stroke-width:var(--tct-link-font-bold-stroke-width, var(--comp-link-font-bold-stroke-width));color:var(--tct-link-color-inline-active, var(--t-primary-d2));box-shadow:none}.link-container.inline.disabled{cursor:not-allowed;opacity:var(--tct-link-disabled-opacity, var(--app-disabled-opacity, 0.4))}.link-container.inline:focus-visible{box-shadow:var(--tct-link-focus-visible-box-shadow, --const-double-focus-ring)}";
 
-const s = class {
+const r = class {
   constructor(e) {
     t(this, e);
     this.tctClick = i(this, "tctClick", 7);
-    // #endregion
-    // #region Public Property API
     /** Determines whether the component and `tctClick` event are disabled. */    this.disabled = false;
     /** If `true`, the label will be truncated with an ellipsis when it's too long. */    this.ellipsis = false;
     /** The link when clicked. */    this.href = "javascript:void(0)";
@@ -34,6 +32,13 @@ const s = class {
     if (!!this.disabled) t.push("disabled");
     return t.join(" ");
   }
+  get composedAriaLabel() {
+    const t = this.label || this.hostElement.textContent.trim() || undefined;
+    if (!this._tooltip && !t) return undefined;
+    if (!this._tooltip) return this.variant === "standalone" ? t : undefined;
+    if (!t) return this._tooltip;
+    return `${t} - ${this._tooltip}`;
+  }
   handleClick(t) {
     t.stopPropagation();
     if (this.disabled) return;
@@ -51,8 +56,7 @@ const s = class {
   render() {
     const t = this.ellipsis ? "label ellipsis" : "label";
     return this.variant === "standalone" ? e("div", {
-      class: this.classes,
-      "aria-label": this.label
+      class: this.classes
     }, e("a", {
       class: "link",
       href: !!this.disabled ? undefined : this.href,
@@ -61,6 +65,7 @@ const s = class {
       rel: this.target === "_blank" ? "noopener" : undefined,
       referrerPolicy: this.referrerpolicy || undefined,
       title: this.tctTitle || undefined,
+      "aria-label": this.composedAriaLabel,
       "test-id": "linkAnchor"
     }, e("span", {
       class: t
@@ -73,6 +78,7 @@ const s = class {
       target: this.target || "_self",
       referrerPolicy: this.referrerpolicy || undefined,
       title: this.tctTitle || undefined,
+      "aria-label": this.composedAriaLabel,
       "test-id": "linkAnchor"
     }, this.label);
   }
@@ -81,11 +87,11 @@ const s = class {
   }
 };
 
-s.style = r;
+r.style = s;
 
-const l = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)),:host([bordered]:not([bordered=false])) .header{border-style:var(--tct-list-item-border-style, solid);border-width:var(--tct-list-item-border-width, 0 0 1px 0);border-color:var(--tct-list-item-border-color, var(--t-gray-12, #d9d9d9))}::slotted(q2-item){--comp-item-padding:var(--tct-list-item-padding, var(--app-scale-2x, 10px) var(--app-scale-4x, 20px));--tct-item-padding:var(--comp-item-padding)}.header{--comp-default-header-padding:0 var(--app-scale-4x, 20px);display:flex;gap:var(--app-scale-3x, 12px);padding:var(--tct-list-header-padding, var(--comp-default-header-padding));min-height:var(--tct-list-header-min-height, var(--t-list-header-min-height, 44px))}.header-spacebetween{justify-content:space-between}.header-start{justify-content:flex-start}.header-end{justify-content:flex-end}.header .label{width:100%;height:var(--tct-list-label-height, 44px);line-height:var(--tct-list-label-line-height, 44px);font-size:var(--tct-list-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-list-label-font-weight, 600);color:var(--tct-list-label-font-color, var(--t-text, #4d4d4d))}slot:not([name]){display:flex;flex-direction:column;gap:var(--tct-list-item-gap, 0)}";
+const a = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host([bordered]:not([bordered=false])) ::slotted(q2-item:not(:last-child)),:host([bordered]:not([bordered=false])) .header{border-style:var(--tct-list-item-border-style, solid);border-width:var(--tct-list-item-border-width, 0 0 1px 0);border-color:var(--tct-list-item-border-color, var(--t-gray-12, #d9d9d9))}::slotted(q2-item){--comp-item-padding:var(--tct-list-item-padding, var(--app-scale-2x, 10px) var(--app-scale-4x, 20px));--tct-item-padding:var(--comp-item-padding)}.header{--comp-default-header-padding:0 var(--app-scale-4x, 20px);display:flex;gap:var(--app-scale-3x, 12px);padding:var(--tct-list-header-padding, var(--comp-default-header-padding));min-height:var(--tct-list-header-min-height, var(--t-list-header-min-height, 44px))}.header-spacebetween{justify-content:space-between}.header-start{justify-content:flex-start}.header-end{justify-content:flex-end}.header .label{width:100%;height:var(--tct-list-label-height, 44px);line-height:var(--tct-list-label-line-height, 44px);font-size:var(--tct-list-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-list-label-font-weight, 600);color:var(--tct-list-label-font-color, var(--t-text, #4d4d4d))}slot:not([name]){display:flex;flex-direction:column;gap:var(--tct-list-item-gap, 0)}";
 
-const a = class {
+const l = class {
   constructor(i) {
     t(this, i);
     this.scheduledAfterRender = [];
@@ -149,23 +155,23 @@ const a = class {
   // #region Render Methods
   render() {
     return e("div", {
-      key: "e8e7fae7c0cff255a864a13a7ddf97081b056d51",
+      key: "627d68ebcba5f0d9dea1ab60481c380916c76ae5",
       class: this.listClasses,
       ref: t => this.listElement = t
     }, (this.hasFilterSlot || this.hasLabelContent) && e("div", {
-      key: "a0dcecee335fc3253d4d68a294b238f7c4b0fa48",
+      key: "f5567987b84f12874e4a8c42b846f5785b99e2bb",
       class: this.headerClasses
     }, e("div", {
-      key: "682c70b0fcfabe5a0d5bc083986d313cbada9367",
+      key: "0664369f4d92be4486f8d672f62c0d3478c13c2a",
       class: "label"
     }, this.label), this.hasFilterSlot && e("slot", {
-      key: "7ed718c00e7ba11e59fa2f2280fe0e5706093df0",
+      key: "faa8de8696790abc591632e5bc182228da532562",
       name: "filter"
     })), e("div", {
-      key: "ddbd92f6b7ee3979d0fedd097dcc4c7fdde901a3",
+      key: "60a4c2980ea5462df148e31251a59142e001b5f3",
       role: "list"
     }, e("slot", {
-      key: "9cb1b4a7d4e755b87016920ced5b8cdc17576edb"
+      key: "935730bc5de751dcd25111cdd4f9cb6b9d00f10b"
     })));
   }
   get hostElement() {
@@ -173,8 +179,8 @@ const a = class {
   }
 };
 
-a.style = l;
+l.style = a;
 
-export { s as q2_link, a as q2_list };
+export { r as q2_link, l as q2_list };
 //# sourceMappingURL=q2-link.q2-list.entry.esm.js.map
 //# sourceMappingURL=q2-link_2.entry.js.map

package/dist/q2-tecton-elements/q2-link_2.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2LinkCss","Q2Link","constructor","hostRef","this","disabled","ellipsis","href","variant","clickLink","anchor","hostElement","shadowRoot","querySelector","click","classes","list","push","join","handleClick","event","stopPropagation","customEvent","tctClick","emit","target","referrerpolicy","defaultPrevented","preventDefault","render","labelClasses","h","class","label","undefined","onClick","e","rel","referrerPolicy","title","tctTitle","iconType","type","q2ListCss","Q2List","scheduledAfterRender","renderTrigger","onMutationObserved","Array","from","children","forEach","child","tagName","role","disconnectedCallback","_a","mutationObserver","disconnect","componentDidLoad","MutationObserver","observer","observe","childList","subtree","componentDidRender","fn","hasFilterSlot","hasSlotContent","hasLabelContent","headerClasses","listClasses","key","ref","el","listElement","name"],"sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx","src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host {\n    &:active {\n        box-shadow: none;\n    }\n}\n\n:host([ellipsis]:not([ellipsis=\"false\"])) {\n    display: block;\n    flex: 0 1 auto;\n    max-width: var-list(--tct-link-ellipsis-max-width, 45%);\n    min-width: 0;\n    overflow: hidden;\n}\n\n:host([ellipsis]:not([ellipsis=\"false\"])[full-width]:not([full-width=\"false\"])) {\n    flex: 1 1 0px;\n    max-width: 100%;\n}\n\n:host([full-width]:not([full-width=\"false\"])) {\n    display: inline-flex;\n    justify-content: center;\n    width: 100%;\n}\n\n.ellipsis {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n}\n\n.label {\n    &.ellipsis {\n        display: block;\n        min-width: 0;\n        flex: 1;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n\n.link-container {\n    --comp-link-font-bold-stroke-width: 0.5px;\n    background: transparent;\n    border: none;\n    border-radius: var(--tct-link-border-radius, 0);\n    font-size: var-list(--tct-link-font-size, inherit);\n    font-weight: var-list(--tct-link-font-weight, inherit);\n    max-width: 100%;\n    overflow: hidden;\n\n    &.standalone {\n        --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n        display: block;\n        width: 100%;\n        max-width: 100%;\n        min-width: 0;\n        .link {\n            color: var-list(--tct-link-color-standalone, --t-primary);\n            min-height: var(--tct-link-min-height, 24px);\n            display: flex;\n            align-items: center;\n            border-radius: var(--tct-link-border-radius, 0);\n            --tct-icon-size: 16px;\n            text-decoration: none;\n            width: 100%;\n            max-width: 100%;\n            min-width: 0;\n            overflow: hidden;\n            q2-icon {\n                margin-left: var(--tct-link-label-icon-gap, 6px);\n                color: var(--tct-link-icon-color, inherit);\n                flex-shrink: 0;\n            }\n        }\n        &:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n        }\n        &:active:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n            .link {\n                color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n                box-shadow: none;\n            }\n        }\n        &.disabled {\n            .link {\n                cursor: not-allowed;\n                color: var-list(--tct-link-color-standalone-disabled-color, --t-primary);\n                opacity: var-list(\n                    --tct-link-color-standalone-disabled-opacity,\n                    --tct-link-disabled-opacity,\n                    --app-disabled-opacity,\n                    0.4\n                );\n                text-decoration: none;\n            }\n            &:hover {\n                text-decoration: none;\n            }\n        }\n    }\n\n    &.inline {\n        margin: 0 var(--tct-link-side-margin, 6px);\n        text-decoration: underline;\n        color: var-list(--tct-link-color-inline, --t-primary);\n        &.ellipsis {\n            display: block;\n            max-width: 100%;\n        }\n        &:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n        }\n        &:active:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n            box-shadow: none;\n        }\n        &.disabled {\n            cursor: not-allowed;\n            opacity: var-list(--tct-link-disabled-opacity, --app-disabled-opacity, 0.4);\n        }\n        &:focus-visible & {\n            box-shadow: var(--const-double-focus-ring);\n        }\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n/**\n * @name Link\n * @category Display\n * @summary Use for navigation to other pages or sections. Prefer over q2-btn for non-action navigation.\n */\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines whether the component and `tctClick` event are disabled. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** If `true`, the label will be truncated with an ellipsis when it's too long. */\n    @Prop({ reflect: true })\n    ellipsis: boolean = false;\n\n    /** If `true`, it takes up 100% width. */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    /** The link when clicked. */\n    @Prop({ reflect: true })\n    href: string = 'javascript:void(0)';\n\n    /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to \"standalone\". */\n    @Prop({ reflect: true })\n    iconType: string;\n\n    /** The displayed label to represent your link. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). */\n    @Prop({ reflect: true })\n    referrerpolicy: ReferrerPolicy;\n\n    /** Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). */\n    @Prop({ reflect: true })\n    target: string; // _self | _blank\n\n    /** Applies a `title` attribute to the anchor tag in the shadowRoot of the component. */\n    @Prop({ reflect: true })\n    tctTitle: string;\n\n    /** Determines the visual display style of the link. */\n    @Prop({ reflect: true })\n    variant: string = 'inline';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the link is clicked.\n     * @legacyEvent\n     */\n    @Event({ cancelable: true })\n    tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method for click.\n     *\n     * @testOnly\n     */\n    @Method()\n    async clickLink() {\n        const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n        (anchor as HTMLAnchorElement)?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get classes(): string {\n        const list = ['link-container'];\n        if (this.variant) list.push(this.variant);\n        if (!!this.disabled) list.push('disabled');\n        return list.join(' ');\n    }\n\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n        if (this.disabled) return;\n        const customEvent = this.tctClick.emit({\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            href: this.href,\n        });\n        if (customEvent.defaultPrevented) {\n            event.preventDefault();\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const labelClasses = this.ellipsis ? 'label ellipsis' : 'label';\n        return this.variant === 'standalone' ? (\n            <div\n                class={this.classes}\n                aria-label={this.label}\n            >\n                <a\n                    class=\"link\"\n                    href={!!this.disabled ? undefined : this.href}\n                    onClick={e => this.handleClick(e)}\n                    target={this.target || '_self'}\n                    rel={this.target === '_blank' ? 'noopener' : undefined}\n                    referrerPolicy={this.referrerpolicy || undefined}\n                    title={this.tctTitle || undefined}\n                    test-id=\"linkAnchor\"\n                >\n                    <span class={labelClasses}>{this.label}</span>\n                    {this.iconType && <q2-icon type={this.iconType}></q2-icon>}\n                </a>\n            </div>\n        ) : (\n            <a\n                class={`${this.classes}${this.ellipsis ? ' ellipsis' : ''}`}\n                onClick={e => this.handleClick(e)}\n                href={!!this.disabled ? undefined : this.href}\n                target={this.target || '_self'}\n                referrerPolicy={this.referrerpolicy || undefined}\n                title={this.tctTitle || undefined}\n                test-id=\"linkAnchor\"\n            >\n                {this.label}\n            </a>\n        );\n    }\n\n    // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host([bordered]:not([bordered='false'])) {\n    ::slotted(q2-item:not(:last-child)),\n    .header {\n        border-style: var-list(--tct-list-item-border-style, solid);\n        border-width: var-list(--tct-list-item-border-width, unquote('0 0 1px 0'));\n        border-color: var-list(--tct-list-item-border-color, --t-gray-12, #d9d9d9);\n    }\n}\n\n::slotted(q2-item) {\n    --comp-item-padding: #{var-list(\n            --tct-list-item-padding,\n            unquote('#{var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px)}')\n        )};\n    --tct-item-padding: var(--comp-item-padding);\n}\n\n.header {\n    --comp-default-header-padding: 0 var(--app-scale-4x, 20px);\n    display: flex;\n    gap: var(--app-scale-3x, 12px);\n    padding: var-list(--tct-list-header-padding, --comp-default-header-padding);\n    min-height: var-list(var-prefixer(list-header-min-height), 44px);\n    &-spacebetween {\n        justify-content: space-between;\n    }\n    &-start {\n        justify-content: flex-start;\n    }\n    &-end {\n        justify-content: flex-end;\n    }\n    .label {\n        width: 100%;\n        height: var(--tct-list-label-height, 44px);\n        line-height: var(--tct-list-label-line-height, 44px);\n        font-size: var-list(--tct-list-label-font-size, --app-font-size, 14px);\n        font-weight: var(--tct-list-label-font-weight, 600);\n        color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n    }\n}\n\nslot:not([name]) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tct-list-item-gap, 0)\n}\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n/**\n * @name List\n * @category Display\n * @summary Use for grouping Item components into a vertical list.\n * @slot filter - An optional slot to display custom content for filtering the list items.\n */\n@Component({\n    tag: 'q2-list',\n    styleUrl: 'q2-list.scss',\n    shadow: true,\n})\nexport class Q2List {\n    // #region Own Properties\n\n    listElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Adds a border between each items */\n    @Prop({ mutable: true, reflect: true })\n    bordered: boolean;\n\n    /** label text on header area */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentDidLoad() {\n        if (typeof MutationObserver === 'undefined') return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasFilterSlot() {\n        return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');\n    }\n\n    get hasLabelContent() {\n        return !!this.label;\n    }\n\n    get headerClasses() {\n        const classes = ['header'];\n        if (this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-spacebetween');\n        } else if (this.hasLabelContent && !this.hasFilterSlot) {\n            classes.push('header-start');\n        } else if (!this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-end');\n        }\n        return classes.join(' ');\n    }\n\n    get listClasses() {\n        const classes = ['list'];\n        return classes.join(' ');\n    }\n\n    onMutationObserved = () => {\n        this.renderTrigger += 1;\n        this.scheduledAfterRender.push(() => {\n            Array.from(this.hostElement.children).forEach(child => {\n                if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n            });\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class={this.listClasses}\n                ref={el => (this.listElement = el)}\n            >\n                {(this.hasFilterSlot || this.hasLabelContent) && (\n                    <div class={this.headerClasses}>\n                        <div class=\"label\">{this.label}</div>\n                        {this.hasFilterSlot && <slot name=\"filter\" />}\n                    </div>\n                )}\n                <div role=\"list\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["q2LinkCss","Q2Link","constructor","hostRef","this","disabled","ellipsis","href","variant","clickLink","anchor","hostElement","shadowRoot","querySelector","click","classes","list","push","join","composedAriaLabel","baseText","label","textContent","trim","undefined","_tooltip","handleClick","event","stopPropagation","customEvent","tctClick","emit","target","referrerpolicy","defaultPrevented","preventDefault","render","labelClasses","h","class","onClick","e","rel","referrerPolicy","title","tctTitle","iconType","type","q2ListCss","Q2List","scheduledAfterRender","renderTrigger","onMutationObserved","Array","from","children","forEach","child","tagName","role","disconnectedCallback","_a","mutationObserver","disconnect","componentDidLoad","MutationObserver","observer","observe","childList","subtree","componentDidRender","fn","hasFilterSlot","hasSlotContent","hasLabelContent","headerClasses","listClasses","key","ref","el","listElement","name"],"sources":["src/components/q2-link/q2-link.scss?tag=q2-link&encapsulation=shadow","src/components/q2-link/q2-link.tsx","src/components/q2-list/q2-list.scss?tag=q2-list&encapsulation=shadow","src/components/q2-list/q2-list.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host {\n    &:active {\n        box-shadow: none;\n    }\n}\n\n:host([ellipsis]:not([ellipsis=\"false\"])) {\n    display: block;\n    flex: 0 1 auto;\n    max-width: var-list(--tct-link-ellipsis-max-width, 45%);\n    min-width: 0;\n    overflow: hidden;\n}\n\n:host([ellipsis]:not([ellipsis=\"false\"])[full-width]:not([full-width=\"false\"])) {\n    flex: 1 1 0px;\n    max-width: 100%;\n}\n\n:host([full-width]:not([full-width=\"false\"])) {\n    display: inline-flex;\n    justify-content: center;\n    width: 100%;\n}\n\n.ellipsis {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n}\n\n.label {\n    &.ellipsis {\n        display: block;\n        min-width: 0;\n        flex: 1;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n\n.link-container {\n    --comp-link-font-bold-stroke-width: 0.5px;\n    background: transparent;\n    border: none;\n    border-radius: var(--tct-link-border-radius, 0);\n    font-size: var-list(--tct-link-font-size, inherit);\n    font-weight: var-list(--tct-link-font-weight, inherit);\n    max-width: 100%;\n    overflow: hidden;\n\n    &.standalone {\n        --comp-icon-stroke: var(--tct-link-icon-stroke-width, 1.5);\n        display: block;\n        width: 100%;\n        max-width: 100%;\n        min-width: 0;\n        .link {\n            color: var-list(--tct-link-color-standalone, --t-primary);\n            min-height: var(--tct-link-min-height, 24px);\n            display: flex;\n            align-items: center;\n            border-radius: var(--tct-link-border-radius, 0);\n            --tct-icon-size: 16px;\n            text-decoration: none;\n            width: 100%;\n            max-width: 100%;\n            min-width: 0;\n            overflow: hidden;\n            q2-icon {\n                margin-left: var(--tct-link-label-icon-gap, 6px);\n                color: var(--tct-link-icon-color, inherit);\n                flex-shrink: 0;\n            }\n        }\n        &:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n        }\n        &:active:hover {\n            text-decoration: underline;\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            --tct-icon-stroke-width: calc(var(--comp-icon-stroke) + 0.5);\n            .link {\n                color: var-list(--tct-link-color-standalone-active, --t-primary-d2);\n                box-shadow: none;\n            }\n        }\n        &.disabled {\n            .link {\n                cursor: not-allowed;\n                color: var-list(--tct-link-color-standalone-disabled-color, --t-primary);\n                opacity: var-list(\n                    --tct-link-color-standalone-disabled-opacity,\n                    --tct-link-disabled-opacity,\n                    --app-disabled-opacity,\n                    0.4\n                );\n                text-decoration: none;\n            }\n            &:hover {\n                text-decoration: none;\n            }\n        }\n        &:has(:focus-visible) {\n            box-shadow: var(--tct-link-focus-visible-box-shadow, --const-double-focus-ring);\n        }\n    }\n\n    &.inline {\n        margin: 0 var(--tct-link-side-margin, 6px);\n        text-decoration: underline;\n        color: var-list(--tct-link-color-inline, --t-primary);\n        &.ellipsis {\n            display: block;\n            max-width: 100%;\n        }\n        &:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n        }\n        &:active:hover {\n            -webkit-text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            text-stroke-width: var-list(--tct-link-font-bold-stroke-width, --comp-link-font-bold-stroke-width);\n            color: var-list(--tct-link-color-inline-active, --t-primary-d2);\n            box-shadow: none;\n        }\n        &.disabled {\n            cursor: not-allowed;\n            opacity: var-list(--tct-link-disabled-opacity, --app-disabled-opacity, 0.4);\n        }\n        &:focus-visible {\n            box-shadow: var(--tct-link-focus-visible-box-shadow, --const-double-focus-ring);\n        }\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Event, EventEmitter, Method } from '@stencil/core';\n/**\n * @name Link\n * @category Display\n * @summary Use for navigation to other pages or sections. Prefer over q2-btn for non-action navigation.\n */\n@Component({ tag: 'q2-link', shadow: true, styleUrl: 'q2-link.scss' })\nexport class Q2Link implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * @private\n     * Tooltip text set by a parent q2-tooltip component for accessibility.\n     */\n    @Prop()\n    _tooltip: string;\n\n    /** Determines whether the component and `tctClick` event are disabled. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** If `true`, the label will be truncated with an ellipsis when it's too long. */\n    @Prop({ reflect: true })\n    ellipsis: boolean = false;\n\n    /** If `true`, it takes up 100% width. */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    /** The link when clicked. */\n    @Prop({ reflect: true })\n    href: string = 'javascript:void(0)';\n\n    /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to \"standalone\". */\n    @Prop({ reflect: true })\n    iconType: string;\n\n    /** The displayed label to represent your link. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** How much of the referrer to send when following the link. [See MDN for more information on referrerpolicy](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). */\n    @Prop({ reflect: true })\n    referrerpolicy: ReferrerPolicy;\n\n    /** Where to display the linked URL. [See MDN for more information on target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). */\n    @Prop({ reflect: true })\n    target: string; // _self | _blank\n\n    /** Applies a `title` attribute to the anchor tag in the shadowRoot of the component. */\n    @Prop({ reflect: true })\n    tctTitle: string;\n\n    /** Determines the visual display style of the link. */\n    @Prop({ reflect: true })\n    variant: string = 'inline';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the link is clicked.\n     * @legacyEvent\n     */\n    @Event({ cancelable: true })\n    tctClick: EventEmitter<{ target: string; referrerpolicy: string; href: string }>;\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method for click.\n     *\n     * @testOnly\n     */\n    @Method()\n    async clickLink() {\n        const anchor = this.hostElement.shadowRoot.querySelector(`[test-id=\"linkAnchor\"]`);\n        (anchor as HTMLAnchorElement)?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get classes(): string {\n        const list = ['link-container'];\n        if (this.variant) list.push(this.variant);\n        if (!!this.disabled) list.push('disabled');\n        return list.join(' ');\n    }\n\n    get composedAriaLabel(): string | undefined {\n        const baseText = this.label || this.hostElement.textContent.trim() || undefined;\n        if (!this._tooltip && !baseText) return undefined;\n        if (!this._tooltip) return this.variant === 'standalone' ? baseText : undefined;\n        if (!baseText) return this._tooltip;\n        return `${baseText} - ${this._tooltip}`;\n    }\n\n    handleClick(event: MouseEvent) {\n        event.stopPropagation();\n        if (this.disabled) return;\n        const customEvent = this.tctClick.emit({\n            target: this.target,\n            referrerpolicy: this.referrerpolicy,\n            href: this.href,\n        });\n        if (customEvent.defaultPrevented) {\n            event.preventDefault();\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const labelClasses = this.ellipsis ? 'label ellipsis' : 'label';\n        return this.variant === 'standalone' ? (\n            <div class={this.classes}>\n                <a\n                    class=\"link\"\n                    href={!!this.disabled ? undefined : this.href}\n                    onClick={e => this.handleClick(e)}\n                    target={this.target || '_self'}\n                    rel={this.target === '_blank' ? 'noopener' : undefined}\n                    referrerPolicy={this.referrerpolicy || undefined}\n                    title={this.tctTitle || undefined}\n                    aria-label={this.composedAriaLabel}\n                    test-id=\"linkAnchor\"\n                >\n                    <span class={labelClasses}>{this.label}</span>\n                    {this.iconType && <q2-icon type={this.iconType}></q2-icon>}\n                </a>\n            </div>\n        ) : (\n            <a\n                class={`${this.classes}${this.ellipsis ? ' ellipsis' : ''}`}\n                onClick={e => this.handleClick(e)}\n                href={!!this.disabled ? undefined : this.href}\n                target={this.target || '_self'}\n                referrerPolicy={this.referrerpolicy || undefined}\n                title={this.tctTitle || undefined}\n                aria-label={this.composedAriaLabel}\n                test-id=\"linkAnchor\"\n            >\n                {this.label}\n            </a>\n        );\n    }\n\n    // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import '../q2-btn/q2-btn-mixins';\n\n:host([bordered]:not([bordered='false'])) {\n    ::slotted(q2-item:not(:last-child)),\n    .header {\n        border-style: var-list(--tct-list-item-border-style, solid);\n        border-width: var-list(--tct-list-item-border-width, unquote('0 0 1px 0'));\n        border-color: var-list(--tct-list-item-border-color, --t-gray-12, #d9d9d9);\n    }\n}\n\n::slotted(q2-item) {\n    --comp-item-padding: #{var-list(\n            --tct-list-item-padding,\n            unquote('#{var-list(--app-scale-2x, 10px) var-list(--app-scale-4x, 20px)}')\n        )};\n    --tct-item-padding: var(--comp-item-padding);\n}\n\n.header {\n    --comp-default-header-padding: 0 var(--app-scale-4x, 20px);\n    display: flex;\n    gap: var(--app-scale-3x, 12px);\n    padding: var-list(--tct-list-header-padding, --comp-default-header-padding);\n    min-height: var-list(var-prefixer(list-header-min-height), 44px);\n    &-spacebetween {\n        justify-content: space-between;\n    }\n    &-start {\n        justify-content: flex-start;\n    }\n    &-end {\n        justify-content: flex-end;\n    }\n    .label {\n        width: 100%;\n        height: var(--tct-list-label-height, 44px);\n        line-height: var(--tct-list-label-line-height, 44px);\n        font-size: var-list(--tct-list-label-font-size, --app-font-size, 14px);\n        font-weight: var(--tct-list-label-font-weight, 600);\n        color: var-list(--tct-list-label-font-color, --t-text, #4d4d4d);\n    }\n}\n\nslot:not([name]) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tct-list-item-gap, 0)\n}\n","import { Component, Element, h, State, Prop } from '@stencil/core';\nimport { hasSlotContent } from 'src/utils';\n\n/**\n * @name List\n * @category Display\n * @summary Use for grouping Item components into a vertical list.\n * @slot filter - An optional slot to display custom content for filtering the list items.\n */\n@Component({\n    tag: 'q2-list',\n    styleUrl: 'q2-list.scss',\n    shadow: true,\n})\nexport class Q2List {\n    // #region Own Properties\n\n    listElement: HTMLDivElement;\n    mutationObserver: MutationObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    renderTrigger: number = 0;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Adds a border between each items */\n    @Prop({ mutable: true, reflect: true })\n    bordered: boolean;\n\n    /** label text on header area */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentDidLoad() {\n        if (typeof MutationObserver === 'undefined') return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasFilterSlot() {\n        return !!this.hostElement.querySelector('q2-pill') || hasSlotContent(this.hostElement, 'pill');\n    }\n\n    get hasLabelContent() {\n        return !!this.label;\n    }\n\n    get headerClasses() {\n        const classes = ['header'];\n        if (this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-spacebetween');\n        } else if (this.hasLabelContent && !this.hasFilterSlot) {\n            classes.push('header-start');\n        } else if (!this.hasLabelContent && this.hasFilterSlot) {\n            classes.push('header-end');\n        }\n        return classes.join(' ');\n    }\n\n    get listClasses() {\n        const classes = ['list'];\n        return classes.join(' ');\n    }\n\n    onMutationObserved = () => {\n        this.renderTrigger += 1;\n        this.scheduledAfterRender.push(() => {\n            Array.from(this.hostElement.children).forEach(child => {\n                if (child.tagName === 'Q2-ITEM') child.role = 'listitem';\n            });\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class={this.listClasses}\n                ref={el => (this.listElement = el)}\n            >\n                {(this.hasFilterSlot || this.hasLabelContent) && (\n                    <div class={this.headerClasses}>\n                        <div class=\"label\">{this.label}</div>\n                        {this.hasFilterSlot && <slot name=\"filter\" />}\n                    </div>\n                )}\n                <div role=\"list\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/q2-tecton-elements/q2-loc.entry.js

@@ -1,6 +1,6 @@
 import { r as t, g as s } from "./index-CGkHOjh1.js";
 
-import { l as i } from "./index-B4WYBDS9.js";
+import { l as i } from "./index-C4PILj1_.js";
 
 const e = class {
   constructor(s) {

package/dist/q2-tecton-elements/q2-message.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-message.entry.esm.js","sources":["src/components/q2-message/q2-message.scss?tag=q2-message&encapsulation=shadow","src/components/q2-message/q2-message.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.message {\n    border-left-width: #{var-list(var-prefixer(message-bar-width), 4px)};\n    border-left-style: solid;\n    --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n    display: grid;\n    gap: var(--tct-message-gap, 8px);\n    align-items: flex-start;\n    background: var-list(\n        --tct-message-background,\n        var-prefixer(message-bg),\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: #{var-list(var-prefixer(message-font-color), inherit)};\n    box-shadow: #{var-list(var-prefixer(message-box-shadow), --app-shadow-1, inherit)};\n    border-radius: #{var-list(var-prefixer(message-border-radius), --app-border-radius-1, inherit)};\n\n    &:focus {\n        box-shadow: var(--const-global-focus);\n    }\n}\n\n.message-icon {\n    --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n    --tct-icon-size: var(--comp-icon-size);\n    top: var(--comp-top-offset);\n    margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n    flex: 1;\n    line-height: var(--comp-line-height);\n    font-size: var(--tct-message-font-size, inherit);\n}\n\n::slotted(ul) {\n    --comp-list-default-padding: 0 0 0 #{var-list(--app-scale-3x, 15px)};\n    padding: var-list(--tct-message-list-padding, --comp-list-default-padding);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n    --comp-default-margin: #{var-list(--app-scale-3x, 5px)} 0;\n    margin: var-list(--tct-message-margin, --comp-default-margin);\n\n    .message {\n        --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n        --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n        grid-template-columns: var(--comp-icon-size) 1fr;\n        padding: var(--comp-padding);\n        padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n    }\n\n    ::slotted(ul) {\n        --comp-list-default-margin: #{var-list(--app-scale-3x, 15px) 0};\n        margin: var-list(--tct-message-list-margin, --comp-list-default-margin);\n    }\n}\n\n:host([appearance='minimal']) {\n    margin: 0;\n\n    .message {\n        padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n        grid-template-columns: 1fr;\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n    }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n    --comp-info-color: #0079c1;\n    .message {\n        border-left-color: var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color);\n    }\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n    }\n}\n\n:host([type='success']) {\n    --comp-success-color: #0e8a00;\n    .message {\n        border-left-color: var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color);\n    }\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n    }\n}\n\n:host([type='warning']) {\n    --comp-warning-color: #c35500;\n    .message {\n        border-left-color: var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color);\n    }\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n    }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n    --comp-error-color: #d20a0a;\n    .message {\n        border-left-color: var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color);\n    }\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n    }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n/**\n * @name Message\n * @category Feedback\n * @summary Use for contextual non-blocking notifications like success, error, or info alerts.\n */\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    presentToggle: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The visual style of the message. The minimal style is for use cases where you have less space to display information. */\n    @Prop({ reflect: true })\n    appearance: 'minimal' | 'standard' = 'standard';\n\n    /** Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. */\n    @Prop({ reflect: true })\n    description: boolean = false;\n\n    /** The type of message to display on the screen. */\n    @Prop({ reflect: true })\n    type: 'info' | 'error' | 'danger' | 'warning' | 'success' = 'info';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Prompts assistive technology to announce the message.\n     */\n    @Method()\n    async present() {\n        const { isFirefox } = this;\n        this.presentToggle = !this.presentToggle;\n        if (!isFirefox) return;\n        nextPaint(() => {\n            this.presentToggle = false;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get isFirefox() {\n        return checkIfFirefox();\n    }\n\n    messageIcon(type: string) {\n        const iconMap = {\n            success: 'success-filled',\n            warning: 'warning-filled',\n            danger: 'error-filled',\n            error: 'error-filled',\n            info: 'info-filled',\n        };\n\n        const iconType: string = iconMap[type] || iconMap.info;\n\n        return (\n            <q2-icon\n                type={iconType}\n                class=\"message-icon\"\n            />\n        );\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { isFirefox } = this;\n        const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n        const addDivForAriaLive = !isFirefox && this.presentToggle;\n        const { description } = this;\n        const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n        return (\n            <div\n                tabindex=\"-1\"\n                class=\"message\"\n                role={description ? undefined : 'alert'}\n                aria-live={description ? undefined : 'assertive'}\n                aria-atomic={description ? undefined : 'true'}\n                aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n                test-id=\"messageContainer\"\n            >\n                {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n                {addDivForAriaLive && <div class=\"sr\"></div>}\n                <div class=\"sr message-label\">{messageLabel}</div>\n                <div\n                    class=\"message-content\"\n                    aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":["checkIfFirefox"],"mappings":"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"}
+{"version":3,"file":"q2-message.entry.esm.js","sources":["src/components/q2-message/q2-message.scss?tag=q2-message&encapsulation=shadow","src/components/q2-message/q2-message.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.message {\n    --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n    border-width: var(--tct-message-border-width, 0);\n    border-style: var(--tct-message-border-style, solid);\n    border-color: var(--tct-message-border-color, transparent);\n    position: relative;\n    display: grid;\n    gap: var(--tct-message-gap, 8px);\n    align-items: flex-start;\n    background: var-list(\n        --tct-message-background,\n        var-prefixer(message-bg),\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: #{var-list(var-prefixer(message-font-color), inherit)};\n    box-shadow: #{var-list(var-prefixer(message-box-shadow), --app-shadow-1, inherit)};\n    border-radius: #{var-list(var-prefixer(message-border-radius), --app-border-radius-1, inherit)};\n\n    &:focus {\n        box-shadow: var(--const-global-focus);\n    }\n}\n\n.bar {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    height: 100%;\n    background: var(--comp-bar-color);\n    width: var-list(var-prefixer(message-bar-width), 4px);\n    border-radius: var(--tct-message-bar-border-radius, var(--app-border-radius-1) 0 0 var(--app-border-radius-1));\n}\n\n.message-icon {\n    --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n    --tct-icon-size: var(--comp-icon-size);\n    top: var(--comp-top-offset);\n    margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n    flex: 1;\n    line-height: var(--comp-line-height);\n    font-size: var(--tct-message-font-size, inherit);\n}\n\n::slotted(ul) {\n    --comp-list-default-padding: 0 0 0 #{var-list(--app-scale-3x, 15px)};\n    padding: var-list(--tct-message-list-padding, --comp-list-default-padding);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n    --comp-default-margin: #{var-list(--app-scale-3x, 5px)} 0;\n    margin: var-list(--tct-message-margin, --comp-default-margin);\n\n    .message {\n        --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n        --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n        grid-template-columns: var(--comp-icon-size) 1fr;\n        padding: var(--comp-padding);\n        padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n    }\n\n    ::slotted(ul) {\n        --comp-list-default-margin: #{var-list(--app-scale-3x, 15px) 0};\n        margin: var-list(--tct-message-list-margin, --comp-list-default-margin);\n    }\n}\n\n:host([appearance='minimal']) {\n    margin: 0;\n\n    .message {\n        padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n        grid-template-columns: 1fr;\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n    }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n    --comp-info-color: #0079c1;\n    --comp-bar-color: #{var-list(--tct-message-info-bar-color, --const-stoplight-info, --comp-info-color)};\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n    }\n}\n\n:host([type='success']) {\n    --comp-success-color: #0e8a00;\n    --comp-bar-color: #{var-list(--tct-message-success-bar-color, --const-stoplight-success, --comp-success-color)};\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n    }\n}\n\n:host([type='warning']) {\n    --comp-warning-color: #c35500;\n    --comp-bar-color: #{var-list(--tct-message-warning-bar-color, --const-stoplight-warning, --comp-warning-color)};\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n    }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n    --comp-error-color: #d20a0a;\n    --comp-bar-color: #{var-list(--tct-message-error-bar-color, --const-stoplight-alert, --comp-error-color)};\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n    }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n/**\n * @name Message\n * @category Feedback\n * @summary Use for contextual non-blocking notifications like success, error, or info alerts.\n */\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    presentToggle: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The visual style of the message. The minimal style is for use cases where you have less space to display information. */\n    @Prop({ reflect: true })\n    appearance: 'minimal' | 'standard' = 'standard';\n\n    /** Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. */\n    @Prop({ reflect: true })\n    description: boolean = false;\n\n    /** The type of message to display on the screen. */\n    @Prop({ reflect: true })\n    type: 'info' | 'error' | 'danger' | 'warning' | 'success' = 'info';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Prompts assistive technology to announce the message.\n     */\n    @Method()\n    async present() {\n        const { isFirefox } = this;\n        this.presentToggle = !this.presentToggle;\n        if (!isFirefox) return;\n        nextPaint(() => {\n            this.presentToggle = false;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get isFirefox() {\n        return checkIfFirefox();\n    }\n\n    messageIcon(type: string) {\n        const iconMap = {\n            success: 'success-filled',\n            warning: 'warning-filled',\n            danger: 'error-filled',\n            error: 'error-filled',\n            info: 'info-filled',\n        };\n\n        const iconType: string = iconMap[type] || iconMap.info;\n\n        return (\n            <q2-icon\n                type={iconType}\n                class=\"message-icon\"\n            />\n        );\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { isFirefox } = this;\n        const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n        const addDivForAriaLive = !isFirefox && this.presentToggle;\n        const { description } = this;\n        const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n        return (\n            <div\n                tabindex=\"-1\"\n                class=\"message\"\n                role={description ? undefined : 'alert'}\n                aria-live={description ? undefined : 'assertive'}\n                aria-atomic={description ? undefined : 'true'}\n                aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n                test-id=\"messageContainer\"\n            >\n                <div\n                    class=\"bar\"\n                    test-id=\"bar\"\n                ></div>\n                {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n                {addDivForAriaLive && <div class=\"sr\"></div>}\n                <div class=\"sr message-label\">{messageLabel}</div>\n                <div\n                    class=\"message-content\"\n                    aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":["checkIfFirefox"],"mappings":"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"}

package/dist/q2-tecton-elements/q2-message.entry.js

@@ -1,12 +1,12 @@
-import { r as t, h as e, g as s } from "./index-CGkHOjh1.js";
+import { r as a, h as e, g as t } from "./index-CGkHOjh1.js";
 
-import { o as a, i as o, n as r, m as i, l as c } from "./index-B4WYBDS9.js";
+import { o as s, i as o, n as r, m as i, l as c } from "./index-C4PILj1_.js";
 
-const n = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, 4px));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-message-gap, 8px);align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, var(--app-shadow-1, inherit)));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, var(--app-border-radius-1, inherit)))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height);font-size:var(--tct-message-font-size, inherit)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])),:host([type=info]){--comp-info-color:#0079c1}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)))}:host([type=success]){--comp-success-color:#0e8a00}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)))}:host([type=warning]){--comp-warning-color:#c35500}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)))}:host([type=error]),:host([type=danger]){--comp-error-color:#d20a0a}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)))}";
+const n = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host([hidden]){display:none}.message{--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));border-width:var(--tct-message-border-width, 0);border-style:var(--tct-message-border-style, solid);border-color:var(--tct-message-border-color, transparent);position:relative;display:grid;gap:var(--tct-message-gap, 8px);align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, var(--app-shadow-1, inherit)));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, var(--app-border-radius-1, inherit)))}.message:focus{box-shadow:var(--const-global-focus)}.bar{position:absolute;left:0;top:0;bottom:0;height:100%;background:var(--comp-bar-color);width:var(--tct-message-bar-width, var(--t-message-bar-width, 4px));border-radius:var(--tct-message-bar-border-radius, var(--app-border-radius-1) 0 0 var(--app-border-radius-1))}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height);font-size:var(--tct-message-font-size, inherit)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])),:host([type=info]){--comp-info-color:#0079c1;--comp-bar-color:var(--tct-message-info-bar-color, var(--const-stoplight-info, var(--comp-info-color)))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, var(--comp-info-color)))}:host([type=success]){--comp-success-color:#0e8a00;--comp-bar-color:var(--tct-message-success-bar-color, var(--const-stoplight-success, var(--comp-success-color)))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, var(--comp-success-color)))}:host([type=warning]){--comp-warning-color:#c35500;--comp-bar-color:var(--tct-message-warning-bar-color, var(--const-stoplight-warning, var(--comp-warning-color)))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, var(--comp-warning-color)))}:host([type=error]),:host([type=danger]){--comp-error-color:#d20a0a;--comp-bar-color:var(--tct-message-error-bar-color, var(--const-stoplight-alert, var(--comp-error-color)))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, var(--comp-error-color)))}";
 
 const p = class {
   constructor(e) {
-    t(this, e);
+    a(this, e);
     // #endregion
     // #region Public Property API
     /** The visual style of the message. The minimal style is for use cases where you have less space to display information. */    this.appearance = "standard";
@@ -16,12 +16,12 @@ const p = class {
   // #endregion
   // #region Component Lifecycle Events
   componentDidLoad() {
-    a(this.hostElement);
+    s(this.hostElement);
   }
   // #endregion
   // #region Listeners
-  delegateFocus(t) {
-    if (!o(t, this.hostElement)) return;
+  delegateFocus(a) {
+    if (!o(a, this.hostElement)) return;
     this.hostElement.shadowRoot.querySelector(".message").focus();
   }
   // #endregion
@@ -30,9 +30,9 @@ const p = class {
      * Prompts assistive technology to announce the message.
      */
   async present() {
-    const {isFirefox: t} = this;
+    const {isFirefox: a} = this;
     this.presentToggle = !this.presentToggle;
-    if (!t) return;
+    if (!a) return;
     r((() => {
       this.presentToggle = false;
     }));
@@ -42,53 +42,57 @@ const p = class {
   get isFirefox() {
     return i();
   }
-  messageIcon(t) {
-    const s = {
+  messageIcon(a) {
+    const t = {
       success: "success-filled",
       warning: "warning-filled",
       danger: "error-filled",
       error: "error-filled",
       info: "info-filled"
     };
-    const a = s[t] || s.info;
+    const s = t[a] || t.info;
     return e("q2-icon", {
-      type: a,
+      type: s,
       class: "message-icon"
     });
   }
   // #endregion
   // #region Render Methods
   render() {
-    const {isFirefox: t} = this;
-    const s = t && this.presentToggle;
-    const a = !t && this.presentToggle;
+    const {isFirefox: a} = this;
+    const t = a && this.presentToggle;
+    const s = !a && this.presentToggle;
     const {description: o} = this;
     const r = c(`tecton.element.message.type.${this.type ? this.type : "info"}`);
     return e("div", {
-      key: "339a45e7161f1aff66134e4e391c02f6afaac71d",
+      key: "aff2483085e25648ba989847f10c91250df281a9",
       tabindex: "-1",
       class: "message",
       role: o ? undefined : "alert",
       "aria-live": o ? undefined : "assertive",
       "aria-atomic": o ? undefined : "true",
-      "aria-relevant": o && s ? undefined : "all",
+      "aria-relevant": o && t ? undefined : "all",
       "test-id": "messageContainer"
-    }, this.appearance === "standard" ? this.messageIcon(this.type) : "", a && e("div", {
-      key: "403e03cc8b6b34736e9e30a1eee91ba88f2e50f8",
+    }, e("div", {
+      key: "6f416c44047bfce1f0f788edf7545a1d0da4b55c",
+      class: "bar",
+      "test-id": "bar"
+    }), this.appearance === "standard" ? this.messageIcon(this.type) : "", s && e("div", {
+      key: "f144ac7da5821a8c7f5df44d2ed7b16ee35d025c",
       class: "sr"
     }), e("div", {
-      key: "96b9469f4a0f7428c87231323bfe99583266e282",
+      key: "ebff5b28951e94eaf1cb83d67b4376c3636f3143",
       class: "sr message-label"
     }, r), e("div", {
-      key: "2ec851508b85d7806060ba5cbccae4069a931c79",
+      key: "40f3902af3e4b79ee61c3f2dc0f63cd209694c83",
       class: "message-content",
-      "aria-hidden": s ? "true" : undefined
+      "aria-hidden": t ? "true" : undefined
     }, e("slot", {
-      key: "b4270cdb03394834a4cac6487e6a8310aeaba915"
+      key: "6843ae94d50f20f2599a92d5e31122498cee53a5"
     })));
   }
   get hostElement() {
-    return s(this);
+    return t(this);
   }
 };
 

package/dist/q2-tecton-elements/q2-message.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2MessageCss","Q2Message","constructor","hostRef","this","appearance","description","type","componentDidLoad","overrideFocus","hostElement","delegateFocus","event","isEventFromElement","shadowRoot","querySelector","focus","present","isFirefox","presentToggle","nextPaint","checkIfFirefox","messageIcon","iconMap","success","warning","danger","error","info","iconType","h","class","render","addAriaHiddenForAriaLive","addDivForAriaLive","messageLabel","loc","key","tabindex","role","undefined"],"sources":["src/components/q2-message/q2-message.scss?tag=q2-message&encapsulation=shadow","src/components/q2-message/q2-message.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.message {\n    border-left-width: #{var-list(var-prefixer(message-bar-width), 4px)};\n    border-left-style: solid;\n    --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n    display: grid;\n    gap: var(--tct-message-gap, 8px);\n    align-items: flex-start;\n    background: var-list(\n        --tct-message-background,\n        var-prefixer(message-bg),\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: #{var-list(var-prefixer(message-font-color), inherit)};\n    box-shadow: #{var-list(var-prefixer(message-box-shadow), --app-shadow-1, inherit)};\n    border-radius: #{var-list(var-prefixer(message-border-radius), --app-border-radius-1, inherit)};\n\n    &:focus {\n        box-shadow: var(--const-global-focus);\n    }\n}\n\n.message-icon {\n    --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n    --tct-icon-size: var(--comp-icon-size);\n    top: var(--comp-top-offset);\n    margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n    flex: 1;\n    line-height: var(--comp-line-height);\n    font-size: var(--tct-message-font-size, inherit);\n}\n\n::slotted(ul) {\n    --comp-list-default-padding: 0 0 0 #{var-list(--app-scale-3x, 15px)};\n    padding: var-list(--tct-message-list-padding, --comp-list-default-padding);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n    --comp-default-margin: #{var-list(--app-scale-3x, 5px)} 0;\n    margin: var-list(--tct-message-margin, --comp-default-margin);\n\n    .message {\n        --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n        --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n        grid-template-columns: var(--comp-icon-size) 1fr;\n        padding: var(--comp-padding);\n        padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n    }\n\n    ::slotted(ul) {\n        --comp-list-default-margin: #{var-list(--app-scale-3x, 15px) 0};\n        margin: var-list(--tct-message-list-margin, --comp-list-default-margin);\n    }\n}\n\n:host([appearance='minimal']) {\n    margin: 0;\n\n    .message {\n        padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n        grid-template-columns: 1fr;\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n    }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n    --comp-info-color: #0079c1;\n    .message {\n        border-left-color: var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color);\n    }\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n    }\n}\n\n:host([type='success']) {\n    --comp-success-color: #0e8a00;\n    .message {\n        border-left-color: var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color);\n    }\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n    }\n}\n\n:host([type='warning']) {\n    --comp-warning-color: #c35500;\n    .message {\n        border-left-color: var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color);\n    }\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n    }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n    --comp-error-color: #d20a0a;\n    .message {\n        border-left-color: var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color);\n    }\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n    }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n/**\n * @name Message\n * @category Feedback\n * @summary Use for contextual non-blocking notifications like success, error, or info alerts.\n */\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    presentToggle: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The visual style of the message. The minimal style is for use cases where you have less space to display information. */\n    @Prop({ reflect: true })\n    appearance: 'minimal' | 'standard' = 'standard';\n\n    /** Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. */\n    @Prop({ reflect: true })\n    description: boolean = false;\n\n    /** The type of message to display on the screen. */\n    @Prop({ reflect: true })\n    type: 'info' | 'error' | 'danger' | 'warning' | 'success' = 'info';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Prompts assistive technology to announce the message.\n     */\n    @Method()\n    async present() {\n        const { isFirefox } = this;\n        this.presentToggle = !this.presentToggle;\n        if (!isFirefox) return;\n        nextPaint(() => {\n            this.presentToggle = false;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get isFirefox() {\n        return checkIfFirefox();\n    }\n\n    messageIcon(type: string) {\n        const iconMap = {\n            success: 'success-filled',\n            warning: 'warning-filled',\n            danger: 'error-filled',\n            error: 'error-filled',\n            info: 'info-filled',\n        };\n\n        const iconType: string = iconMap[type] || iconMap.info;\n\n        return (\n            <q2-icon\n                type={iconType}\n                class=\"message-icon\"\n            />\n        );\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { isFirefox } = this;\n        const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n        const addDivForAriaLive = !isFirefox && this.presentToggle;\n        const { description } = this;\n        const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n        return (\n            <div\n                tabindex=\"-1\"\n                class=\"message\"\n                role={description ? undefined : 'alert'}\n                aria-live={description ? undefined : 'assertive'}\n                aria-atomic={description ? undefined : 'true'}\n                aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n                test-id=\"messageContainer\"\n            >\n                {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n                {addDivForAriaLive && <div class=\"sr\"></div>}\n                <div class=\"sr message-label\">{messageLabel}</div>\n                <div\n                    class=\"message-content\"\n                    aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAe;;MCSRC,IAAS;EADtB,WAAAC,CAAAC;;;;oIAkBIC,KAAUC,aAA2B;0IAIrCD,KAAWE,cAAY;4DAIvBF,KAAIG,OAAwD;AA8F/D;;;EAzFG,gBAAAC;IACIC,EAAcL,KAAKM;;;;EAOvB,aAAAC,CAAcC;IACV,KAAKC,EAAmBD,GAAOR,KAAKM,cAAc;IAClDN,KAAKM,YAAYI,WAAWC,cAA2B,YAAYC;;;;;;;EAUvE,aAAMC;IACF,OAAMC,WAAEA,KAAcd;IACtBA,KAAKe,iBAAiBf,KAAKe;IAC3B,KAAKD,GAAW;IAChBE,GAAU;MACNhB,KAAKe,gBAAgB;AAAK;;;;EAOlC,aAAID;IACA,OAAOG;;EAGX,WAAAC,CAAYf;IACR,MAAMgB,IAAU;MACZC,SAAS;MACTC,SAAS;MACTC,QAAQ;MACRC,OAAO;MACPC,MAAM;;IAGV,MAAMC,IAAmBN,EAAQhB,MAASgB,EAAQK;IAElD,OACIE,EACI;MAAAvB,MAAMsB;MACNE,OAAM;;;;;EAQlB,MAAAC;IACI,OAAMd,WAAEA,KAAcd;IACtB,MAAM6B,IAA2Bf,KAAad,KAAKe;IACnD,MAAMe,KAAqBhB,KAAad,KAAKe;IAC7C,OAAMb,aAAEA,KAAgBF;IACxB,MAAM+B,IAAuBC,EAAI,+BAA+BhC,KAAKG,OAAOH,KAAKG,OAAO;IAExF,OACIuB,EACI;MAAAO,KAAA;MAAAC,UAAS;MACTP,OAAM;MACNQ,MAAMjC,IAAckC,YAAY;MACrB,aAAAlC,IAAckC,YAAY;MAAW,eACnClC,IAAckC,YAAY;MAAM,iBAC9BlC,KAAe2B,IAA2BO,YAAY;MAAK,WAClE;OAEPpC,KAAKC,eAAe,aAAaD,KAAKkB,YAAYlB,KAAKG,QAAQ,IAC/D2B,KAAqBJ,EAAA;MAAAO,KAAA;MAAKN,OAAM;QACjCD,EAAA;MAAAO,KAAA;MAAKN,OAAM;OAAoBI,IAC/BL,EAAA;MAAAO,KAAA;MACIN,OAAM;MAAiB,eACVE,IAA2B,SAASO;OAEjDV,EAAQ;MAAAO,KAAA","ignoreList":[]}
+{"version":3,"names":["q2MessageCss","Q2Message","constructor","hostRef","this","appearance","description","type","componentDidLoad","overrideFocus","hostElement","delegateFocus","event","isEventFromElement","shadowRoot","querySelector","focus","present","isFirefox","presentToggle","nextPaint","checkIfFirefox","messageIcon","iconMap","success","warning","danger","error","info","iconType","h","class","render","addAriaHiddenForAriaLive","addDivForAriaLive","messageLabel","loc","key","tabindex","role","undefined"],"sources":["src/components/q2-message/q2-message.scss?tag=q2-message&encapsulation=shadow","src/components/q2-message/q2-message.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.message {\n    --comp-line-height: #{var-list(var-prefixer(message-line-height), --app-line-height, 1.428571429em)};\n    border-width: var(--tct-message-border-width, 0);\n    border-style: var(--tct-message-border-style, solid);\n    border-color: var(--tct-message-border-color, transparent);\n    position: relative;\n    display: grid;\n    gap: var(--tct-message-gap, 8px);\n    align-items: flex-start;\n    background: var-list(\n        --tct-message-background,\n        var-prefixer(message-bg),\n        --tct-gray-14,\n        --t-gray-14,\n        --tct-gray-l3,\n        --app-gray-l3,\n        #f2f2f2\n    );\n    color: #{var-list(var-prefixer(message-font-color), inherit)};\n    box-shadow: #{var-list(var-prefixer(message-box-shadow), --app-shadow-1, inherit)};\n    border-radius: #{var-list(var-prefixer(message-border-radius), --app-border-radius-1, inherit)};\n\n    &:focus {\n        box-shadow: var(--const-global-focus);\n    }\n}\n\n.bar {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    height: 100%;\n    background: var(--comp-bar-color);\n    width: var-list(var-prefixer(message-bar-width), 4px);\n    border-radius: var(--tct-message-bar-border-radius, var(--app-border-radius-1) 0 0 var(--app-border-radius-1));\n}\n\n.message-icon {\n    --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);\n    --tct-icon-size: var(--comp-icon-size);\n    top: var(--comp-top-offset);\n    margin-bottom: calc(var(--comp-top-offset) * -1);\n}\n\n.message-content {\n    flex: 1;\n    line-height: var(--comp-line-height);\n    font-size: var(--tct-message-font-size, inherit);\n}\n\n::slotted(ul) {\n    --comp-list-default-padding: 0 0 0 #{var-list(--app-scale-3x, 15px)};\n    padding: var-list(--tct-message-list-padding, --comp-list-default-padding);\n}\n\n:host(:not([appearance])),\n:host([appearance='standard']) {\n    --comp-default-margin: #{var-list(--app-scale-3x, 5px)} 0;\n    margin: var-list(--tct-message-margin, --comp-default-margin);\n\n    .message {\n        --comp-icon-size: #{var-list(var-prefixer(message-icon-size), 24px)};\n        --comp-padding: #{var-list(var-prefixer(message-padding), --app-scale-3x, 15px)};\n        grid-template-columns: var(--comp-icon-size) 1fr;\n        padding: var(--comp-padding);\n        padding-bottom: calc(var(--comp-padding) - #{var-list(--tct-scale-1, --app-scale-1x, 5px)});\n    }\n\n    ::slotted(ul) {\n        --comp-list-default-margin: #{var-list(--app-scale-3x, 15px) 0};\n        margin: var-list(--tct-message-list-margin, --comp-list-default-margin);\n    }\n}\n\n:host([appearance='minimal']) {\n    margin: 0;\n\n    .message {\n        padding: var-list(var-prefixer(message-minimal-padding), --app-scale-2x, 10px);\n        grid-template-columns: 1fr;\n    }\n\n    ::slotted(ul) {\n        margin: var-list(--tct-scale-1, --app-scale-1x, 5px) 0;\n    }\n}\n\n:host(:not([type])),\n:host([type='info']) {\n    --comp-info-color: #0079c1;\n    --comp-bar-color: #{var-list(--tct-message-info-bar-color, --const-stoplight-info, --comp-info-color)};\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-info, --const-stoplight-info, --comp-info-color)};\n    }\n}\n\n:host([type='success']) {\n    --comp-success-color: #0e8a00;\n    --comp-bar-color: #{var-list(--tct-message-success-bar-color, --const-stoplight-success, --comp-success-color)};\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-success, --const-stoplight-success, --comp-success-color)};\n    }\n}\n\n:host([type='warning']) {\n    --comp-warning-color: #c35500;\n    --comp-bar-color: #{var-list(--tct-message-warning-bar-color, --const-stoplight-warning, --comp-warning-color)};\n\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, --comp-warning-color)};\n    }\n}\n\n:host([type='error']),\n:host([type='danger']) {\n    --comp-error-color: #d20a0a;\n    --comp-bar-color: #{var-list(--tct-message-error-bar-color, --const-stoplight-alert, --comp-error-color)};\n\n    .message-icon,\n    .message-icon {\n        --tct-icon-stroke-primary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n        --tct-icon-stroke-secondary: #{var-list(--tct-stoplight-error, --const-stoplight-alert, --comp-error-color)};\n    }\n}\n","import { Component, Prop, h, Method, State, Element, Listen } from '@stencil/core';\nimport { isEventFromElement, isFirefox as checkIfFirefox, loc, nextPaint, overrideFocus } from 'src/utils';\n\n/**\n * @name Message\n * @category Feedback\n * @summary Use for contextual non-blocking notifications like success, error, or info alerts.\n */\n@Component({ tag: 'q2-message', shadow: true, styleUrl: 'q2-message.scss' })\nexport class Q2Message {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    presentToggle: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The visual style of the message. The minimal style is for use cases where you have less space to display information. */\n    @Prop({ reflect: true })\n    appearance: 'minimal' | 'standard' = 'standard';\n\n    /** Determines whether or not assistive technology immediately presents the content to the user, via the `aria-live` attribute. */\n    @Prop({ reflect: true })\n    description: boolean = false;\n\n    /** The type of message to display on the screen. */\n    @Prop({ reflect: true })\n    type: 'info' | 'error' | 'danger' | 'warning' | 'success' = 'info';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector<HTMLElement>('.message').focus();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Prompts assistive technology to announce the message.\n     */\n    @Method()\n    async present() {\n        const { isFirefox } = this;\n        this.presentToggle = !this.presentToggle;\n        if (!isFirefox) return;\n        nextPaint(() => {\n            this.presentToggle = false;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get isFirefox() {\n        return checkIfFirefox();\n    }\n\n    messageIcon(type: string) {\n        const iconMap = {\n            success: 'success-filled',\n            warning: 'warning-filled',\n            danger: 'error-filled',\n            error: 'error-filled',\n            info: 'info-filled',\n        };\n\n        const iconType: string = iconMap[type] || iconMap.info;\n\n        return (\n            <q2-icon\n                type={iconType}\n                class=\"message-icon\"\n            />\n        );\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { isFirefox } = this;\n        const addAriaHiddenForAriaLive = isFirefox && this.presentToggle;\n        const addDivForAriaLive = !isFirefox && this.presentToggle;\n        const { description } = this;\n        const messageLabel: string = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);\n\n        return (\n            <div\n                tabindex=\"-1\"\n                class=\"message\"\n                role={description ? undefined : 'alert'}\n                aria-live={description ? undefined : 'assertive'}\n                aria-atomic={description ? undefined : 'true'}\n                aria-relevant={description && addAriaHiddenForAriaLive ? undefined : 'all'}\n                test-id=\"messageContainer\"\n            >\n                <div\n                    class=\"bar\"\n                    test-id=\"bar\"\n                ></div>\n                {this.appearance === 'standard' ? this.messageIcon(this.type) : ''}\n                {addDivForAriaLive && <div class=\"sr\"></div>}\n                <div class=\"sr message-label\">{messageLabel}</div>\n                <div\n                    class=\"message-content\"\n                    aria-hidden={addAriaHiddenForAriaLive ? 'true' : undefined}\n                >\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAe;;MCSRC,IAAS;EADtB,WAAAC,CAAAC;;;;oIAkBIC,KAAUC,aAA2B;0IAIrCD,KAAWE,cAAY;4DAIvBF,KAAIG,OAAwD;AAkG/D;;;EA7FG,gBAAAC;IACIC,EAAcL,KAAKM;;;;EAOvB,aAAAC,CAAcC;IACV,KAAKC,EAAmBD,GAAOR,KAAKM,cAAc;IAClDN,KAAKM,YAAYI,WAAWC,cAA2B,YAAYC;;;;;;;EAUvE,aAAMC;IACF,OAAMC,WAAEA,KAAcd;IACtBA,KAAKe,iBAAiBf,KAAKe;IAC3B,KAAKD,GAAW;IAChBE,GAAU;MACNhB,KAAKe,gBAAgB;AAAK;;;;EAOlC,aAAID;IACA,OAAOG;;EAGX,WAAAC,CAAYf;IACR,MAAMgB,IAAU;MACZC,SAAS;MACTC,SAAS;MACTC,QAAQ;MACRC,OAAO;MACPC,MAAM;;IAGV,MAAMC,IAAmBN,EAAQhB,MAASgB,EAAQK;IAElD,OACIE,EACI;MAAAvB,MAAMsB;MACNE,OAAM;;;;;EAQlB,MAAAC;IACI,OAAMd,WAAEA,KAAcd;IACtB,MAAM6B,IAA2Bf,KAAad,KAAKe;IACnD,MAAMe,KAAqBhB,KAAad,KAAKe;IAC7C,OAAMb,aAAEA,KAAgBF;IACxB,MAAM+B,IAAuBC,EAAI,+BAA+BhC,KAAKG,OAAOH,KAAKG,OAAO;IAExF,OACIuB,EACI;MAAAO,KAAA;MAAAC,UAAS;MACTP,OAAM;MACNQ,MAAMjC,IAAckC,YAAY;MACrB,aAAAlC,IAAckC,YAAY;MAAW,eACnClC,IAAckC,YAAY;MAAM,iBAC9BlC,KAAe2B,IAA2BO,YAAY;MAAK,WAClE;OAERV,EAAA;MAAAO,KAAA;MACIN,OAAM;MAAK,WACH;QAEX3B,KAAKC,eAAe,aAAaD,KAAKkB,YAAYlB,KAAKG,QAAQ,IAC/D2B,KAAqBJ,EAAA;MAAAO,KAAA;MAAKN,OAAM;QACjCD,EAAA;MAAAO,KAAA;MAAKN,OAAM;OAAoBI,IAC/BL,EAAA;MAAAO,KAAA;MACIN,OAAM;MAAiB,eACVE,IAA2B,SAASO;OAEjDV,EAAQ;MAAAO,KAAA","ignoreList":[]}

package/dist/q2-tecton-elements/q2-meter.entry.js

@@ -1,6 +1,6 @@
 import { r as t, h as e, g as r } from "./index-CGkHOjh1.js";
 
-import { l as i } from "./index-B4WYBDS9.js";
+import { l as i } from "./index-C4PILj1_.js";
 
 const o = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{width:100%}.meter-container{--comp-meter-bar-height:var(--tct-meter-bar-height, 10px);--comp-meter-bar-border-radius:var(--tct-meter-bar-border-radius, calc(var(--comp-meter-bar-height) / 2));--comp-meter-dot-height:var(--tct-meter-dot-size, var(--tct-meter-bar-height, 10px));--comp-meter-dot-border-style:var(--tct-meter-dot-border-style, solid);--comp-meter-dot-border-width:var(--tct-meter-dot-border-width, calc(0.2 * var(--comp-meter-bar-height)));--comp-meter-dot-border-color:var(--tct-meter-dot-border-color, #FFFFFF);--comp-meter-dot-border-radius:var(--tct-meter-dot-border-radius, 50%);--comp-meter-dot-background-color:var(--tct-meter-dot-background-color, var(--t-primary, #6A4A9E));--comp-meter-tick-height:var(--tct-meter-ticket-height, calc(0.4 * var(--comp-meter-bar-height)));--comp-meter-bar-shadow:var(--tct-meter-bar-shadow);--comp-meter-bar-border:var(--tct-meter-bar-border)}:host([animated]:not([animated=false])) .meter-container{--comp-meter-bar-transition:var(--tct-meter-bar-transition, width 0.2s ease-in-out);--comp-meter-dot-transition:var(--tct-meter-dot-transition, left 0.2s ease-in-out)}:host([dotted]:not([dotted=false])) .meter-container{--comp-meter-dot-visibility:visible}:host([segments]:not([segments=""]):not([segments="0"]):not([segments="1"])) .meter-container{--comp-meter-tick-visibility:visible}.meter-container .label{font-size:var(--tct-meter-label-font-size, 14px);font-weight:var(--tct-meter-label-font-weight, 600);color:var(--tct-meter-label-color, var(--t-text, #4D4D4D));margin:var(--tct-meter-label-margin, 5px 0)}.meter-container .description{font-size:var(--tct-meter-description-font-size, 14px);font-weight:var(--tct-meter-description-font-weight, 400);color:var(--tct-meter-description-color, #000000);line-height:var(--tct-meter-description-line-height, 21px);margin:var(--tct-meter-description-margin, 5px 0)}.meter-container .bar-container{position:relative}.meter-container .bar-container .bars{position:relative;top:0;left:0;width:100%;height:var(--comp-meter-bar-height);background-color:var(--tct-meter-bar-background-color, var(--t-primary-completed2, #E0DEEF));margin:var(--tct-meter-bar-margin, 5px 0);border:var(--comp-meter-bar-border);border-radius:var(--comp-meter-bar-border-radius);box-shadow:var(--comp-meter-bar-shadow)}.meter-container .bar-container .bars .completed-bar,.meter-container .bar-container .bars .suggested-bar,.meter-container .bar-container .bars .tick-bar{height:100%;position:absolute;top:0;left:0;border-radius:var(--comp-meter-bar-border-radius);transition:var(--comp-meter-bar-transition, none)}.meter-container .bar-container .bars .completed-bar{background-color:var(--tct-meter-completed-bar-background-color, var(--t-primary, #6A4A9E));min-width:calc(var(--comp-meter-bar-height));width:0%;z-index:2}.meter-container .bar-container .bars .suggested-bar{background-color:var(--tct-meter-suggested-bar-background-color, var(--t-primary-l5, #B4A0D3));min-width:calc(var(--comp-meter-bar-height));width:0%;z-index:1}.meter-container .bar-container .bars .tick-bar{visibility:var(--comp-meter-tick-visibility, hidden);width:100%;z-index:3;display:flex;justify-content:space-evenly;align-items:center}.meter-container .bar-container .bars .tick-bar .tick{width:100%;border-right-width:var(--tct-meter-tick-width, 1px);border-right-color:var(--tct-meter-tick-color, var(--t-primary-l5, #B4A0D3));border-right-style:solid;height:var(--comp-meter-tick-height)}.meter-container .bar-container .bars .tick-bar .tick.tick-right{border-right-color:var(--tct-meter-tick-right-color, var(--t-a11y-gray-color-AA, #949494))}.meter-container .bar-container .bars .tick-bar .tick:last-child{border-color:transparent}.meter-container .bar-container .dot-container{position:absolute;line-height:0;left:0;top:calc(50% - var(--comp-meter-dot-height) / 2 - var(--comp-meter-dot-border-width));transform:translateX(-50%);transition:var(--comp-meter-dot-transition, none);z-index:4}.meter-container .bar-container .dot-container .dot{visibility:var(--comp-meter-dot-visibility, hidden);width:calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));height:calc(var(--comp-meter-dot-height) + 2 * var(--comp-meter-dot-border-width));background-color:var(--comp-meter-dot-background-color);border-style:var(--comp-meter-dot-border-style);border-width:var(--comp-meter-dot-border-width);border-color:var(--comp-meter-dot-border-color);border-radius:var(--comp-meter-dot-border-radius);box-shadow:var(--tct-meter-dot-box-shadow, var(--app-shadow-1))}.meter-container .bar-container .dot-container.suggested .dot{visibility:hidden}.meter-container .legends{display:flex;flex-direction:row;justify-content:space-between;color:var(--tct-meter-legend-label-color, var(--t-textA, #767676));font-weight:var(--tct-meter-legend-font-weight, 400);margin:var(--tct-meter-legend-margin, 5px 0)}.meter-container .legends .left{display:flex;flex-direction:row}.meter-container .legends .left .completed,.meter-container .legends .left .suggested{display:flex;flex-direction:row;align-items:center}.meter-container .legends .left .completed .dot,.meter-container .legends .left .suggested .dot{margin-right:var(--tct-meter-dot-gap, 5px);border-radius:var(--tct-meter-legend-dot-radius, var(--app-border-radius-3, 5px));width:var(--tct-meter-legend-bar-width, 7px);height:var(--tct-meter-legend-bar-height, 7px)}.meter-container .legends .left .completed .legend-label,.meter-container .legends .left .suggested .legend-label{font-size:inherit}.meter-container .legends .left .completed{margin-right:var(--tct-meter-legend-gap, 20px)}.meter-container .legends .left .completed .dot{background-color:var(--tct-meter-completed-bar-background-color, var(--t-primary, #6A4A9E))}.meter-container .legends .left .suggested .dot{background-color:var(--tct-meter-suggested-bar-background-color, var(--t-primary-l5, #B4A0D3))}.meter-container .legends .right .max{font-size:inherit;text-align:right}';
 
@@ -73,8 +73,8 @@ const a = class {
     r = Math.max(t, r);
     const o = {};
     const a = {};
-    const n = this.tooltipCompleted ? i(this.tooltipCompleted) : this.completedValue;
-    const s = this.tooltipSuggested ? i(this.tooltipSuggested) : this.suggestedValue;
+    const c = this.tooltipCompleted ? i(this.tooltipCompleted) : this.completedValue;
+    const n = this.tooltipSuggested ? i(this.tooltipSuggested) : this.suggestedValue;
     if (t === 0) {
       o.transform = `translateX(0%)`;
       o.left = "calc(0% - var(--comp-meter-dot-border-width))";
@@ -122,8 +122,8 @@ const a = class {
     }, this.hideTooltip ? e("div", {
       class: "dot"
     }) : e("q2-tooltip", {
-      label: n,
-      position: this.adjustTooltipDirection(t, n),
+      label: c,
+      position: this.adjustTooltipDirection(t, c),
       immediate: true
     }, e("div", {
       class: "dot"
@@ -133,8 +133,8 @@ const a = class {
     }, this.hideTooltip ? e("div", {
       class: "dot"
     }) : e("q2-tooltip", {
-      label: s,
-      position: this.adjustTooltipDirection(r, s),
+      label: n,
+      position: this.adjustTooltipDirection(r, n),
       immediate: true
     }, e("div", {
       class: "dot"
@@ -143,23 +143,23 @@ const a = class {
   render() {
     const [t, r] = this.convertToPercentage(this.completedValue, this.suggestedValue, this.maxValue);
     return e("div", {
-      key: "6b6e05dc4c575f71b92c767365f03f7955361c32",
+      key: "1fcdcdac6a15aa52ac302ec40bc5809ab39fdbe6",
       class: "meter-container",
       "aria-label": this.ariaLabel,
       role: "group"
     }, this.label && e("div", {
-      key: "efb35a7a613ab5e627e159746e509006ad309ea0",
+      key: "a4cf43a802e84c0ceaf44c697511c206d0611906",
       class: "label",
       "aria-label": i(this.label)
     }, i(this.label)), this.description && e("div", {
-      key: "8d8d57b85258385d4afd029e3347b94411bdcd6f",
+      key: "8b8bdbcc35dbc2de60063cbf871a4a34bbe7548b",
       class: "description",
       "aria-label": i(this.description)
     }, i(this.description)), this.renderBar(t, r), e("div", {
-      key: "4013ef3fcdd86fbc05ea2c04243cd3f1c85806c0",
+      key: "624342cfe8f534af2396fe6190e24bfcaecdb0c2",
       class: "legends"
     }, e("div", {
-      key: "8f6582f60aede052fb0f1d103b09011104944abc",
+      key: "835efacea1cc4d03092cecbbd6914d54b498fa5f",
       class: "left"
     }, this.completedValue || this.completedLabel ? e("div", {
       class: "completed"
@@ -174,10 +174,10 @@ const a = class {
     }), e("div", {
       class: "legend-label"
     }, this.suggestedValue, " ", i(this.suggestedLabel))) : ""), e("div", {
-      key: "588c1613a4b50d8971f9563e7dbe2e224625e820",
+      key: "428535e8b751a3316bfb5b5ad19756d3fc09fcd0",
       class: "right"
     }, e("div", {
-      key: "73d4eb43a171fa67a212e68d4eb57f6152be8f7e",
+      key: "f175ee347bcd84716c5e1971d657c4fbf7dcbbc1",
       class: "max"
     }, this.maxValue, " ", i(this.maxLabel)))));
   }