q2-tecton-elements 1.55.4 → 1.56.1

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

@@ -1,8 +1,8 @@
 import { r as e, c as t, h as a, g as i } from "./index-7a5365e2.js";
 
-import { d as n } from "./index-3bb7a785.js";
+import { d as n } from "./index-3184c760.js";
 
-import { l as s, a as r, o, i as d, w as l, j as c } from "./index-f2a66217.js";
+import { l as s, a as r, o, i as d, w as l, j as c } from "./index-c215e8ef.js";
 
 function formatDateISO(e) {
   const t = new Date(e);
@@ -1276,11 +1276,11 @@ const y = class {
   // #region Render Methods
   render() {
     return a("click-elsewhere", {
-      key: "25256a2e56cb178c647f96135c5cdd6f3577f874",
+      key: "00d9728c57b0888d3d6ddc7c4e4efebc864dc5f0",
       class: this.open ? "dropdown-open" : undefined,
       onChange: this.onClickElsewhere
     }, this.renderInputField(), a("q2-popover", {
-      key: "c364f0a2c9d6d98ca2e3c01b93cea47e3b6ff39c",
+      key: "93c3bac0fe7c4cd4563b7ec30f9a5a1531df6291",
       ref: e => this.popoverElement = e,
       controlElement: this.innerInputContainer,
       open: this.open,

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

@@ -1,10 +1,10 @@
 import { r as t, c as a, h as r, F as c, g as o } from "./index-7a5365e2.js";
 
-import { k as e, o as i, i as s } from "./index-f2a66217.js";
+import { k as e, o as i, i as n } from "./index-c215e8ef.js";
 
-const n = "*{box-sizing:border-box}*:active{outline:none}*:focus{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}.container{position:relative;width:100%;text-align:start;height:100%;display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-chevron-size:0;--comp-bar-width:var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));--comp-card-padding:var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)))}.container.is-small{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px))}.container.has-avatar{grid-template-columns:var(--comp-avatar-size) 1fr;--tct-avatar-width:var(--comp-avatar-size);--tct-avatar-height:var(--comp-avatar-size);--tct-icon-size:var(--comp-avatar-size)}:host([bar][is-static]) .container{padding-left:var(--comp-card-padding)}:host(:not([is-static])) .container{--comp-border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 4px)));--comp-border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));border:none;background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));padding:var(--comp-card-padding);text-decoration:none;border-width:var(--comp-border-width);border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:var(--tct-card-border-style, solid);border-radius:var(--comp-border-radius);transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));box-shadow:var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14))))}:host(:not([is-static])) .container.clickable{cursor:pointer}@media (hover: hover){:host(:not([is-static])) .container.clickable{--comp-card-hover-box-shadow:var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14))))}:host(:not([is-static])) .container.clickable:hover,:host(:not([is-static])) .container.clickable:active,:host(:not([is-static])) .container.clickable:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));box-shadow:var(--const-double-focus-ring)}:host(:not([is-static])) .container.clickable:hover{box-shadow:var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:focus:hover{box-shadow:var(--const-double-focus-ring), var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:active{box-shadow:var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}}:host(:not([is-static])) .container.is-touch{--comp-chevron-size:var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));grid-template-columns:1fr var(--comp-chevron-size)}:host(:not([is-static])) .container.has-avatar.is-touch{grid-template-columns:var(--comp-avatar-size) 1fr var(--comp-chevron-size)}.content{overflow:hidden;display:grid;gap:var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));align-content:start}h3,p{margin:0;padding:0;line-height:var(--tct-card-font-height, var(--t-card-font-height, 20px))}h3{font-weight:var(--tct-card-font-weight, var(--t-card-font-weight, 600));font-size:var(--tct-card-font-size, var(--t-card-font-size, 17px));text-overflow:ellipsis;overflow:hidden;white-space:nowrap}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.bar{--comp-bar-border-radius:calc(var(--comp-border-radius) - var(--comp-border-width));border-radius:var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);position:absolute;inset:0 auto auto 0;width:var(--comp-bar-width);background:var(--comp-bar-color);height:100%}.bar.color-primary{--comp-bar-color:var(--tct-card-bar-color-primary, var(--t-primary, #5446a4))}.bar.color-secondary{--comp-bar-color:var(--tct-card-bar-color-secondary, var(--t-secondary, #b6b3cc))}.bar.color-tertiary{--comp-bar-color:var(--tct-card-bar-color-tertiary, var(--t-tertiary, #ebe8fc))}.bar.color-info{--comp-bar-color:var(--tct-card-bar-color-info, var(--const-stoplight-info, #0079c1))}.bar.color-success{--comp-bar-color:var(--tct-card-bar-color-success, var(--const-stoplight-success, #0e8a00))}.bar.color-warning{--comp-bar-color:var(--tct-card-bar-color-warning, var(--const-stoplight-warning, #c35500))}.bar.color-alert{--comp-bar-color:var(--tct-card-bar-color-alert, var(--const-stoplight-alert, #c35500))}.bar.color-accent-1{--comp-bar-color:var(--tct-card-bar-color-accent-1, var(--t-accent-1, #e05252))}.bar.color-accent-2{--comp-bar-color:var(--tct-card-bar-color-accent-2, var(--t-accent-2, #e09952))}.bar.color-accent-3{--comp-bar-color:var(--tct-card-bar-color-accent-3, var(--t-accent-3, #e0e052))}.bar.color-accent-4{--comp-bar-color:var(--tct-card-bar-color-accent-4, var(--t-accent-4, #99e052))}.bar.color-accent-5{--comp-bar-color:var(--tct-card-bar-color-accent-5, var(--t-accent-5, #52e052))}.bar.color-accent-6{--comp-bar-color:var(--tct-card-bar-color-accent-6, var(--t-accent-6, #52e099))}.bar.color-accent-7{--comp-bar-color:var(--tct-card-bar-color-accent-7, var(--t-accent-7, #52e0e0))}.bar.color-accent-8{--comp-bar-color:var(--tct-card-bar-color-accent-8, var(--t-accent-8, #5299e0))}.bar.color-accent-9{--comp-bar-color:var(--tct-card-bar-color-accent-9, var(--t-accent-9, #5252e0))}.bar.color-accent-10{--comp-bar-color:var(--tct-card-bar-color-accent-10, var(--t-accent-10, #9952e0))}.bar.color-accent-11{--comp-bar-color:var(--tct-card-bar-color-accent-11, var(--t-accent-11, #e052e0))}.bar.color-accent-12{--comp-bar-color:var(--tct-card-bar-color-accent-12, var(--t-accent-12, #e05299))}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";
+const s = "*{box-sizing:border-box}*:active{outline:none}*:focus{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}.container{position:relative;width:100%;text-align:start;height:var(--tct-card-height, 100%);min-height:var(--tct-card-min-height, auto);display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-chevron-size:0;--comp-bar-width:var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));--comp-card-padding:var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)))}.container.is-small{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px))}.container.has-avatar{grid-template-columns:var(--comp-avatar-size) 1fr;--tct-avatar-width:var(--comp-avatar-size);--tct-avatar-height:var(--comp-avatar-size);--tct-icon-size:var(--comp-avatar-size)}:host([bar][is-static]) .container{padding-left:var(--comp-card-padding)}:host(:not([is-static])) .container{--comp-border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 4px)));--comp-border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));border:none;background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));padding:var(--comp-card-padding);text-decoration:none;border-width:var(--comp-border-width);border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:var(--tct-card-border-style, solid);border-radius:var(--comp-border-radius);transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));box-shadow:var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14))))}:host(:not([is-static])) .container.clickable{cursor:pointer}@media (hover: hover){:host(:not([is-static])) .container.clickable{--comp-card-hover-box-shadow:var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14))))}:host(:not([is-static])) .container.clickable:hover,:host(:not([is-static])) .container.clickable:active,:host(:not([is-static])) .container.clickable:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));box-shadow:var(--const-double-focus-ring)}:host(:not([is-static])) .container.clickable:hover{box-shadow:var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:focus:hover{box-shadow:var(--const-double-focus-ring), var(--comp-card-hover-box-shadow)}:host(:not([is-static])) .container.clickable:active{box-shadow:var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}}:host(:not([is-static])) .container.is-touch{--comp-chevron-size:var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));grid-template-columns:1fr var(--comp-chevron-size)}:host(:not([is-static])) .container.has-avatar.is-touch{grid-template-columns:var(--comp-avatar-size) 1fr var(--comp-chevron-size)}.content{overflow:hidden;display:grid;gap:var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));align-content:start}h3,p{margin:0;padding:0;line-height:var(--tct-card-font-height, var(--t-card-font-height, 20px))}h3{font-weight:var(--tct-card-font-weight, var(--t-card-font-weight, 600));font-size:var(--tct-card-font-size, var(--t-card-font-size, 17px));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-card-title-line-count, 1);-webkit-box-orient:vertical}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-card-description-line-count, 2);-webkit-box-orient:vertical}.bar{--comp-bar-border-radius:calc(var(--comp-border-radius) - var(--comp-border-width));border-radius:var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);position:absolute;inset:0 auto auto 0;width:var(--comp-bar-width);background:var(--comp-bar-color);height:100%}.bar.color-primary{--comp-bar-color:var(--tct-card-bar-color-primary, var(--t-primary, #5446a4))}.bar.color-secondary{--comp-bar-color:var(--tct-card-bar-color-secondary, var(--t-secondary, #b6b3cc))}.bar.color-tertiary{--comp-bar-color:var(--tct-card-bar-color-tertiary, var(--t-tertiary, #ebe8fc))}.bar.color-info{--comp-bar-color:var(--tct-card-bar-color-info, var(--const-stoplight-info, #0079c1))}.bar.color-success{--comp-bar-color:var(--tct-card-bar-color-success, var(--const-stoplight-success, #0e8a00))}.bar.color-warning{--comp-bar-color:var(--tct-card-bar-color-warning, var(--const-stoplight-warning, #c35500))}.bar.color-alert{--comp-bar-color:var(--tct-card-bar-color-alert, var(--const-stoplight-alert, #c35500))}.bar.color-accent-1{--comp-bar-color:var(--tct-card-bar-color-accent-1, var(--t-accent-1, #e05252))}.bar.color-accent-2{--comp-bar-color:var(--tct-card-bar-color-accent-2, var(--t-accent-2, #e09952))}.bar.color-accent-3{--comp-bar-color:var(--tct-card-bar-color-accent-3, var(--t-accent-3, #e0e052))}.bar.color-accent-4{--comp-bar-color:var(--tct-card-bar-color-accent-4, var(--t-accent-4, #99e052))}.bar.color-accent-5{--comp-bar-color:var(--tct-card-bar-color-accent-5, var(--t-accent-5, #52e052))}.bar.color-accent-6{--comp-bar-color:var(--tct-card-bar-color-accent-6, var(--t-accent-6, #52e099))}.bar.color-accent-7{--comp-bar-color:var(--tct-card-bar-color-accent-7, var(--t-accent-7, #52e0e0))}.bar.color-accent-8{--comp-bar-color:var(--tct-card-bar-color-accent-8, var(--t-accent-8, #5299e0))}.bar.color-accent-9{--comp-bar-color:var(--tct-card-bar-color-accent-9, var(--t-accent-9, #5252e0))}.bar.color-accent-10{--comp-bar-color:var(--tct-card-bar-color-accent-10, var(--t-accent-10, #9952e0))}.bar.color-accent-11{--comp-bar-color:var(--tct-card-bar-color-accent-11, var(--t-accent-11, #e052e0))}.bar.color-accent-12{--comp-bar-color:var(--tct-card-bar-color-accent-12, var(--t-accent-12, #e05299))}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";
 
-const d = n;
+const d = s;
 
 const l = [ "primary", "secondary", "tertiary", "info", "success", "warning", "alert", "accent-1", "accent-2", "accent-3", "accent-4", "accent-5", "accent-6", "accent-7", "accent-8", "accent-9", "accent-10", "accent-11", "accent-12" ];
 
@@ -51,7 +51,7 @@ const h = class {
   // #endregion
   // #region Listeners
   onHostElementFocus(t) {
-    if (!s(t, this.hostElement)) return;
+    if (!n(t, this.hostElement)) return;
     this.clickableElement.focus();
   }
   // #endregion
@@ -89,15 +89,15 @@ const h = class {
     }
   }
   generateContainerClasses() {
-    const {isSmall: t, isAutoSmall: a, avatarName: r, avatarInitials: c, avatarSrc: o, avatarIcon: e, isTouch: i, isAutoTouch: s, isStatic: n, type: d} = this;
+    const {isSmall: t, isAutoSmall: a, avatarName: r, avatarInitials: c, avatarSrc: o, avatarIcon: e, isTouch: i, isAutoTouch: n, isStatic: s, type: d} = this;
     const l = [ "container", d ];
     const h = t || a;
-    const v = i || s;
-    const p = r || c || o || e;
+    const v = i || n;
+    const b = r || c || o || e;
     if (h) l.push("is-small");
-    if (v && !n) l.push("is-touch");
-    if (p) l.push("has-avatar");
-    if (n) l.push("is-static");
+    if (v && !s) l.push("is-touch");
+    if (b) l.push("has-avatar");
+    if (s) l.push("is-static");
     return l.join(" ");
   }
   generateContent() {

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

@@ -1 +1 @@
-{"version":3,"names":["q2CardCss","Q2CardStyle0","PREDEFINED_COLORS","Q2Card","this","handleClick","event","url","preventDefault","stopPropagation","click","emit","isTouchDevice","disconnectedCallback","_a","resizeObserver","disconnect","componentDidLoad","hostElement","clickableElement","overrideFocus","ResizeObserver","determineAutoSmall","observe","onHostElementFocus","isEventFromElement","focus","isStatic","hasAttribute","containerElement","avatarElement","avatarWidth","offsetWidth","containerWidth","_b","totalWidth","isAutoSmall","determineAutoTouch","isAutoTouch","generateAvatar","avatarName","avatarInitials","avatarSrc","avatarIcon","h","type","ref","e","name","initials","src","generateContainerClasses","isSmall","isTouch","result","showSmall","showTouch","hasAvatar","push","join","generateContent","Fragment","bar","class","getBarClasses","style","getBarStyles","title","description","isBarColorPredefined","includes","render","href","target","rel","onClick"],"sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.container {\n    position: relative;\n    width: 100%;\n    text-align: start;\n    height: 100%;\n    display: grid;\n    gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n    margin: 0;\n    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n\n    --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n    --comp-chevron-size: 0;\n    --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n    --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n    &.is-small {\n        --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n    }\n    &.has-avatar {\n        grid-template-columns: var(--comp-avatar-size) 1fr;\n        --tct-avatar-width: var(--comp-avatar-size);\n        --tct-avatar-height: var(--comp-avatar-size);\n        --tct-icon-size: var(--comp-avatar-size);\n    }\n\n    :host([bar][is-static]) & {\n        padding-left: var(--comp-card-padding);\n    }\n\n    :host(:not([is-static])) & {\n        --comp-border-radius: #{var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px)};\n        --comp-border-width: #{var-list(var-prefixer(card-border-width), 0px)};\n        border: none;\n        background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n        padding: var(--comp-card-padding);\n        text-decoration: none;\n        border-width: var(--comp-border-width);\n        border-color: var-list(var-prefixer(card-border-color), transparent);\n        border-style: var-list(--tct-card-border-style, solid);\n        border-radius: var(--comp-border-radius);\n        transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        box-shadow: var-list(var-prefixer(card-box-shadow), --app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"));\n\n        &.clickable {\n            cursor: pointer;\n            @media (hover: hover) {\n                --comp-card-hover-box-shadow: #{var-list(\n                        var-prefixer(card-hover-box-shadow),\n                        --app-shadow-3,\n                        unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)\")\n                    )};\n\n                &:hover,\n                &:active,\n                &:focus {\n                    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n                    box-shadow: var(--const-double-focus-ring);\n                }\n\n                &:hover {\n                    box-shadow: var(--comp-card-hover-box-shadow);\n                }\n\n                &:focus:hover {\n                    box-shadow: var(--const-double-focus-ring), var(--comp-card-hover-box-shadow);\n                }\n\n                &:active {\n                    box-shadow: var-list(\n                        var-prefixer(card-active-box-shadow),\n                        --app-shadow-1,\n                        unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)\")\n                    );\n                }\n            }\n        }\n\n        &.is-touch {\n            --comp-chevron-size: #{var-list(var-prefixer(card-chevron-size), 26px)};\n            grid-template-columns: 1fr var(--comp-chevron-size);\n        }\n\n        &.has-avatar.is-touch {\n            grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);\n        }\n    }\n}\n\n.content {\n    overflow: hidden;\n    display: grid;\n    gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n    align-content: start;\n}\n\nh3,\np {\n    margin: 0;\n    padding: 0;\n    line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n    font-weight: var-list(var-prefixer(card-font-weight), 600);\n    font-size: var-list(var-prefixer(card-font-size), 17px);\n    @include line-clamp(1);\n}\n\np {\n    @include line-clamp(2);\n}\n\n.bar {\n    --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));\n    border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);\n    position: absolute;\n    inset: 0 auto auto 0;\n    width: var(--comp-bar-width);\n    background: var(--comp-bar-color);\n    height: 100%;\n\n    &.color-primary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-primary, --t-primary, #5446a4)};\n    }\n\n    &.color-secondary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-secondary, --t-secondary, #b6b3cc)};\n    }\n\n    &.color-tertiary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-tertiary, --t-tertiary, #ebe8fc)};\n    }\n\n    &.color-info {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-info, --const-stoplight-info, #0079c1)};\n    }\n\n    &.color-success {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-success, --const-stoplight-success, #0e8a00)};\n    }\n\n    &.color-warning {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-warning, --const-stoplight-warning, #c35500)};\n    }\n\n    &.color-alert {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-alert, --const-stoplight-alert, #c35500)};\n    }\n\n    &.color-accent-1 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-1, --t-accent-1, #e05252)};\n    }\n\n    &.color-accent-2 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-2, --t-accent-2, #e09952)};\n    }\n\n    &.color-accent-3 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-3, --t-accent-3, #e0e052)};\n    }\n\n    &.color-accent-4 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-4, --t-accent-4, #99e052)};\n    }\n\n    &.color-accent-5 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-5, --t-accent-5, #52e052)};\n    }\n\n    &.color-accent-6 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-6, --t-accent-6, #52e099)};\n    }\n\n    &.color-accent-7 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-7, --t-accent-7, #52e0e0)};\n    }\n\n    &.color-accent-8 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-8, --t-accent-8, #5299e0)};\n    }\n\n    &.color-accent-9 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-9, --t-accent-9, #5252e0)};\n    }\n\n    &.color-accent-10 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-10, --t-accent-10, #9952e0)};\n    }\n\n    &.color-accent-11 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-11, --t-accent-11, #e052e0)};\n    }\n\n    &.color-accent-12 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-12, --t-accent-12, #e05299)};\n    }\n}\n\n.touch-indicator {\n    align-self: center;\n    --tct-icon-size: var(--comp-chevron-size);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Event,\n    h,\n    Fragment,\n    Listen,\n    Element,\n    EventEmitter,\n    State,\n} from '@stencil/core';\nimport { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n    'primary',\n    'secondary',\n    'tertiary',\n    'info',\n    'success',\n    'warning',\n    'alert',\n    'accent-1',\n    'accent-2',\n    'accent-3',\n    'accent-4',\n    'accent-5',\n    'accent-6',\n    'accent-7',\n    'accent-8',\n    'accent-9',\n    'accent-10',\n    'accent-11',\n    'accent-12',\n];\n\n@Component({ tag: 'q2-card', shadow: true, styleUrl: 'q2-card.scss' })\nexport class Q2Card implements ComponentInterface {\n    // #region Own Properties\n\n    avatarElement: HTMLElement;\n    clickableElement: HTMLElement;\n    containerElement: HTMLElement;\n    resizeObserver: ResizeObserver;\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    isAutoSmall: boolean = false;\n\n    @State()\n    isAutoTouch: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location. */\n    @Prop({ reflect: true })\n    avatarIcon: string;\n\n    /** The initials to be placed in the avatar of the card. */\n    @Prop({ reflect: true })\n    avatarInitials: string;\n\n    /** The name to be used for the avatar of the card which will be converted to initials. */\n    @Prop({ reflect: true })\n    avatarName: string;\n\n    /** The source of the image to be displayed in the avatar location. */\n    @Prop({ reflect: true })\n    avatarSrc: string;\n\n    /**\n     * Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:\n     *\n     * - primary\n     * - secondary\n     * - tertiary\n     * - info\n     * - success\n     * - warning\n     * - alert\n     * - accent-1\n     * - accent-2\n     * - accent-3\n     * - accent-4\n     * - accent-5\n     * - accent-6\n     * - accent-7\n     * - accent-8\n     * - accent-9\n     * - accent-10\n     * - accent-11\n     * - accent-12\n     *\n     * Any other value (e.g. `\"#990000\"`, `\"purple\"`) will be treated as a custom color.\n     */\n    @Prop({ reflect: true })\n    bar: string;\n\n    /** The description of the card (truncated after two lines). */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Display the card with a view optimized for smaller displays.\n     *\n     * @info\n     * This will be determined automatically if the attribute is not manually provided.\n     */\n    @Prop({ reflect: true })\n    isSmall: boolean;\n\n    /** Display the card with no borders, padding, drop-shadows, or clickable behavior. */\n    @Prop({ reflect: true })\n    isStatic: boolean;\n\n    /**\n     * Display the card with a view optimized for touch displays.\n     *\n     * @info\n     * This will be determined automatically if the attribute is not manually provided.\n     */\n    @Prop({ reflect: true })\n    isTouch: boolean = isTouchDevice();\n\n    /** Target to be applied to the link when a URL is provided. */\n    @Prop({ reflect: true })\n    target: '_self' | '_blank' | '_parent' | '_top';\n\n    /** The title of the card. */\n    @Prop({ reflect: true })\n    title: string;\n\n    /** Alters the interactive behavior of the card while maintaining visual appearance. */\n    @Prop({ reflect: true })\n    type: 'clickable' | 'non-clickable' = 'clickable';\n\n    /** URL to navigate the user to when the card is clicked. */\n    @Prop({ reflect: true })\n    url: string;\n\n    // #endregion\n    // #region Events\n\n    /** Emitted when the card is clicked and the `url` property is not provided. */\n    @Event()\n    click: EventEmitter<undefined>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n    }\n\n    componentDidLoad() {\n        const { hostElement, clickableElement } = this;\n        hostElement.click = () => clickableElement.click();\n        overrideFocus(this.hostElement);\n\n        this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());\n        this.resizeObserver.observe(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.clickableElement.focus();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    determineAutoSmall() {\n        if (this.isStatic) return;\n        if (this.hostElement.hasAttribute('is-small')) return;\n        const { containerElement, avatarElement } = this;\n        const avatarWidth = avatarElement?.offsetWidth ?? 0;\n        const containerWidth = containerElement?.offsetWidth ?? 0;\n        const totalWidth = avatarWidth + containerWidth;\n        this.isAutoSmall = totalWidth < 350;\n    }\n\n    determineAutoTouch() {\n        if (this.hostElement.hasAttribute('is-touch')) return;\n        this.isAutoTouch = isTouchDevice();\n    }\n\n    generateAvatar() {\n        const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n        if (avatarIcon) {\n            return (\n                <q2-icon\n                    type={avatarIcon}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-icon>\n            );\n        } else if (avatarName || avatarInitials || avatarSrc) {\n            return (\n                <q2-avatar\n                    name={avatarName}\n                    initials={avatarInitials}\n                    src={avatarSrc}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-avatar>\n            );\n        }\n    }\n\n    generateContainerClasses() {\n        const {\n            isSmall,\n            isAutoSmall,\n            avatarName,\n            avatarInitials,\n            avatarSrc,\n            avatarIcon,\n            isTouch,\n            isAutoTouch,\n            isStatic,\n            type,\n        } = this;\n        const result = ['container', type];\n        const showSmall = isSmall || isAutoSmall;\n        const showTouch = isTouch || isAutoTouch;\n        const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;\n        if (showSmall) result.push('is-small');\n        if (showTouch && !isStatic) result.push('is-touch');\n        if (hasAvatar) result.push('has-avatar');\n        if (isStatic) result.push('is-static');\n\n        return result.join(' ');\n    }\n\n    generateContent() {\n        return (\n            <Fragment>\n                {this.bar && (\n                    <div\n                        class={this.getBarClasses()}\n                        test-id=\"bar\"\n                        style={this.getBarStyles()}\n                    ></div>\n                )}\n                {this.generateAvatar()}\n                <div\n                    class=\"content\"\n                    test-id=\"contentContainer\"\n                    ref={e => (this.containerElement = e)}\n                >\n                    {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n                    {this.description && <p test-id=\"description\">{this.description}</p>}\n                    <slot />\n                </div>\n                {this.isTouch && !this.isStatic && (\n                    <q2-icon\n                        test-id=\"touchIndicator\"\n                        type=\"chevron-right\"\n                        class=\"touch-indicator\"\n                    ></q2-icon>\n                )}\n            </Fragment>\n        );\n    }\n\n    getBarClasses() {\n        const { bar } = this;\n\n        return {\n            bar: true,\n            [`color-${bar}`]: this.isBarColorPredefined(),\n        };\n    }\n\n    getBarStyles() {\n        const { bar } = this;\n\n        return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n    }\n\n    handleClick = (event: MouseEvent) => {\n        if (this.url) return true;\n        event.preventDefault();\n        event.stopPropagation();\n        this.click.emit();\n    };\n\n    isBarColorPredefined() {\n        return PREDEFINED_COLORS.includes(this.bar);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { url, isStatic, type } = this;\n        if (isStatic || type === 'non-clickable')\n            return (\n                <div\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                >\n                    {this.generateContent()}\n                </div>\n            );\n        else if (!!url)\n            return (\n                <a\n                    ref={e => (this.clickableElement = e)}\n                    href={this.url}\n                    class={this.generateContainerClasses()}\n                    target={this.target}\n                    rel=\"noopener noreferrer\"\n                    test-id=\"clickableElement\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </a>\n            );\n        else\n            return (\n                <button\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                    type=\"button\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </button>\n            );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2CardCss","Q2CardStyle0","PREDEFINED_COLORS","Q2Card","this","handleClick","event","url","preventDefault","stopPropagation","click","emit","isTouchDevice","disconnectedCallback","_a","resizeObserver","disconnect","componentDidLoad","hostElement","clickableElement","overrideFocus","ResizeObserver","determineAutoSmall","observe","onHostElementFocus","isEventFromElement","focus","isStatic","hasAttribute","containerElement","avatarElement","avatarWidth","offsetWidth","containerWidth","_b","totalWidth","isAutoSmall","determineAutoTouch","isAutoTouch","generateAvatar","avatarName","avatarInitials","avatarSrc","avatarIcon","h","type","ref","e","name","initials","src","generateContainerClasses","isSmall","isTouch","result","showSmall","showTouch","hasAvatar","push","join","generateContent","Fragment","bar","class","getBarClasses","style","getBarStyles","title","description","isBarColorPredefined","includes","render","href","target","rel","onClick"],"sources":["src/components/q2-card/q2-card.scss?tag=q2-card&encapsulation=shadow","src/components/q2-card/q2-card.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.container {\n    position: relative;\n    width: 100%;\n    text-align: start;\n    height: var-list(--tct-card-height, 100%);\n    min-height: var-list(--tct-card-min-height, auto);\n    display: grid;\n    gap: var-list(var-prefixer(card-gap), --app-scale-3x, 15px);\n    margin: 0;\n    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n\n    --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 44px)};\n    --comp-chevron-size: 0;\n    --comp-bar-width: #{var-list(var-prefixer(card-bar-width), --app-scale-2x, 10px)};\n    --comp-card-padding: #{var-list(var-prefixer(card-padding), --app-scale-4x, 20px)};\n\n    &.is-small {\n        --comp-avatar-size: #{var-list(var-prefixer(card-avatar-size), 26px)};\n    }\n    &.has-avatar {\n        grid-template-columns: var(--comp-avatar-size) 1fr;\n        --tct-avatar-width: var(--comp-avatar-size);\n        --tct-avatar-height: var(--comp-avatar-size);\n        --tct-icon-size: var(--comp-avatar-size);\n    }\n\n    :host([bar][is-static]) & {\n        padding-left: var(--comp-card-padding);\n    }\n\n    :host(:not([is-static])) & {\n        --comp-border-radius: #{var-list(var-prefixer(card-border-radius), --app-border-radius-1, 4px)};\n        --comp-border-width: #{var-list(var-prefixer(card-border-width), 0px)};\n        border: none;\n        background: var-list(var-prefixer(card-background), --t-base, #ffffff);\n        padding: var(--comp-card-padding);\n        text-decoration: none;\n        border-width: var(--comp-border-width);\n        border-color: var-list(var-prefixer(card-border-color), transparent);\n        border-style: var-list(--tct-card-border-style, solid);\n        border-radius: var(--comp-border-radius);\n        transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        box-shadow: var-list(var-prefixer(card-box-shadow), --app-shadow-2, unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)\"));\n\n        &.clickable {\n            cursor: pointer;\n            @media (hover: hover) {\n                --comp-card-hover-box-shadow: #{var-list(\n                        var-prefixer(card-hover-box-shadow),\n                        --app-shadow-3,\n                        unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)\")\n                    )};\n\n                &:hover,\n                &:active,\n                &:focus {\n                    color: var-list(var-prefixer(card-color), --t-text, #4d4d4d);\n                    box-shadow: var(--const-double-focus-ring);\n                }\n\n                &:hover {\n                    box-shadow: var(--comp-card-hover-box-shadow);\n                }\n\n                &:focus:hover {\n                    box-shadow: var(--const-double-focus-ring), var(--comp-card-hover-box-shadow);\n                }\n\n                &:active {\n                    box-shadow: var-list(\n                        var-prefixer(card-active-box-shadow),\n                        --app-shadow-1,\n                        unquote(\"0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)\")\n                    );\n                }\n            }\n        }\n\n        &.is-touch {\n            --comp-chevron-size: #{var-list(var-prefixer(card-chevron-size), 26px)};\n            grid-template-columns: 1fr var(--comp-chevron-size);\n        }\n\n        &.has-avatar.is-touch {\n            grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);\n        }\n    }\n}\n\n.content {\n    overflow: hidden;\n    display: grid;\n    gap: var-list(var-prefixer(card-content-gap), --app-scale-1x, 5px);\n    align-content: start;\n}\n\nh3,\np {\n    margin: 0;\n    padding: 0;\n    line-height: var-list(var-prefixer(card-font-height), 20px);\n}\n\nh3 {\n    font-weight: var-list(var-prefixer(card-font-weight), 600);\n    font-size: var-list(var-prefixer(card-font-size), 17px);\n    @include line-clamp(var(--tct-card-title-line-count, 1));\n}\n\np {\n    @include line-clamp(var(--tct-card-description-line-count, 2));\n}\n\n.bar {\n    --comp-bar-border-radius: calc(var(--comp-border-radius) - var(--comp-border-width));\n    border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);\n    position: absolute;\n    inset: 0 auto auto 0;\n    width: var(--comp-bar-width);\n    background: var(--comp-bar-color);\n    height: 100%;\n\n    &.color-primary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-primary, --t-primary, #5446a4)};\n    }\n\n    &.color-secondary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-secondary, --t-secondary, #b6b3cc)};\n    }\n\n    &.color-tertiary {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-tertiary, --t-tertiary, #ebe8fc)};\n    }\n\n    &.color-info {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-info, --const-stoplight-info, #0079c1)};\n    }\n\n    &.color-success {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-success, --const-stoplight-success, #0e8a00)};\n    }\n\n    &.color-warning {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-warning, --const-stoplight-warning, #c35500)};\n    }\n\n    &.color-alert {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-alert, --const-stoplight-alert, #c35500)};\n    }\n\n    &.color-accent-1 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-1, --t-accent-1, #e05252)};\n    }\n\n    &.color-accent-2 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-2, --t-accent-2, #e09952)};\n    }\n\n    &.color-accent-3 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-3, --t-accent-3, #e0e052)};\n    }\n\n    &.color-accent-4 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-4, --t-accent-4, #99e052)};\n    }\n\n    &.color-accent-5 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-5, --t-accent-5, #52e052)};\n    }\n\n    &.color-accent-6 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-6, --t-accent-6, #52e099)};\n    }\n\n    &.color-accent-7 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-7, --t-accent-7, #52e0e0)};\n    }\n\n    &.color-accent-8 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-8, --t-accent-8, #5299e0)};\n    }\n\n    &.color-accent-9 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-9, --t-accent-9, #5252e0)};\n    }\n\n    &.color-accent-10 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-10, --t-accent-10, #9952e0)};\n    }\n\n    &.color-accent-11 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-11, --t-accent-11, #e052e0)};\n    }\n\n    &.color-accent-12 {\n        --comp-bar-color: #{var-list(--tct-card-bar-color-accent-12, --t-accent-12, #e05299)};\n    }\n}\n\n.touch-indicator {\n    align-self: center;\n    --tct-icon-size: var(--comp-chevron-size);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Event,\n    h,\n    Fragment,\n    Listen,\n    Element,\n    EventEmitter,\n    State,\n} from '@stencil/core';\nimport { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';\nconst PREDEFINED_COLORS = [\n    'primary',\n    'secondary',\n    'tertiary',\n    'info',\n    'success',\n    'warning',\n    'alert',\n    'accent-1',\n    'accent-2',\n    'accent-3',\n    'accent-4',\n    'accent-5',\n    'accent-6',\n    'accent-7',\n    'accent-8',\n    'accent-9',\n    'accent-10',\n    'accent-11',\n    'accent-12',\n];\n\n@Component({ tag: 'q2-card', shadow: true, styleUrl: 'q2-card.scss' })\nexport class Q2Card implements ComponentInterface {\n    // #region Own Properties\n\n    avatarElement: HTMLElement;\n    clickableElement: HTMLElement;\n    containerElement: HTMLElement;\n    resizeObserver: ResizeObserver;\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    isAutoSmall: boolean = false;\n\n    @State()\n    isAutoTouch: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to be displayed in the avatar location. */\n    @Prop({ reflect: true })\n    avatarIcon: string;\n\n    /** The initials to be placed in the avatar of the card. */\n    @Prop({ reflect: true })\n    avatarInitials: string;\n\n    /** The name to be used for the avatar of the card which will be converted to initials. */\n    @Prop({ reflect: true })\n    avatarName: string;\n\n    /** The source of the image to be displayed in the avatar location. */\n    @Prop({ reflect: true })\n    avatarSrc: string;\n\n    /**\n     * Indicates that a bar should be displayed and which color to use. Predefined colors that may be used as values are:\n     *\n     * - primary\n     * - secondary\n     * - tertiary\n     * - info\n     * - success\n     * - warning\n     * - alert\n     * - accent-1\n     * - accent-2\n     * - accent-3\n     * - accent-4\n     * - accent-5\n     * - accent-6\n     * - accent-7\n     * - accent-8\n     * - accent-9\n     * - accent-10\n     * - accent-11\n     * - accent-12\n     *\n     * Any other value (e.g. `\"#990000\"`, `\"purple\"`) will be treated as a custom color.\n     */\n    @Prop({ reflect: true })\n    bar: string;\n\n    /** The description of the card (truncated after two lines). */\n    @Prop({ reflect: true })\n    description: string;\n\n    /**\n     * Display the card with a view optimized for smaller displays.\n     *\n     * @info\n     * This will be determined automatically if the attribute is not manually provided.\n     */\n    @Prop({ reflect: true })\n    isSmall: boolean;\n\n    /** Display the card with no borders, padding, drop-shadows, or clickable behavior. */\n    @Prop({ reflect: true })\n    isStatic: boolean;\n\n    /**\n     * Display the card with a view optimized for touch displays.\n     *\n     * @info\n     * This will be determined automatically if the attribute is not manually provided.\n     */\n    @Prop({ reflect: true })\n    isTouch: boolean = isTouchDevice();\n\n    /** Target to be applied to the link when a URL is provided. */\n    @Prop({ reflect: true })\n    target: '_self' | '_blank' | '_parent' | '_top';\n\n    /** The title of the card. */\n    @Prop({ reflect: true })\n    title: string;\n\n    /** Alters the interactive behavior of the card while maintaining visual appearance. */\n    @Prop({ reflect: true })\n    type: 'clickable' | 'non-clickable' = 'clickable';\n\n    /** URL to navigate the user to when the card is clicked. */\n    @Prop({ reflect: true })\n    url: string;\n\n    // #endregion\n    // #region Events\n\n    /** Emitted when the card is clicked and the `url` property is not provided. */\n    @Event()\n    click: EventEmitter<undefined>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n    }\n\n    componentDidLoad() {\n        const { hostElement, clickableElement } = this;\n        hostElement.click = () => clickableElement.click();\n        overrideFocus(this.hostElement);\n\n        this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());\n        this.resizeObserver.observe(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.clickableElement.focus();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    determineAutoSmall() {\n        if (this.isStatic) return;\n        if (this.hostElement.hasAttribute('is-small')) return;\n        const { containerElement, avatarElement } = this;\n        const avatarWidth = avatarElement?.offsetWidth ?? 0;\n        const containerWidth = containerElement?.offsetWidth ?? 0;\n        const totalWidth = avatarWidth + containerWidth;\n        this.isAutoSmall = totalWidth < 350;\n    }\n\n    determineAutoTouch() {\n        if (this.hostElement.hasAttribute('is-touch')) return;\n        this.isAutoTouch = isTouchDevice();\n    }\n\n    generateAvatar() {\n        const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;\n\n        if (avatarIcon) {\n            return (\n                <q2-icon\n                    type={avatarIcon}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-icon>\n            );\n        } else if (avatarName || avatarInitials || avatarSrc) {\n            return (\n                <q2-avatar\n                    name={avatarName}\n                    initials={avatarInitials}\n                    src={avatarSrc}\n                    ref={e => (this.avatarElement = e)}\n                    test-id=\"avatar\"\n                ></q2-avatar>\n            );\n        }\n    }\n\n    generateContainerClasses() {\n        const {\n            isSmall,\n            isAutoSmall,\n            avatarName,\n            avatarInitials,\n            avatarSrc,\n            avatarIcon,\n            isTouch,\n            isAutoTouch,\n            isStatic,\n            type,\n        } = this;\n        const result = ['container', type];\n        const showSmall = isSmall || isAutoSmall;\n        const showTouch = isTouch || isAutoTouch;\n        const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;\n        if (showSmall) result.push('is-small');\n        if (showTouch && !isStatic) result.push('is-touch');\n        if (hasAvatar) result.push('has-avatar');\n        if (isStatic) result.push('is-static');\n\n        return result.join(' ');\n    }\n\n    generateContent() {\n        return (\n            <Fragment>\n                {this.bar && (\n                    <div\n                        class={this.getBarClasses()}\n                        test-id=\"bar\"\n                        style={this.getBarStyles()}\n                    ></div>\n                )}\n                {this.generateAvatar()}\n                <div\n                    class=\"content\"\n                    test-id=\"contentContainer\"\n                    ref={e => (this.containerElement = e)}\n                >\n                    {this.title && <h3 test-id=\"title\">{this.title}</h3>}\n                    {this.description && <p test-id=\"description\">{this.description}</p>}\n                    <slot />\n                </div>\n                {this.isTouch && !this.isStatic && (\n                    <q2-icon\n                        test-id=\"touchIndicator\"\n                        type=\"chevron-right\"\n                        class=\"touch-indicator\"\n                    ></q2-icon>\n                )}\n            </Fragment>\n        );\n    }\n\n    getBarClasses() {\n        const { bar } = this;\n\n        return {\n            bar: true,\n            [`color-${bar}`]: this.isBarColorPredefined(),\n        };\n    }\n\n    getBarStyles() {\n        const { bar } = this;\n\n        return this.isBarColorPredefined() ? {} : { '--comp-bar-color': bar };\n    }\n\n    handleClick = (event: MouseEvent) => {\n        if (this.url) return true;\n        event.preventDefault();\n        event.stopPropagation();\n        this.click.emit();\n    };\n\n    isBarColorPredefined() {\n        return PREDEFINED_COLORS.includes(this.bar);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { url, isStatic, type } = this;\n        if (isStatic || type === 'non-clickable')\n            return (\n                <div\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                >\n                    {this.generateContent()}\n                </div>\n            );\n        else if (!!url)\n            return (\n                <a\n                    ref={e => (this.clickableElement = e)}\n                    href={this.url}\n                    class={this.generateContainerClasses()}\n                    target={this.target}\n                    rel=\"noopener noreferrer\"\n                    test-id=\"clickableElement\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </a>\n            );\n        else\n            return (\n                <button\n                    ref={e => (this.clickableElement = e)}\n                    class={this.generateContainerClasses()}\n                    test-id=\"clickableElement\"\n                    type=\"button\"\n                    onClick={this.handleClick}\n                >\n                    {this.generateContent()}\n                </button>\n            );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAY;;AAClB,MAAAC,IAAeD;;ACYf,MAAME,IAAoB,EACtB,WACA,aACA,YACA,QACA,WACA,WACA,SACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,aACA,aACA;;MAISC,IAAM;;;;IAkQfC,KAAAC,cAAeC;MACX,IAAIF,KAAKG,KAAK,OAAO;MACrBD,EAAME;MACNF,EAAMG;MACNL,KAAKM,MAAMC;AAAM;uBApPE;uBAGA;;;;;;;;;mBAyEJC;;;gBAYmB;;;;;EAgBtC,oBAAAC;;KACIC,IAAAV,KAAKW,oBAAc,QAAAD,WAAA,aAAAA,EAAEE;IACrBZ,KAAKW,iBAAiB;;EAG1B,gBAAAE;IACI,OAAMC,aAAEA,GAAWC,kBAAEA,KAAqBf;IAC1Cc,EAAYR,QAAQ,MAAMS,EAAiBT;IAC3CU,EAAchB,KAAKc;IAEnBd,KAAKW,iBAAiB,IAAIM,gBAAe,MAAMjB,KAAKkB;IACpDlB,KAAKW,eAAeQ,QAAQnB,KAAKc;;;;EAOrC,kBAAAM,CAAmBlB;IACf,KAAKmB,EAAmBnB,GAAOF,KAAKc,cAAc;IAClDd,KAAKe,iBAAiBO;;;;EAM1B,kBAAAJ;;IACI,IAAIlB,KAAKuB,UAAU;IACnB,IAAIvB,KAAKc,YAAYU,aAAa,aAAa;IAC/C,OAAMC,kBAAEA,GAAgBC,eAAEA,KAAkB1B;IAC5C,MAAM2B,KAAcjB,IAAAgB,MAAa,QAAbA,WAAa,aAAbA,EAAeE,iBAAW,QAAAlB,WAAA,IAAAA,IAAI;IAClD,MAAMmB,KAAiBC,IAAAL,MAAgB,QAAhBA,WAAgB,aAAhBA,EAAkBG,iBAAW,QAAAE,WAAA,IAAAA,IAAI;IACxD,MAAMC,IAAaJ,IAAcE;IACjC7B,KAAKgC,cAAcD,IAAa;;EAGpC,kBAAAE;IACI,IAAIjC,KAAKc,YAAYU,aAAa,aAAa;IAC/CxB,KAAKkC,cAAc1B;;EAGvB,cAAA2B;IACI,OAAMC,YAAEA,GAAUC,gBAAEA,GAAcC,WAAEA,GAASC,YAAEA,KAAevC;IAE9D,IAAIuC,GAAY;MACZ,OACIC,EAAA;QACIC,MAAMF;QACNG,KAAKC,KAAM3C,KAAK0B,gBAAgBiB;QAAE,WAC1B;;WAGb,IAAIP,KAAcC,KAAkBC,GAAW;MAClD,OACIE,EAAA;QACII,MAAMR;QACNS,UAAUR;QACVS,KAAKR;QACLI,KAAKC,KAAM3C,KAAK0B,gBAAgBiB;QAAE,WAC1B;;;;EAMxB,wBAAAI;IACI,OAAMC,SACFA,GAAOhB,aACPA,GAAWI,YACXA,GAAUC,gBACVA,GAAcC,WACdA,GAASC,YACTA,GAAUU,SACVA,GAAOf,aACPA,GAAWX,UACXA,GAAQkB,MACRA,KACAzC;IACJ,MAAMkD,IAAS,EAAC,aAAaT;IAC7B,MAAMU,IAAYH,KAAWhB;IAC7B,MAAMoB,IAAYH,KAAWf;IAC7B,MAAMmB,IAAYjB,KAAcC,KAAkBC,KAAaC;IAC/D,IAAIY,GAAWD,EAAOI,KAAK;IAC3B,IAAIF,MAAc7B,GAAU2B,EAAOI,KAAK;IACxC,IAAID,GAAWH,EAAOI,KAAK;IAC3B,IAAI/B,GAAU2B,EAAOI,KAAK;IAE1B,OAAOJ,EAAOK,KAAK;;EAGvB,eAAAC;IACI,OACIhB,EAACiB,GAAQ,MACJzD,KAAK0D,OACFlB,EAAA;MACImB,OAAO3D,KAAK4D;MAAe,WACnB;MACRC,OAAO7D,KAAK8D;QAGnB9D,KAAKmC,kBACNK,EAAA;MACImB,OAAM;MAAS,WACP;MACRjB,KAAKC,KAAM3C,KAAKyB,mBAAmBkB;OAElC3C,KAAK+D,SAASvB,EAAA;MAAA,WAAY;OAASxC,KAAK+D,QACxC/D,KAAKgE,eAAexB,EAAA;MAAA,WAAW;OAAexC,KAAKgE,cACpDxB,EAAA,gBAEHxC,KAAKiD,YAAYjD,KAAKuB,YACnBiB,EAAA;MAAA,WACY;MACRC,MAAK;MACLkB,OAAM;;;EAO1B,aAAAC;IACI,OAAMF,KAAEA,KAAQ1D;IAEhB,OAAO;MACH0D,KAAK;MACL,CAAC,SAASA,MAAQ1D,KAAKiE;;;EAI/B,YAAAH;IACI,OAAMJ,KAAEA,KAAQ1D;IAEhB,OAAOA,KAAKiE,yBAAyB,KAAK;MAAE,oBAAoBP;;;EAUpE,oBAAAO;IACI,OAAOnE,EAAkBoE,SAASlE,KAAK0D;;;;EAM3C,MAAAS;IACI,OAAMhE,KAAEA,GAAGoB,UAAEA,GAAQkB,MAAEA,KAASzC;IAChC,IAAIuB,KAAYkB,MAAS,iBACrB,OACID,EAAA;MACIE,KAAKC,KAAM3C,KAAKe,mBAAmB4B;MACnCgB,OAAO3D,KAAK+C;MAA0B,WAC9B;OAEP/C,KAAKwD,yBAGb,MAAMrD,GACP,OACIqC,EAAA;MACIE,KAAKC,KAAM3C,KAAKe,mBAAmB4B;MACnCyB,MAAMpE,KAAKG;MACXwD,OAAO3D,KAAK+C;MACZsB,QAAQrE,KAAKqE;MACbC,KAAI;MAAqB,WACjB;MACRC,SAASvE,KAAKC;OAEbD,KAAKwD,yBAId,OACIhB,EAAA;MACIE,KAAKC,KAAM3C,KAAKe,mBAAmB4B;MACnCgB,OAAO3D,KAAK+C;MAA0B,WAC9B;MACRN,MAAK;MACL8B,SAASvE,KAAKC;OAEbD,KAAKwD"}

package/dist/q2-tecton-elements/q2-carousel-pane.entry.js

@@ -1,6 +1,6 @@
 import { r as e, c as a, h as t, H as r, g as o } from "./index-7a5365e2.js";
 
-import { l as n } from "./index-f2a66217.js";
+import { l as n } from "./index-c215e8ef.js";
 
 const s = "*{box-sizing:border-box}*:active{outline:none}*:focus{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}q2-carousel .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel-pane.q2-carousel-pane{--comp-carousel-pane-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-carousel-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) *{cursor:pointer}q2-carousel-pane.q2-carousel-pane:focus{box-shadow:none}q2-carousel-pane.q2-carousel-pane:focus .q2-carousel-pane-main-content{outline:none;box-shadow:var(--const-double-focus-ring)}q2-carousel-pane.q2-carousel-pane button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}q2-carousel-pane.q2-carousel-pane button:hover{opacity:0.7}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--comp-carousel-shadow);transition:var(--comp-carousel-pane-tween);background:var(--tct-carousel-background, var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 0px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 7px));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content:hover{box-shadow:var(--const-double-focus-ring), var(--comp-carousel-shadow)}q2-carousel-pane.q2-carousel-pane[slot-frameless]:not([slot-frameless=false]) .q2-carousel-pane-main-content{box-shadow:none;border:0;border-radius:0;padding:0}";
 
@@ -99,7 +99,7 @@ const c = class {
   render() {
     const {label: e} = this;
     return t(r, {
-      key: "d7aec99a66061fe4b10e7a27b776fd2217f99a59",
+      key: "6bbb70ebc178e351702b79ab12050c84998e4c9e",
       class: this.generatePaneClass(this.currentPaneIndex),
       tabIndex: this.isActivePane ? 0 : -1,
       role: "group",
@@ -108,10 +108,10 @@ const c = class {
       "aria-label": e ? n(e) : n("tecton.element.carousel.itemDescription", [ (this.currentPaneIndex + 1).toString(), (this.siblingCount || 0).toString() ]),
       onClick: this.paneClicked
     }, t("article", {
-      key: "a86077038f620f9a04dbd2f588ad58d696229271",
+      key: "08e793a4e7a20ab397a41afd7d493c33d0d1c2ff",
       class: "q2-carousel-pane-main-content"
     }, t("slot", {
-      key: "12f82035ff518babb548e5a3c3421c1d7dd95006"
+      key: "041dd958e7027ed0a99a48b960a0e9655791dd96"
     })));
   }
   get hostElement() {

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

@@ -1,6 +1,6 @@
 import { r as e, c as t, h as i, F as n, H as s, g as r } from "./index-7a5365e2.js";
 
-import { c as o, l as a, a as l, o as c, i as f } from "./index-f2a66217.js";
+import { c as o, l as a, a as l, o as c, i as f } from "./index-c215e8ef.js";
 
 /**
  * SSR Window 4.0.2
@@ -4572,7 +4572,7 @@ const F = 500;
     let g = [ "q2-carousel-pagination-navigation-wrapper" ];
     if (l) g = [ ...g, "evenly-space" ];
     return i(s, {
-      key: "6a99de530270464ec3eac1a5648ca89f486a1462",
+      key: "9702cfe13d0b8104745312e028779aefa5ce3057",
       id: `q2-carousel-${this.guid}`,
       class: "q2-carousel-instance"
     }, c ? this.renderInsufficientPanesDisplay() : i(n, null, e > 1 && i("div", {

package/dist/q2-tecton-elements/q2-chart-area.entry.js

@@ -1,6 +1,6 @@
 import { r, c as a, h as t, g as e } from "./index-7a5365e2.js";
 
-import { o as i, l as n } from "./index-f2a66217.js";
+import { o as i, l as n } from "./index-c215e8ef.js";
 
 import { _ as o, c as s, e as v, l as f, u, s as l, i as h, g as d, n as c, Z as p, a as m, b as y, t as b, d as S, r as g, f as P, G as w, h as M, j as I, S as D, m as L, k as x, o as N, p as T, q as k, P as C, v as A, w as E, x as O, y as B, z as F, A as z, C as G, B as U, D as V, E as R, F as q, H as K, I as j, L as _, J as Z, K as $, M as X, N as Y, O as H, Q as J, R as W, T as Q, U as rr, V as ar, W as tr, X as er, Y as ir, $ as nr, a0 as or, a1 as sr, a2 as vr, a3 as fr, a4 as ur, a5 as lr, a6 as hr, a7 as dr, a8 as cr, a9 as pr, aa as mr, ab as yr, ac as br, ad as Sr, ae as gr, af as Pr } from "./charting-1abfb877.js";
 
@@ -4284,10 +4284,10 @@ const aa = class {
   // #region Render Methods
   render() {
     return t("div", {
-      key: "74826328108685d56456624ee97ebcfb2b76a2c7",
+      key: "e0eaa73cf897de8c1e5bb0647a648e3cea6dcfc4",
       class: "container"
     }, t("div", {
-      key: "303b2046ca5b453257276c2e8e23f36aa0123a7c",
+      key: "deb131339361a78cca8976d2737cba485f9e4ad2",
       ref: r => this.chartContainer = r,
       class: "chart-container",
       role: "img",

package/dist/q2-tecton-elements/q2-chart-bar.entry.js

@@ -1,6 +1,6 @@
 import { r as e, h as r, g as a } from "./index-7a5365e2.js";
 
-import { o as t, l as i } from "./index-f2a66217.js";
+import { o as t, l as i } from "./index-c215e8ef.js";
 
 import { _ as s, I as n, S as o, b6 as h, P as u, b7 as l, o as c, a0 as d, h as f, i as v, u as p, s as g, H as b, b8 as m, G as w, m as S, d as B, C as A, W as y, a as x, g as M, b as k, b9 as P, t as V, z as C, ba as N, V as L, ai as D, bb as z, bc as j, a9 as U, aa as T, ab as I, ac as O, ad as R, ae as E, af as W } from "./charting-1abfb877.js";
 
@@ -1439,10 +1439,10 @@ const Se = class {
   // #region Render Methods
   render() {
     return r("div", {
-      key: "3369c851ab7176a66a12694c94306780d621d764",
+      key: "9d26c68727816cf46614fc2d1f59e59866b1eed3",
       class: "container"
     }, r("div", {
-      key: "e5a7f8e937704c9bdbc631c2151f0bd7a685155c",
+      key: "cf6809c45130b33ea2ebaa8d18654d9e02e0fc76",
       ref: e => this.chartContainer = e,
       class: "chart-container",
       role: "img",

package/dist/q2-tecton-elements/q2-chart-donut.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as i, g as r } from "./index-7a5365e2.js";
 
-import { o as a, i as n, l as o, d as s } from "./index-f2a66217.js";
+import { o as a, i as n, l as o, d as s } from "./index-c215e8ef.js";
 
 import { br as l, W as c, _ as h, ay as u, bs as v, bt as d, b5 as f, bu as p, D as g, bv as m, x as b, a0 as w, I as y, bw as x, aM as S, bx as T, by as M, j as L, bz as C, E as I, bA as A, bB as P, bC as k, bD as V, d as D, bE as z, bF as O, bG as N, bH as R, bI as B, bJ as H, bK as W, bL as U, a as F, bM as j, bN as $, bO as X, bP as G, bQ as Y, bj as E, aK as _, bR as K, a$ as q, bS as J, bT as Z, bU as Q, a9 as tt, b0 as et, bV as it, aA as rt, bW as at, a4 as nt, m as ot, a6 as st, o as lt, y as ct, bX as ht, bY as ut, b as vt, bZ as dt, b2 as ft, b_ as pt, b$ as gt, c0 as mt, c as bt, ai as wt, G as yt, aB as xt, b6 as St, aC as Tt, c1 as Mt, b1 as Lt, u as Ct, c2 as It, aw as At, a3 as Pt, R as kt, bm as Vt, i as Dt, s as zt, z as Ot, t as Nt, g as Rt, be as Bt, c3 as Ht, V as Wt, b8 as Ut, C as Ft, ak as jt, am as $t, c4 as Xt, c5 as Gt, c6 as Yt, S as Et, c7 as _t, ab as Kt, aa as qt, ac as Jt, ad as Zt } from "./charting-1abfb877.js";
 
@@ -4483,15 +4483,15 @@ const Ee = class {
   }
   render() {
     return i("click-elsewhere", {
-      key: "709c089a4d95f95c640c3ebf29332c0715240150",
+      key: "3d18832c2e83de45c3d6d3334aea24c9766b1f58",
       onChange: this.onClickElsewhere
     }, i("figure", {
-      key: "7ed5b5f40d05cb432d92be4864de399a90639934"
+      key: "4608be26e3d64a551e8c1c5cca4202254d67c9e9"
     }, i("div", {
-      key: "8ee828d53be204a1af25475f50c8d8ba602d5b9d",
+      key: "6a38081d203e899ffdc5b4a653bc2c1910c7d659",
       class: "container"
     }, i("div", {
-      key: "28a8fd99895c1d8dfbfb5921b38f895118a5e9fa",
+      key: "5a178c6445cc16594141dcbfd45d27b1da2e9671",
       ref: t => this.chartContainer = t,
       "aria-describedby": !this.isClickable ? "center-card-description" : undefined,
       class: "chart-container",
@@ -4501,9 +4501,9 @@ const Ee = class {
       tabIndex: !this.isClickable ? 0 : undefined,
       onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined
     }), this.renderCenterBlock()), this.showLegend && i("figcaption", {
-      key: "fd8aa14f4143013f0f0c21a843a39445477327b7"
+      key: "a693203a46b943ad7d11ccf348b8f5a8c65ef760"
     }, i("q2-legend", {
-      key: "29b3b167b600b73034660e52c07a3582ffb50d4e",
+      key: "060b76987bb07d35eb41b7c8b822b0114d708b01",
       class: "legend",
       data: this.legendData,
       format: this.format,

package/dist/q2-tecton-elements/q2-checkbox-group.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as r, F as o, g as i } from "./index-7a5365e2.js";
 
-import { c as a, f as s } from "./index-f2a66217.js";
+import { c as a, f as s } from "./index-c215e8ef.js";
 
 const n = '*{box-sizing:border-box}*:active{outline:none}*:focus{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{--comp-default-checkbox-group-margin:var(--tct-checkbox-group-margin-top, var(--t-checkbox-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-checkbox-group-margin-bottom, var(--t-checkbox-group-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-checkbox-group-margin, var(--comp-default-checkbox-group-margin))}fieldset{padding:var(--tct-checkbox-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:"label icon";column-gap:var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px))}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.slot-container{margin:var(--app-scale-1x, 5px) 0;padding:var(--app-scale-1x, 5px);border-width:1px;border-color:transparent;border-style:solid;border-radius:var(--tct-checkbox-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .slot-container{border-color:var(--tct-checkbox-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .slot-container{border-color:transparent}.optional-tag{margin-left:var(--tct-checkbox-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-checkbox-group-label-optional-color, var(--t-checkbox-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-checkbox-group-label-optional-font-size, 12px);font-weight:var(--tct-checkbox-group-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}';
 
@@ -128,23 +128,23 @@ const d = class {
     const t = this.label || this.optional || this.readonly;
     const e = t && !this.hideLabel || this.hasError;
     return r(o, {
-      key: "00973c7d6eeb78790062adc0829cb6c460ecd1cb"
+      key: "3f4b8e424ccc5b26c36ea7e9b6667717eb29cefa"
     }, e && r("div", {
-      key: "5f93745ca8658ce5b582f617030b1ba4e4297ffa",
+      key: "54720ecb444c3bd5acc66210d4a6b9a84dfeb2e4",
       class: "label-row"
     }, t && !this.hideLabel && r("div", {
-      key: "2310f38bfbb04b56182e94e1d475b148fbc9ce93",
+      key: "9c28cc5c09c498af64ed9a10e13318c9266c7cc1",
       class: "group-legend"
     }, s(this)), this.hasError && r("q2-icon", {
-      key: "b226ad6a97bf3443fd871614cf4995397c128f7f",
+      key: "6d82ea53d7a8e7993b2494281ba2bb87fd1fcfb4",
       type: "error",
       "test-id": "iconError"
     })), r("fieldset", {
-      key: "f51586e2b2a589e7ad15cb2d50a9cfd3dd380450",
+      key: "31b7e3a9b3df1c8804609f40a0bbc498c7c98755",
       onChange: this.onInnerCheckboxChange,
       "aria-invalid": this.hasError ? `${this.hasError}` : undefined
     }, t && r("legend", {
-      key: "46fb67c964042825fefabdcff5c7fbc8deb0c2a8",
+      key: "d76d87da51444be5b57b9f1197f15264583ba0a7",
       class: "sr-only"
     }, s(this)), this.inputDom()));
   }

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

@@ -1,12 +1,12 @@
 import { r as e, c as o, h as t, g as c } from "./index-7a5365e2.js";
 
-import { c as r, a, o as i, i as s, l } from "./index-f2a66217.js";
+import { c as r, a, o as i, i as s, l } from "./index-c215e8ef.js";
 
-const h = '*{box-sizing:border-box}*:active{outline:none}*:focus{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{--comp-checkbox-padding:var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);display:block;position:relative;padding:var(--comp-checkbox-padding);--comp-default-checkbox-margin:var(--tct-checkbox-margin-top, var(--t-checkbox-margin-top, 0px)) 0 var(--tct-checkbox-margin-bottom, var(--t-checkbox-margin-bottom, 0px));margin:var(--tct-checkbox-margin, var(--comp-default-checkbox-margin))}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 38px));--comp-checkbox-toggle-error-color:var(--tct-checkbox-toggle-error-color, var(--comp-checkbox-error-color));--comp-checkbox-toggle-color:var(--tct-checkbox-toggle-color, var(--t-gray-8, #808080));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);--comp-checkbox-error-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));display:grid;grid-template-areas:"svg label" "svg description";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([hide-label]:not([hide-label=false])) .container{grid-template-areas:"svg";grid-template-columns:var(--comp-control-width)}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:"label svg" "description svg";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label;font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400))}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]:not([checked=false])) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}:host(:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host(:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host([description]:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):hover) .label-text{font-weight:var(--tct-checkbox-checked-hover-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}:host([description]:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):focus-within) .label-text{font-weight:var(--tct-checkbox-checked-focused-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}:host(:hover) .description-text{font-weight:var(--tct-checkbox-hover-description-font-weight, var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400)))}label{color:var(--tct-checkbox-label-color);cursor:pointer;hyphens:var(--tct-checkbox-label-hyphens, auto);word-break:var(--tct-checkbox-label-word-break, break-word);word-wrap:var(--tct-checkbox-label-word-wrap, break-word)}.checkbox-icon{width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));stroke:var(--comp-checkbox-outer-stroke-color);fill:var(--comp-checkbox-outer-fill-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));flex-shrink:0}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)))}:host([has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));fill:var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-error-box-shadow)}:host(:hover:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));fill:var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-hover-box-shadow)}:host(:hover[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-hover-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow)))}:host(:focus-within:not([type=favorite])) .checkbox-icon{--comp-checkbox-focused-box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)));fill:var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--comp-checkbox-focused-box-shadow)}:host(:focus-within[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-focused-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-focused-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-focused-box-shadow, var(--tct-checkbox-error-box-shadow, var(--comp-checkbox-focused-box-shadow)))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host(:hover[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));fill:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked]:not([checked=false])[type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-hover-stroke-color, var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-fill-primary:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-focused-stroke-color, var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}:host([has-error][type=favorite][checked]:not([checked=false])) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}.checkbox-fill{stroke:var(--tct-checkbox-checkmark-stroke-color, var(--comp-checkbox-checked-color));stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg-container{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-indicator,.toggle-track{position:absolute;top:50%;transform:translateY(-50%)}.toggle-indicator{transition:left var(--comp-checkbox-tween), height var(--comp-checkbox-tween), width var(--comp-checkbox-tween);height:16px;width:16px;left:4px;border-radius:50%}.toggle-track{height:24px;width:38px;fill:transparent;border-radius:var(--app-border-radius-3, 12px);box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-color);transition:fill var(--comp-checkbox-tween), box-shadow var(--comp-checkbox-tween)}.toggle-circle{mask:url(#xMask);fill:var(--comp-checkbox-toggle-color);transition:fill var(--comp-checkbox-tween)}.toggle-icon{stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--tct-checkbox-toggle-icon-stroke-width, 2);stroke:black}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-color)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-hover-circle-color, var(--t-primary-d1, var(--t-gray-6, #4d4d4d)))}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-active-color, var(--t-primary-l1, #7755af))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-track{box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-circle{fill:var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-error-hover-color, var(--comp-checkbox-toggle-error-color))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-error-active-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-track-color, var(--t-primary, #6a4a9e));border:none}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) .toggle-indicator{left:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) .toggle-circle{mask:url(#checkMask);fill:var(--tct-checkbox-toggle-checked-circle-color, var(--t-base, #ffffff))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-hover-track-color, var(--t-primary-d1, #5f438e))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-active-track-color, var(--t-primary-l1, #7755af))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-hover-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-active-track-color, var(--comp-checkbox-toggle-error-color))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))){cursor:not-allowed;opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))) label{cursor:not-allowed}';
+const h = '*{box-sizing:border-box}*:active{outline:none}*:focus{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{--comp-checkbox-padding:var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, 8px)) 0);display:block;position:relative;padding:var(--comp-checkbox-padding);--comp-default-checkbox-margin:var(--tct-checkbox-margin-top, var(--t-checkbox-margin-top, 0px)) 0 var(--tct-checkbox-margin-bottom, var(--t-checkbox-margin-bottom, 0px));margin:var(--tct-checkbox-margin, var(--comp-default-checkbox-margin))}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 24px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 38px));--comp-checkbox-toggle-error-color:var(--tct-checkbox-toggle-error-color, var(--comp-checkbox-error-color));--comp-checkbox-toggle-color:var(--tct-checkbox-toggle-color, var(--t-gray-8, #808080));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);--comp-checkbox-error-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));display:grid;grid-template-areas:"svg label" "svg description";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([hide-label]:not([hide-label=false])) .container{grid-template-areas:"svg";grid-template-columns:var(--comp-control-width)}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:"label svg" "description svg";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label;font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400))}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]:not([checked=false])) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}:host(:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host(:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host([description]:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):hover) .label-text{font-weight:var(--tct-checkbox-checked-hover-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}:host([description]:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):focus-within) .label-text{font-weight:var(--tct-checkbox-checked-focused-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}.label-text label{line-height:var(--tct-checkbox-label-line-height, 24px);display:inline-block}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}:host(:hover) .description-text{font-weight:var(--tct-checkbox-hover-description-font-weight, var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400)))}label{color:var(--tct-checkbox-label-color);cursor:pointer;hyphens:var(--tct-checkbox-label-hyphens, auto);word-break:var(--tct-checkbox-label-word-break, break-word);word-wrap:var(--tct-checkbox-label-word-wrap, break-word)}.checkbox-icon{width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));stroke:var(--comp-checkbox-outer-stroke-color);fill:var(--comp-checkbox-outer-fill-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));flex-shrink:0}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)))}:host([has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));fill:var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-error-box-shadow)}:host(:hover:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));fill:var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-hover-box-shadow)}:host(:hover[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-hover-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow)))}:host(:focus-within:not([type=favorite])) .checkbox-icon{--comp-checkbox-focused-box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)));fill:var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--comp-checkbox-focused-box-shadow)}:host(:focus-within[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-focused-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-focused-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-focused-box-shadow, var(--tct-checkbox-error-box-shadow, var(--comp-checkbox-focused-box-shadow)))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host(:hover[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));fill:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked]:not([checked=false])[type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-hover-stroke-color, var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-fill-primary:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-focused-stroke-color, var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}:host([has-error][type=favorite][checked]:not([checked=false])) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}.checkbox-fill{stroke:var(--tct-checkbox-checkmark-stroke-color, var(--comp-checkbox-checked-color));stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg-container{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-indicator,.toggle-track{position:absolute;top:50%;transform:translateY(-50%)}.toggle-indicator{transition:left var(--comp-checkbox-tween), height var(--comp-checkbox-tween), width var(--comp-checkbox-tween);height:16px;width:16px;left:4px;border-radius:50%}.toggle-track{height:24px;width:38px;fill:transparent;border-radius:var(--app-border-radius-3, 12px);box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-color);transition:fill var(--comp-checkbox-tween), box-shadow var(--comp-checkbox-tween)}.toggle-circle{mask:url(#xMask);fill:var(--comp-checkbox-toggle-color);transition:fill var(--comp-checkbox-tween)}.toggle-icon{stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--tct-checkbox-toggle-icon-stroke-width, 2);stroke:black}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-color)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-hover-circle-color, var(--t-primary-d1, var(--t-gray-6, #4d4d4d)))}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-active-color, var(--t-primary-l1, #7755af))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-track{box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-circle{fill:var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-error-hover-color, var(--comp-checkbox-toggle-error-color))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-error-active-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-track-color, var(--t-primary, #6a4a9e));border:none}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) .toggle-indicator{left:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) .toggle-circle{mask:url(#checkMask);fill:var(--tct-checkbox-toggle-checked-circle-color, var(--t-base, #ffffff))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-hover-track-color, var(--t-primary-d1, #5f438e))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-active-track-color, var(--t-primary-l1, #7755af))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-hover-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-active-track-color, var(--comp-checkbox-toggle-error-color))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))){cursor:not-allowed;opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))) label{cursor:not-allowed}';
 
 const d = h;
 
-const b = class {
+const n = class {
   constructor(t) {
     e(this, t);
     this.change = o(this, "change", 7);
@@ -174,10 +174,10 @@ const b = class {
     const e = [ "label-text" ];
     if (this.hideLabel) e.push("sr");
     return t("div", {
-      key: "579eccd325b8fb5b2336adb011aea200f8217b86",
+      key: "430044e68fc4512d2f1ee8a20ab132c316ad1683",
       class: "container"
     }, t("input", {
-      key: "1c87398cb9da8136dec2b0103941f848b3e9ef5e",
+      key: "4034224e568f92d79d3a472c60aa4ec26b8f74ec",
       ref: e => this.inputElement = e,
       "aria-describedby": this.description ? "description" : undefined,
       "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`,
@@ -191,21 +191,21 @@ const b = class {
       type: "checkbox",
       value: this.value
     }), t("label", {
-      key: "c24b63f7f594fa7601c0c3b9a942bb4e85186cfb",
+      key: "79cfa6506c98714f9f6ec22a8927bf90dd73653d",
       htmlFor: this._id,
       class: "label-control",
       "test-id": "checkboxButton"
     }, this.renderCheckboxSVG()), t("div", {
-      key: "b3d173fb63c8b7075769b42fa641fd4bc0bda63c",
+      key: "0121fd3f2cbf5cd9c0e76442582eed69bc99cb90",
       class: e.join(" ")
     }, t("label", {
-      key: "6ab46bdd8f6e858a6066fbf11b410509d04f1d00",
+      key: "8141cff679d3bbf67e8702a996517e6f8f1d0a18",
       "test-id": "checkboxLabel",
       htmlFor: this._id
     }, l(this.label), t("slot", {
-      key: "4f812dbe26b6148955d34763c62938427b6a0a70"
+      key: "564e4ed078041622e472b05699da098d0e8a3363"
     }))), this.description && t("div", {
-      key: "0ebd507482912f71edad0042a30a7582b040444e",
+      key: "6aafc6d11406d6d9d4f7fb898322eff2aa7c770a",
       class: "description-text",
       "test-id": "checkboxDescription",
       id: "description"
@@ -221,7 +221,7 @@ const b = class {
   }
 };
 
-b.style = d;
+n.style = d;
 
-export { b as q2_checkbox };
+export { n as q2_checkbox };
 //# sourceMappingURL=q2-checkbox.entry.js.map