q2-tecton-elements 1.34.0 → 1.35.1

package/dist/cjs/q2-stepper-vertical.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2597758.js');
-const index$1 = require('./index-d42bed64.js');
+const index$1 = require('./index-f6545293.js');
 
 const stylesCss = "*{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 #33b4ff #06C)}: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:grid;grid-template-columns:var(--tct-advanced-stepper-list-width, var(--t-advanced-stepper-list-width, 180px)) 1fr;gap:var(--tct-advanced-stepper-layout-gap, var(--t-advanced-stepper-layout-gap, 120px))}.step-label,.step-child-label{color:var(--comp-btn-label-color);font-size:var(--comp-btn-label-font-size);font-weight:var(--comp-label-font-weight, 400);height:1.5em}.step-label{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}[aria-selected=true] .step-label{font-weight:var(--tct-advanced-stepper-btn-active-font-weight, var(--t-advanced-stepper-btn-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:1}.step-child-label{grid-area:content;color:var(--comp-btn-label-color)}.step-description{color:var(--tct-advanced-stepper-description-color, var(--t-advanced-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-advanced-stepper-description-font-size, var(--t-advanced-stepper-description-font-size, var(--app-font-size-small, 12px)));padding-bottom:0.2em}ul{--comp-top-btn-icon-size:var(--tct-advanced-stepper-btn-icon-size, var(--t-advanced-stepper-btn-icon-size, 24px));--comp-btn-icon-size:var(--comp-top-btn-icon-size);--comp-btn-content-gap:var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-btn-label-font-size:var-list(var-prefixer(advanced-stepper-btn-label-font-size), 16px);--comp-btn-label-color:var(--tct-advanced-stepper-label-color, var(--t-advanced-stepper-label-color, var(--t-text, #4d4d4d)));--comp-tween:var(--tct-advanced-stepper-tween, var(--t-advanced-stepper-tween, var(--app-tween-1, 0.2s ease)));--comp-bullet-bg:var(--tct-advanced-stepper-bullet-active-bg, var(--t-advanced-stepper-bullet-active-bg, var(--t-primary, #0079c1)));list-style:none;margin:0;padding:0}ul ul{--comp-btn-icon-size:var(--tct-advanced-stepper-child-btn-icon-size, var(--t-advanced-stepper-child-btn-icon-size, 12px));--comp-btn-content-gap:var(--tct-advanced-stepper-btn-gap, var(--t-advanced-stepper-btn-gap, var(--app-scale-2x, 10px)));--comp-btn-label-font-size:var-list(\n      var-prefixer(advanced-stepper-child-btn-label-font-size),\n      --app-font-size-small,\n      12px\n  )}ul ul[aria-hidden=true]{display:none}.step-btn,.step-child-btn{display:grid;grid-template-columns:var(--comp-btn-icon-size) 1fr;gap:var(--comp-btn-content-gap);text-align:var(--tct-advanced-stepper-btn-text-align, var(--t-advanced-stepper-btn-text-align, start));grid-template-areas:\"icon content\";align-items:center;width:100%;position:relative;background:transparent;border:0;cursor:pointer;padding:0;transition-property:box-shadow;outline:none}.step-btn[aria-disabled],.step-child-btn[aria-disabled]{cursor:default;--comp-label-font-weight:300;--comp-btn-label-color:var(--tct-advanced-stepper-btn-locked-color, var(--t-advanced-stepper-btn-locked-color, var(--t-textA, rgba(77, 77, 77, 0.77))))}.step-btn[aria-selected=true],.step-child-btn[aria-selected=true]{--comp-label-font-weight:600}.step-btn{min-height:var(--tct-advanced-stepper-btn-height, var(--t-advanced-stepper-btn-height, 40px));font-size:var(--tct-advanced-stepper-btn-font-size, var(--t-advanced-stepper-btn-font-size, 16px));--comp-active-color:var(--comp-bullet-bg)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #c30000)}.step-btn.status-locked{cursor:not-allowed}.step-child-btn{--comp-active-color:var(--comp-bullet-bg);min-height:var(--tct-advanced-stepper-child-btn-height, var(--t-advanced-stepper-child-btn-height, 30px));padding-left:var(--tct-advanced-stepper-child-btn-left-padding, var(--t-advanced-stepper-child-btn-left-padding, var(--app-scale-2x, 10px)));font-size:var(--tct-advanced-stepper-child-btn-font-size, var(--t-advanced-stepper-child-btn-font-size, 12px));border-left-width:var(--tct-advanced-stepper-child-btn-left-border-width, var(--t-advanced-stepper-child-btn-left-border-width, 3px));border-left-style:var(--tct-advanced-stepper-child-btn-left-border-style, var(--t-advanced-stepper-child-btn-left-border-style, solid));border-left-color:transparent}.step-child-btn[aria-selected=true]{--comp-btn-label-color:var(--comp-active-color);border-left-color:var(--comp-active-color)}.step-child-btn.status-error{--comp-btn-label-color:var(--const-stoplight-alert, #c30000);--comp-active-color:var(--const-stoplight-alert, #c30000)}.step-child-btn.status-locked{cursor:not-allowed}.step-content{grid-area:content}.step-icon,.step-bubble,.step-child-icon{grid-area:icon;width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);line-height:0}.step-icon q2-icon,.step-bubble q2-icon,.step-child-icon q2-icon{width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);--tct-icon-fill:var(--comp-active-color)}.step-icon,.step-bubble{background:var(--comp-active-color);color:var(--t-base, #ffffff);border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}.step-icon q2-icon,.step-bubble q2-icon{--tct-icon-fill:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:\"\";display:block;background:var(--t-base, #ffffff);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-locked .step-icon,.status-locked .step-bubble{background:var(--t-gray-12, #d9d9d9);color:var(--t-text, #4d4d4d)}[aria-selected=true] .step-icon,[aria-selected=true] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color)}.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0}.step-child-icon q2-icon{--tct-icon-stroke-primary:var(--comp-active-color);--tct-icon-stroke-secondary:var(--comp-active-color)}[aria-selected=true] .step-child-icon q2-icon{fill:var(--comp-active-color);--tct-icon-stroke-secondary:var(--t-base, #ffffff)}.spacer{height:0;border-left-width:var(--tct-advanced-stepper-child-border-width, var(--t-advanced-stepper-child-border-width, 1px));border-left-style:var(--tct-advanced-stepper-child-border-style, var(--t-advanced-stepper-child-border-style, solid));border-left-color:var(--tct-advanced-stepper-child-border-color, var(--t-advanced-stepper-child-border-color, var(--t-gray-12, #d9d9d9)));overflow:hidden;margin-left:calc(var(--comp-top-btn-icon-size) / 2);transition:height var(--comp-tween)}.spacer.has-sibling{height:var(--tct-advanced-stepper-spacer-height, var(--t-advanced-stepper-spacer-height, var(--app-scale-6x, 30px)))}.spacer ul{opacity:0;transition:opacity var(--comp-tween)}.spacer.is-opening ul,.spacer.is-open ul{display:block;opacity:1 !important}.spacer.is-open{overflow:visible}";
 

package/dist/cjs/q2-stepper.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-c2597758.js');
-const index = require('./index-d42bed64.js');
+const index = require('./index-f6545293.js');
 
 const stylesCss = "*{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 #33b4ff #06C)}: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;position:relative}ul{--comp-bullet-background:var(--tct-stepper-bullet-active-background, var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1))));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-bullet-gap:var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-bullet-border-offset:var(--tct-stepper-bullet-border-offset, var(--t-stepper-bullet-border-offset, 4px));--comp-bullet-border:var(--tct-stepper-bullet-border, var(--t-stepper-bullet-border, 2px solid var(--t-primary-l3, #21acff)));--comp-bullet-font-size:var-list(var-prefixer(stepper-btn-label-font-size), 16px);--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-top-btn-icon-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-btn-icon-size:var(--comp-top-btn-icon-size);--comp-btn-content-gap:var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-btn-label-font-size:var-list(var-prefixer(stepper-btn-label-font-size), 16px);--comp-btn-label-color:var(--tct-stepper-label-color, var(--t-stepper-label-color, var(--t-text, #4d4d4d)));--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none;margin-top:2px;--comp-active-color:var(--comp-bullet-background)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #c30000)}.step-btn[aria-disabled]{cursor:not-allowed}.step-btn[aria-disabled],.step-btn[aria-disabled]+.step-divider{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-background:var(--tct-stepper-bullet-inactive-background, var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9))))}.step-icon,.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0;margin:var(--comp-bullet-gap) auto;color:var(--comp-bullet-font-color);width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);min-height:var(--comp-btn-icon-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}.step-icon q2-icon,.step-bubble q2-icon{--tct-icon-fill:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:\"\";display:block;background:var(--comp-bullet-font-color);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}[aria-selected] .step-icon,[aria-selected] .step-bubble{font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}[aria-selected] .step-icon:before,[aria-selected] .step-bubble:before{content:\"\";position:absolute;inset:calc(var(--comp-bullet-border-offset) * -1);width:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));height:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));border-radius:50%;border:var(--comp-bullet-border);border-color:var(--comp-active-color)}.step-bubble{background:var(--comp-bullet-background)}.step-divider{width:calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));top:calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));left:calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-background);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-label-color, var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d))));font-size:var(--tct-stepper-label-font-size, var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px))));line-height:var(--tct-stepper-label-line-height, 1.5em);text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, 2);-webkit-box-orient:vertical}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:var(--tct-stepper-label-line-count, 1)}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-description-line-count, 4);-webkit-box-orient:vertical;padding-bottom:0.2em}.step-description .ellipsize{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--comp-step-width);display:block}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}";
 

package/dist/cjs/q2-tab-container.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-c2597758.js');
-const index = require('./index-d42bed64.js');
+const index = require('./index-f6545293.js');
 
 const stylesCss = "*{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 #33b4ff #06C)}: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;position:relative}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));margin:var(--tct-tab-container-margin, var(--t-tab-container-margin));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1x, 5px))));list-style:none;border-bottom:1px solid var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-background, var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent)));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));display:block;transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:inherit;padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background:var(--tct-tab-hover-background, var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit)));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentColor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background:var(--tct-tab-active-background, var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit)))}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) 0;padding:var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding)))}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}.tab-pane-badge{display:flex;justify-content:space-between;align-items:center}.tab-pane-badge q2-badge{margin-left:5px;margin-right:5px}";
 

package/dist/cjs/q2-tag.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2597758.js');
-const index$1 = require('./index-d42bed64.js');
-const actionSheet = require('./action-sheet-4b366e9a.js');
+const index$1 = require('./index-f6545293.js');
+const actionSheet = require('./action-sheet-ab1abf24.js');
 
-const stylesCss = "*{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 #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 3px)));position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-primary-color, var(--t-primary-l5, #61c4ff));--comp-tag-color:var(--t-primary-text, #ffffff)}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-secondary-color, var(--t-secondary-l5, #d9e1e6));--comp-tag-color:var(--t-secondary-text, #000000)}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-tertiary-color, var(--t-tertiary-l5, #f4fafe));--comp-tag-color:var(--t-tertiary-text, #000000)}.tag{display:flex;width:max-content;height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)))}.tag.has-options{padding-right:6px}.btn-wrapper{--comp-tag-clickable-size:var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));--comp-tag-btn-offset:calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));height:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:relative;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;padding-right:6px;--tct-icon-size:18px}";
+const stylesCss = "*{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 #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 3px)));position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-primary-background, var(--t-primary-l5, #61c4ff));--comp-tag-color:var(--tct-tag-primary-font-color, var(--t-primary-text, #ffffff))}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-secondary-background, var(--t-secondary-l5, #d9e1e6));--comp-tag-color:var(--tct-tag-secondary-font-color, var(--t-secondary-text, #000000))}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-tertiary-background, var(--t-tertiary-l5, #f4fafe));--comp-tag-color:var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #000000))}.tag{display:flex;width:max-content;height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)))}.tag.has-options{padding-right:6px}.btn-wrapper{--comp-tag-clickable-size:var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));--comp-tag-btn-offset:calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));height:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:relative;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;padding-right:6px;--tct-icon-size:18px}";
 
 const Q2Tag = class {
   constructor(hostRef) {
@@ -120,7 +120,7 @@ const Q2Tag = class {
     const wrapperClassNames = ['tag'];
     if (optionCount)
       wrapperClassNames.push('has-options');
-    return (index.h(index.Host, { role: "listitem" }, index.h("click-elsewhere", { onChange: this.onClickElsewhere }, this.optionCount ? (index.h(index.Fragment, null, index.h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, index.h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description" }, index.h("div", { class: wrapperClassNames.join(' ') }, this.label), index.h("q2-icon", { type: "options" }))), this.generateHiddenElement())) : (index.h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, index.h("div", { class: wrapperClassNames.join(' ') }, this.label))), this.optionCount && (index.h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, index.h("q2-option-list", { id: "option-list", role: "menu", ref: el => (this.optionList = el), onChange: this.handleChange, align: "right", type: "menu", label: index$1.loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, index.h("slot", null)))))));
+    return (index.h(index.Host, { role: "listitem" }, index.h("click-elsewhere", { onChange: this.onClickElsewhere }, this.optionCount ? (index.h(index.Fragment, null, index.h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, index.h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description" }, index.h("div", { class: wrapperClassNames.join(' ') }, this.label), index.h("q2-icon", { type: "options" }))), this.generateHiddenElement())) : (index.h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, index.h("div", { class: wrapperClassNames.join(' ') }, this.label))), this.optionCount > 0 && (index.h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, index.h("q2-option-list", { id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: index$1.loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, index.h("slot", null)))))));
   }
   get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/q2-tag.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"q2-tag.entry.cjs.js","mappings":"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","names":["shouldShowActionSheet","showActionSheetList","overrideFocus","isEventFromElement","h","loc","Host","Fragment"],"sources":["./src/components/q2-tag/styles.scss?tag=q2-tag&encapsulation=shadow","./src/components/q2-tag/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(tag-margin), --app-scale-2x, 10px);\n}\n\n.tag-wrapper {\n    --comp-tag-btn-size: #{var-list(var-prefixer(tag-btn-size), --app-scale-6x)};\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    --comp-tag-color: #{var-list(var-prefixer(tag-color), --t-gray-3, #262626)};\n    background: var(--comp-tag-background);\n    color: var(--comp-tag-color);\n    border-radius: var-list(var-prefixer(tag-border-radius), --app-border-radius-1, 3px);\n    position: relative;\n\n    :host([theme='primary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-primary-color, --t-primary-l5, #61c4ff)};\n        --comp-tag-color: #{var-list(--t-primary-text, #ffffff)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-secondary-color, --t-secondary-l5, #d9e1e6)};\n        --comp-tag-color: #{var-list(--t-secondary-text, #000000)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-tertiary-color, --t-tertiary-l5, #f4fafe)};\n        --comp-tag-color: #{var-list(--t-tertiary-text, #000000)};\n    }\n}\n\n.tag {\n    display: flex;\n    width: max-content;\n    height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    line-height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    padding-inline: var-list(var-prefixer(tag-padding-inline), --app-scale-3x, 15px);\n}\n\n.tag.has-options {\n    padding-right: 6px;\n}\n\n.btn-wrapper {\n    --comp-tag-clickable-size: #{var-list(var-prefixer(tag-clickable-size), 44px)};\n    --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    height: var(--comp-tag-clickable-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    right: var(--comp-tag-btn-offset);\n    top: var(--comp-tag-btn-offset);\n    cursor: pointer;\n}\n\nbutton {\n    height: var(--comp-tag-btn-size);\n    stroke: var(--comp-tag-color);\n    --tct-icon-stroke-primary: var(--comp-tag-color);\n    cursor: pointer;\n    border: 0;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    padding-right: 6px;\n    --tct-icon-size: 18px;\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Host,\n    Listen,\n    Element,\n    EventEmitter,\n    Event,\n    Fragment,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({\n    tag: 'q2-tag',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Tag implements ComponentInterface {\n    @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) theme: 'primary' | 'secondary' | 'tertiary';\n    @Prop() popoverMinHeight: number = 150;\n    @Prop() popoverDirection: 'up' | 'down';\n    @Prop({ mutable: true }) popoverAlignment: 'left' | 'right' = 'right';\n    @Prop() optionListLabel: string = 'options';\n\n    @State() optionCount: number;\n\n    @Element() hostElement: HTMLElement;\n    @Event() click: EventEmitter<{ value: string }>;\n    dropdownBtn: HTMLButtonElement;\n    popoverElement: HTMLQ2PopoverElement;\n    optionList: HTMLQ2OptionListElement;\n    mutationObserver: MutationObserver;\n\n    /// LifeCycle Hooks ///\n    componentWillLoad() {\n        const observer = new MutationObserver(this.determineOptionCount);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    /// Getters ///\n\n    /// Helpers\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    /// Listeners ///\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.optionCount) return;\n        this.dropdownBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    /// Event Handlers ///\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        const { value } = event.detail;\n\n        this.click.emit({ value });\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this)) {\n            const { value } = await showActionSheetList(this, event);\n            this.click.emit({ value });\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this, event)) {\n            const { value } = await showActionSheetList(this, event);\n            this.click.emit({ value });\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (relatedTarget?.tagName === 'Q2-OPTION' ?? false) return;\n        this.open = false;\n    };\n\n    handleWrapperClick = () => {\n        this.dropdownBtn.focus();\n        this.dropdownBtn.click();\n    };\n\n    /// DOM ///\n    generateHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { optionCount, open } = this;\n        const wrapperClassNames = ['tag'];\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <Host role=\"listitem\">\n                <click-elsewhere onChange={this.onClickElsewhere}>\n                    {this.optionCount ? (\n                        <Fragment>\n                            <div\n                                class=\"btn-wrapper\"\n                                onClick={this.handleWrapperClick}\n                            >\n                                <button\n                                    class=\"tag-wrapper\"\n                                    ref={el => (this.dropdownBtn = el)}\n                                    test-id=\"btn-control\"\n                                    onClick={this.handleClick}\n                                    onKeyDown={this.handleKeydown}\n                                    onFocusout={this.handleButtonFocusout}\n                                    aria-controls=\"option-list\"\n                                    aria-expanded={open ? 'true' : 'false'}\n                                    aria-describedby=\"option-description\"\n                                >\n                                    <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n                                    <q2-icon type=\"options\"></q2-icon>\n                                </button>\n                            </div>\n                            {this.generateHiddenElement()}\n                        </Fragment>\n                    ) : (\n                        <div\n                            class=\"tag-wrapper\"\n                            onClick={e => e.stopPropagation()}\n                        >\n                            <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n                        </div>\n                    )}\n\n                    {this.optionCount && (\n                        <q2-popover\n                            ref={el => (this.popoverElement = el)}\n                            controlElement={this.dropdownBtn}\n                            open={this.open}\n                            minHeight={this.popoverMinHeight}\n                            direction={this.popoverDirection}\n                            align={this.popoverAlignment}\n                        >\n                            <q2-option-list\n                                id=\"option-list\"\n                                role=\"menu\"\n                                ref={el => (this.optionList = el)}\n                                onChange={this.handleChange}\n                                align=\"right\"\n                                type=\"menu\"\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                                no-select\n                            >\n                                <slot />\n                            </q2-option-list>\n                        </q2-popover>\n                    )}\n                </click-elsewhere>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-tag.entry.cjs.js","mappings":"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","names":["shouldShowActionSheet","showActionSheetList","overrideFocus","isEventFromElement","h","loc","Host","Fragment"],"sources":["./src/components/q2-tag/styles.scss?tag=q2-tag&encapsulation=shadow","./src/components/q2-tag/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(tag-margin), --app-scale-2x, 10px);\n}\n\n.tag-wrapper {\n    --comp-tag-btn-size: #{var-list(var-prefixer(tag-btn-size), --app-scale-6x)};\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    --comp-tag-color: #{var-list(var-prefixer(tag-color), --t-gray-3, #262626)};\n    background: var(--comp-tag-background);\n    color: var(--comp-tag-color);\n    border-radius: var-list(var-prefixer(tag-border-radius), --app-border-radius-1, 3px);\n    position: relative;\n\n    :host([theme='primary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-primary-background, --t-primary-l5, #61c4ff)};\n        --comp-tag-color: #{var-list(--tct-tag-primary-font-color, --t-primary-text, #ffffff)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-secondary-background, --t-secondary-l5, #d9e1e6)};\n        --comp-tag-color: #{var-list(--tct-tag-secondary-font-color, --t-secondary-text, #000000)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-tertiary-background, --t-tertiary-l5, #f4fafe)};\n        --comp-tag-color: #{var-list(--tct-tag-tertiary-font-color, --t-tertiary-text, #000000)};\n    }\n}\n\n.tag {\n    display: flex;\n    width: max-content;\n    height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    line-height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    padding-inline: var-list(var-prefixer(tag-padding-inline), --app-scale-3x, 15px);\n}\n\n.tag.has-options {\n    padding-right: 6px;\n}\n\n.btn-wrapper {\n    --comp-tag-clickable-size: #{var-list(var-prefixer(tag-clickable-size), 44px)};\n    --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    height: var(--comp-tag-clickable-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    right: var(--comp-tag-btn-offset);\n    top: var(--comp-tag-btn-offset);\n    cursor: pointer;\n}\n\nbutton {\n    height: var(--comp-tag-btn-size);\n    stroke: var(--comp-tag-color);\n    --tct-icon-stroke-primary: var(--comp-tag-color);\n    cursor: pointer;\n    border: 0;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    padding-right: 6px;\n    --tct-icon-size: 18px;\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Host,\n    Listen,\n    Element,\n    EventEmitter,\n    Event,\n    Fragment,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({\n    tag: 'q2-tag',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Tag implements ComponentInterface {\n    @Prop() hoist: boolean = !!window.Tecton?.useActionSheets;\n    @Prop({ reflect: true, mutable: true }) open: boolean;\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) theme: 'primary' | 'secondary' | 'tertiary';\n    @Prop() popoverMinHeight: number = 150;\n    @Prop() popoverDirection: 'up' | 'down';\n    @Prop({ mutable: true }) popoverAlignment: 'left' | 'right' = 'right';\n    @Prop() optionListLabel: string = 'options';\n\n    @State() optionCount: number;\n\n    @Element() hostElement: HTMLElement;\n    @Event() click: EventEmitter<{ value: string }>;\n    dropdownBtn: HTMLButtonElement;\n    popoverElement: HTMLQ2PopoverElement;\n    optionList: HTMLQ2OptionListElement;\n    mutationObserver: MutationObserver;\n\n    /// LifeCycle Hooks ///\n    componentWillLoad() {\n        const observer = new MutationObserver(this.determineOptionCount);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    /// Getters ///\n\n    /// Helpers\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    /// Listeners ///\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.optionCount) return;\n        this.dropdownBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    /// Event Handlers ///\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        const { value } = event.detail;\n\n        this.click.emit({ value });\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this)) {\n            const { value } = await showActionSheetList(this, event);\n            this.click.emit({ value });\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this, event)) {\n            const { value } = await showActionSheetList(this, event);\n            this.click.emit({ value });\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (relatedTarget?.tagName === 'Q2-OPTION' ?? false) return;\n        this.open = false;\n    };\n\n    handleWrapperClick = () => {\n        this.dropdownBtn.focus();\n        this.dropdownBtn.click();\n    };\n\n    /// DOM ///\n    generateHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { optionCount, open } = this;\n        const wrapperClassNames = ['tag'];\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <Host role=\"listitem\">\n                <click-elsewhere onChange={this.onClickElsewhere}>\n                    {this.optionCount ? (\n                        <Fragment>\n                            <div\n                                class=\"btn-wrapper\"\n                                onClick={this.handleWrapperClick}\n                            >\n                                <button\n                                    class=\"tag-wrapper\"\n                                    ref={el => (this.dropdownBtn = el)}\n                                    test-id=\"btn-control\"\n                                    type=\"button\"\n                                    role=\"combobox\"\n                                    onClick={this.handleClick}\n                                    onKeyDown={this.handleKeydown}\n                                    onFocusout={this.handleButtonFocusout}\n                                    aria-controls=\"option-list\"\n                                    aria-expanded={open ? 'true' : 'false'}\n                                    aria-describedby=\"option-description\"\n                                >\n                                    <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n                                    <q2-icon type=\"options\"></q2-icon>\n                                </button>\n                            </div>\n                            {this.generateHiddenElement()}\n                        </Fragment>\n                    ) : (\n                        <div\n                            class=\"tag-wrapper\"\n                            onClick={e => e.stopPropagation()}\n                        >\n                            <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n                        </div>\n                    )}\n\n                    {this.optionCount > 0 && (\n                        <q2-popover\n                            ref={el => (this.popoverElement = el)}\n                            controlElement={this.dropdownBtn}\n                            open={this.open}\n                            minHeight={this.popoverMinHeight}\n                            direction={this.popoverDirection}\n                            align={this.popoverAlignment}\n                        >\n                            <q2-option-list\n                                id=\"option-list\"\n                                ref={el => (this.optionList = el)}\n                                onChange={this.handleChange}\n                                type=\"menu\"\n                                align=\"right\"\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                                no-select\n                            >\n                                <slot />\n                            </q2-option-list>\n                        </q2-popover>\n                    )}\n                </click-elsewhere>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/q2-tecton-elements.cjs.js

@@ -20,7 +20,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy(JSON.parse("[[\"q2-calendar.cjs\",[[1,\"q2-calendar\",{\"value\":[1537],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"optional\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[1540],\"open\":[1540],\"typeable\":[516],\"clearable\":[516],\"placeholder\":[513],\"disabledMsg\":[513,\"disabled-msg\"],\"calendarLabel\":[513,\"calendar-label\"],\"disclaimer\":[513],\"displayFormat\":[513,\"display-format\"],\"startDate\":[513,\"start-date\"],\"endDate\":[513,\"end-date\"],\"cutoffTime\":[513,\"cutoff-time\"],\"daysOfWeekChecksum\":[514,\"days-of-week-checksum\"],\"assume\":[513],\"errors\":[1040],\"invalidDates\":[16],\"validDates\":[16],\"popoverDirection\":[1025,\"popover-direction\"],\"popoverAlignment\":[1,\"popover-alignment\"],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popDirection\":[513,\"pop-direction\"],\"onsuccess\":[16],\"buttonLabel\":[513,\"button-label\"],\"ariaLabel\":[1537,\"aria-label\"],\"keyboardSelection\":[32],\"typedValue\":[32],\"dateList\":[32],\"hintMessage\":[32],\"hintMessageType\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"error\",\"defaultErrorHandler\"],[0,\"success\",\"defaultSuccessHandler\"],[0,\"focus\",\"delegateFocus\"],[0,\"clear\",\"handleClear\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"]]]]],[\"q2-select.cjs\",[[1,\"q2-select\",{\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"value\":[1025],\"selectedOptions\":[1040],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"listLabel\":[1,\"list-label\"],\"errors\":[16],\"multiple\":[516],\"minRows\":[2,\"min-rows\"],\"popDirection\":[513,\"pop-direction\"],\"searchable\":[516],\"multilineOptions\":[516,\"multiline-options\"],\"optional\":[516],\"placeholder\":[513],\"hoist\":[4],\"ariaLabel\":[1537,\"aria-label\"],\"open\":[32],\"showSelected\":[32],\"searchText\":[32],\"hasCustomDisplay\":[32],\"inputFocused\":[32],\"statusMessage\":[32],\"prioritizeSearch\":[32],\"structuredSelectedOptions\":[32]},[[0,\"keydown\",\"keydownHandler\"],[0,\"change\",\"onHostElementChange\"],[0,\"input\",\"onHostElementInput\"],[0,\"focus\",\"delegateFocus\"],[0,\"focusout\",\"handleFocusout\"],[0,\"displayChanged\",\"handleSelectedDisplay\"]]]]],[\"q2-action-sheet.cjs\",[[1,\"q2-action-sheet\",{\"data\":[1040],\"title\":[1],\"hideClose\":[4,\"hide-close\"],\"isScrollable\":[32],\"renderStatus\":[32],\"hide\":[64],\"show\":[64]}]]],[\"q2-dropdown.cjs\",[[1,\"q2-dropdown\",{\"type\":[513],\"icon\":[513],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"disabled\":[516],\"name\":[513],\"context\":[513],\"contextValue\":[513,\"context-value\"],\"resolvedType\":[513,\"resolved-type\"],\"additionalContext\":[513,\"additional-context\"],\"block\":[516],\"open\":[1540],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popoverDirection\":[1025,\"popover-direction\"],\"popoverAlignment\":[1025,\"popover-alignment\"],\"alignment\":[513],\"popDirection\":[513,\"pop-direction\"],\"ariaLabel\":[1537,\"aria-label\"]},[[0,\"focus\",\"delegateFocus\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"]]]]],[\"q2-data-table.cjs\",[[1,\"q2-data-table\",{\"density\":[1537],\"bordered\":[1540],\"shadowed\":[1540],\"selectable\":[1540],\"loading\":[1540],\"hideCaption\":[1540,\"hide-caption\"],\"caption\":[1025],\"selectMode\":[1025,\"select-mode\"],\"headers\":[1040],\"rows\":[1040],\"serializedHeaders\":[32],\"serializedRows\":[32],\"hasExpandableRows\":[32],\"hasDropdowns\":[32],\"allRowsSelected\":[32],\"checkSlotCount\":[32]}]]],[\"q2-editable-field.cjs\",[[1,\"q2-editable-field\",{\"value\":[1537],\"editing\":[1540],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"type\":[513],\"formatModifier\":[513,\"format-modifier\"],\"truncated\":[516],\"maxlength\":[514],\"persistentLabel\":[516,\"persistent-label\"],\"disabled\":[516],\"block\":[516],\"hints\":[16],\"errors\":[16],\"ariaLabel\":[1537,\"aria-label\"],\"formattedValue\":[32]},[[0,\"change\",\"onHostElementChange\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-pagination.cjs\",[[1,\"q2-pagination\",{\"recordType\":[1,\"record-type\"],\"perPage\":[2,\"per-page\"],\"total\":[514],\"page\":[1538],\"pages\":[1538],\"recordsOnly\":[1540,\"records-only\"],\"pagesOnly\":[1540,\"pages-only\"],\"isSmall\":[32]},[[0,\"focus\",\"onHostElementFocus\"]]]]],[\"q2-pill.cjs\",[[1,\"q2-pill\",{\"hoist\":[4],\"disabled\":[516],\"active\":[1540],\"open\":[1540],\"multiple\":[516],\"maxLength\":[514,\"max-length\"],\"label\":[513],\"value\":[1537],\"theme\":[513],\"selectedOptions\":[1040],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popoverDirection\":[1,\"popover-direction\"],\"popoverAlignment\":[1025,\"popover-alignment\"],\"optionListLabel\":[1,\"option-list-label\"],\"optionCount\":[32],\"selectedOptionElements\":[32]},[[0,\"focus\",\"delegateFocus\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"],[0,\"displayChanged\",\"handleSelectedDisplay\"]]]]],[\"q2-tab-container.cjs\",[[1,\"q2-tab-container\",{\"value\":[1537],\"type\":[513],\"name\":[513],\"color\":[513],\"noPrint\":[516,\"no-print\"],\"hasLeft\":[32],\"hasRight\":[32],\"scrollEnabled\":[32],\"showScrollLeft\":[32],\"showScrollRight\":[32],\"tabs\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[9,\"resize\",\"onResize\"],[0,\"focus\",\"onFocus\"],[0,\"badge\",\"onBadge\"]]]]],[\"q2-tag.cjs\",[[1,\"q2-tag\",{\"hoist\":[4],\"open\":[1540],\"label\":[513],\"theme\":[513],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popoverDirection\":[1,\"popover-direction\"],\"popoverAlignment\":[1025,\"popover-alignment\"],\"optionListLabel\":[1,\"option-list-label\"],\"optionCount\":[32]},[[0,\"focus\",\"delegateFocus\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"]]]]],[\"q2-carousel.cjs\",[[4,\"q2-carousel\",{\"autoPlay\":[516,\"auto-play\"],\"fullWidthPanes\":[516,\"full-width-panes\"],\"hidePagination\":[516,\"hide-pagination\"],\"showNavigationArrows\":[516,\"show-navigation-arrows\"],\"label\":[513],\"index\":[1538],\"ariaLabel\":[513,\"aria-label\"],\"universalCarouselOptions\":[32],\"fullWidthDisplayOptions\":[32],\"activePaneIndex\":[32],\"applyFocus\":[32],\"applyPaginationFocus\":[32],\"autoPlayInProgress\":[32],\"compactMode\":[32],\"carouselWrapperWidth\":[32]},[[0,\"change\",\"onHostElementChange\"],[0,\"clickCarouselPane\",\"carouselPaneClicked\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-month-picker.cjs\",[[1,\"q2-month-picker\",{\"year\":[1538],\"disabledMonths\":[16],\"today\":[1],\"selectedIndex\":[32],\"focusedIndex\":[32],\"showYearLayer\":[32]}]]],[\"q2-section.cjs\",[[1,\"q2-section\",{\"label\":[513],\"collapsible\":[516],\"noCollapseIcon\":[516,\"no-collapse-icon\"],\"expanded\":[1540],\"contentHeight\":[32],\"hideContent\":[32],\"hasYieldedHeader\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-stepper.cjs\",[[1,\"q2-stepper\",{\"currentStep\":[1538,\"current-step\"],\"stepCount\":[1026,\"step-count\"],\"lastEnabledStep\":[1026,\"last-enabled-step\"],\"contentChangeTriggerCount\":[32],\"scrollEnabled\":[32],\"showScrollLeft\":[32],\"showScrollRight\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"],[0,\"statusChange\",\"statusChangeHandler\"],[0,\"contentChange\",\"contentChangeHandler\"]]]]],[\"q2-card.cjs\",[[1,\"q2-card\",{\"title\":[513],\"description\":[513],\"avatarName\":[513,\"avatar-name\"],\"avatarInitials\":[513,\"avatar-initials\"],\"avatarIcon\":[513,\"avatar-icon\"],\"avatarSrc\":[513,\"avatar-src\"],\"isSmall\":[516,\"is-small\"],\"bar\":[513],\"isStatic\":[516,\"is-static\"],\"isTouch\":[516,\"is-touch\"],\"url\":[513],\"target\":[513],\"type\":[513],\"isAutoTouch\":[32],\"isAutoSmall\":[32]},[[0,\"focus\",\"onHostElementFocus\"]]]]],[\"q2-chart-donut.cjs\",[[1,\"q2-chart-donut\",{\"chartName\":[513,\"chart-name\"],\"summaryIcon\":[513,\"summary-icon\"],\"summaryName\":[513,\"summary-name\"],\"innerRadius\":[1025,\"inner-radius\"],\"outerRadius\":[1025,\"outer-radius\"],\"minSliceSize\":[1,\"min-slice-size\"],\"selectedOffset\":[2,\"selected-offset\"],\"hoverScaleSize\":[2,\"hover-scale-size\"],\"format\":[513],\"isClickable\":[516,\"is-clickable\"],\"data\":[16],\"selectedId\":[1,\"selected-id\"],\"hoveredId\":[32],\"selectById\":[64],\"selectByIndex\":[64],\"clearSelection\":[64]},[[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-checkbox-group.cjs\",[[1,\"q2-checkbox-group\",{\"label\":[513],\"value\":[1040],\"disabled\":[516],\"readonly\":[516],\"optional\":[516],\"hasError\":[516,\"has-error\"]},[[0,\"change\",\"onHostElementChange\"]]]]],[\"q2-radio-group.cjs\",[[1,\"q2-radio-group\",{\"label\":[513],\"value\":[1025],\"disabled\":[516],\"name\":[513],\"optional\":[516],\"readonly\":[516],\"tileLayout\":[1540,\"tile-layout\"],\"tileAlignment\":[513,\"tile-alignment\"],\"hasError\":[516,\"has-error\"],\"tilelayout\":[1540]},[[0,\"change\",\"onHostElementChange\"],[0,\"focus\",\"delegateFocus\"],[0,\"keydown\",\"keydownHandler\"]]]]],[\"q2-stepper-vertical.cjs\",[[1,\"q2-stepper-vertical\",{\"currentStepId\":[1537,\"current-step-id\"],\"structuredPanes\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"],[0,\"statusChange\",\"statusChangeHandler\"]]]]],[\"q2-textarea.cjs\",[[1,\"q2-textarea\",{\"value\":[1025],\"label\":[513],\"hideLabel\":[516,\"hide-label\"],\"hideMessages\":[516,\"hide-messages\"],\"optional\":[516],\"placeholder\":[513],\"disabled\":[516],\"readonly\":[516],\"spellcheck\":[516],\"maxlength\":[1538],\"rows\":[514],\"cols\":[514],\"resize\":[513],\"errors\":[16],\"hints\":[16],\"hasFocus\":[32],\"downParams\":[32]},[[0,\"focus\",\"onHostElementFocus\"],[0,\"change\",\"onHostElementChange\"]]]]],[\"q2-carousel-pane.cjs\",[[4,\"q2-carousel-pane\",{\"index\":[2],\"siblingCount\":[2,\"sibling-count\"],\"isActivePane\":[516,\"is-active-pane\"],\"label\":[513]}]]],[\"q2-chart-area.cjs\",[[1,\"q2-chart-area\",{\"data\":[16],\"alignChartName\":[513,\"align-chart-name\"],\"chartName\":[513,\"chart-name\"],\"chartSubTitle\":[513,\"chart-sub-title\"],\"lineColor\":[513,\"line-color\"],\"pointerLineColor\":[513,\"pointer-line-color\"],\"pointerLineStyle\":[513,\"pointer-line-style\"],\"areaColor\":[513,\"area-color\"],\"dataNamesOverflow\":[513,\"data-names-overflow\"],\"dataNamesWidth\":[514,\"data-names-width\"],\"format\":[513],\"formatModifier\":[513,\"format-modifier\"],\"hideNameAxisLabels\":[516,\"hide-name-axis-labels\"],\"hideValueAxisLabels\":[516,\"hide-value-axis-labels\"],\"offsetDataNames\":[516,\"offset-data-names\"],\"offsetDataValues\":[516,\"offset-data-values\"],\"showChartName\":[516,\"show-chart-name\"],\"showDatapointLabels\":[516,\"show-datapoint-labels\"],\"showGradient\":[516,\"show-gradient\"],\"gridLines\":[513,\"grid-lines\"]}]]],[\"q2-chart-bar.cjs\",[[1,\"q2-chart-bar\",{\"data\":[16],\"alignChartName\":[513,\"align-chart-name\"],\"chartName\":[513,\"chart-name\"],\"chartSubTitle\":[513,\"chart-sub-title\"],\"color\":[513],\"dataNamesOverflow\":[513,\"data-names-overflow\"],\"dataNamesWidth\":[514,\"data-names-width\"],\"format\":[513],\"formatModifier\":[513,\"format-modifier\"],\"hideBarLabels\":[516,\"hide-bar-labels\"],\"hideValueAxisLabels\":[516,\"hide-value-axis-labels\"],\"offsetDataNames\":[516,\"offset-data-names\"],\"offsetDataValues\":[516,\"offset-data-values\"],\"orientation\":[513],\"showChartName\":[516,\"show-chart-name\"],\"sort\":[516]}]]],[\"q2-loading-element.cjs\",[[0,\"q2-loading-element\",{\"shape\":[513],\"width\":[513],\"height\":[513],\"borderRadius\":[513,\"border-radius\"]}]]],[\"q2-loc.cjs\",[[1,\"q2-loc\",{\"value\":[513],\"substitutions\":[16]}]]],[\"q2-radio.cjs\",[[1,\"q2-radio\",{\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"value\":[513],\"disabled\":[516],\"checked\":[516],\"tabIndex\":[2,\"tab-index\"],\"name\":[513],\"groupDisabled\":[4,\"group-disabled\"],\"groupReadonly\":[4,\"group-readonly\"],\"groupTileLayout\":[4,\"group-tile-layout\"],\"ariaLabel\":[1537,\"aria-label\"]},[[0,\"click\",\"onHostClick\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-stepper-pane.cjs\",[[1,\"q2-stepper-pane\",{\"label\":[513],\"description\":[513],\"isActive\":[516,\"is-active\"],\"showWithChildren\":[516,\"show-with-children\"],\"status\":[513],\"isChildActive\":[32]},[[0,\"activeChange\",\"checkForActiveChildren\"]]]]],[\"q2-tab-pane.cjs\",[[1,\"q2-tab-pane\",{\"value\":[513],\"label\":[513],\"name\":[513],\"selected\":[516],\"badgeCount\":[514,\"badge-count\"],\"badgeDescription\":[513,\"badge-description\"],\"badgeTheme\":[513,\"badge-theme\"],\"badgeStatus\":[513,\"badge-status\"],\"index\":[2],\"guid\":[2]}]]],[\"q2-tooltip.cjs\",[[1,\"q2-tooltip\",{\"label\":[513],\"block\":[516],\"multiline\":[516],\"persistent\":[516],\"immediate\":[516],\"focusable\":[516],\"position\":[513],\"focusClass\":[32]},[[0,\"keyup\",\"keyUpHandler\"],[2,\"focus\",\"focusCaptureHandler\"],[0,\"focus\",\"focusHandler\"],[0,\"focusout\",\"focusOutHandler\"]]]]],[\"tecton-tab-pane.cjs\",[[1,\"tecton-tab-pane\",{\"value\":[513],\"label\":[513],\"name\":[513],\"selected\":[516],\"index\":[2],\"guid\":[2],\"provided\":[516],\"url\":[513],\"moduleId\":[513,\"module-id\"],\"minHeight\":[513,\"min-height\"],\"badgeCount\":[514,\"badge-count\"],\"badgeDescription\":[513,\"badge-description\"],\"badgeTheme\":[513,\"badge-theme\"],\"badgeStatus\":[513,\"badge-status\"],\"authPayload\":[16],\"showForm\":[4,\"show-form\"],\"_showForm\":[32]}]]],[\"q2-icon.cjs\",[[1,\"q2-icon\",{\"type\":[513],\"label\":[513],\"inline\":[516]}]]],[\"q2-dropdown-item.cjs\",[[1,\"q2-dropdown-item\",{\"disabled\":[516],\"removable\":[516],\"separator\":[516],\"label\":[1537],\"value\":[513],\"ariaLabel\":[1537,\"aria-label\"]},[[0,\"focus\",\"onHostElementFocus\"]]]]],[\"q2-avatar.cjs\",[[1,\"q2-avatar\",{\"name\":[513],\"initials\":[513],\"src\":[513],\"icon\":[1],\"badSrc\":[32],\"isLoaded\":[32]}]]],[\"q2-checkbox.cjs\",[[1,\"q2-checkbox\",{\"checked\":[1540],\"disabled\":[516],\"hasError\":[516,\"has-error\"],\"hideLabel\":[1540,\"hide-label\"],\"indeterminate\":[516],\"label\":[1537],\"name\":[513],\"readonly\":[516],\"type\":[513],\"value\":[513],\"groupDisabled\":[516,\"group-disabled\"],\"alignment\":[513],\"description\":[513],\"ariaLabel\":[1537,\"aria-label\"]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-optgroup_2.cjs\",[[1,\"q2-option\",{\"role\":[513],\"display\":[1025],\"value\":[513],\"disabled\":[516],\"disabledGroup\":[516,\"disabled-group\"],\"selected\":[516],\"multiline\":[516],\"active\":[516],\"_multiSelectHidden\":[516,\"_multiselecthidden\"]}],[1,\"q2-optgroup\",{\"disabled\":[516],\"label\":[513],\"hidden\":[32]}]]],[\"q2-message.cjs\",[[1,\"q2-message\",{\"type\":[513],\"appearance\":[513],\"description\":[516],\"presentToggle\":[32],\"present\":[64]},[[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-input.cjs\",[[1,\"q2-input\",{\"value\":[1025],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"type\":[513],\"placeholder\":[513],\"disabled\":[516],\"autocomplete\":[513],\"autocorrect\":[513],\"autocapitalize\":[513],\"autofocus\":[516],\"hideMessages\":[516,\"hide-messages\"],\"iconLeft\":[513,\"icon-left\"],\"iconRight\":[513,\"icon-right\"],\"readonly\":[516],\"clearable\":[516],\"optional\":[516],\"min\":[514],\"max\":[514],\"step\":[514],\"formatModifier\":[513,\"format-modifier\"],\"maxlength\":[1538],\"pseudo\":[516],\"showVisibilityToggle\":[516,\"show-visibility-toggle\"],\"textHidden\":[1540,\"text-hidden\"],\"badgeValue\":[513,\"badge-value\"],\"badgeTheme\":[513,\"badge-theme\"],\"role\":[1],\"ariaControls\":[1,\"aria-controls\"],\"ariaOwns\":[1,\"aria-owns\"],\"ariaHaspopup\":[1,\"aria-haspopup\"],\"ariaExpanded\":[1,\"aria-expanded\"],\"ariaActivedescendant\":[1,\"aria-activedescendant\"],\"current\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"errors\":[16],\"hints\":[16],\"formattedValueObject\":[32],\"hasFocus\":[32]},[[0,\"focus\",\"onHostElementFocus\"],[0,\"change\",\"onHostElementChange\"]]]]],[\"q2-option-list.cjs\",[[1,\"q2-option-list\",{\"role\":[513],\"customSearch\":[516,\"custom-search\"],\"noSelect\":[516,\"no-select\"],\"align\":[513],\"selectedOptions\":[1040],\"multiple\":[516],\"disabled\":[516],\"showSelected\":[1540,\"show-selected\"],\"type\":[1],\"label\":[1],\"hasOptions\":[32],\"setDefaultActiveElement\":[64],\"setActiveElement\":[64],\"handleExternalKeydown\":[64],\"getContents\":[64],\"getOptions\":[64]},[[0,\"focus\",\"delegateFocus\"],[0,\"click\",\"handleClick\"]]]]],[\"q2-badge.cjs\",[[1,\"q2-badge\",{\"value\":[514],\"maxLength\":[514,\"max-length\"],\"size\":[513],\"theme\":[513],\"status\":[513]}]]],[\"click-elsewhere_2.cjs\",[[1,\"q2-popover\",{\"direction\":[513],\"align\":[513],\"open\":[1540],\"block\":[516],\"minHeight\":[2,\"min-height\"],\"controlElement\":[16],\"currentDirection\":[32],\"show\":[32],\"toggle\":[64],\"scrollContainerTo\":[64]},[[0,\"popoverState\",\"popoverStateHandler\"]]],[0,\"click-elsewhere\"]]],[\"q2-btn_2.cjs\",[[1,\"q2-btn\",{\"ariaExpanded\":[1,\"aria-expanded\"],\"ariaHasPopup\":[1,\"aria-has-popup\"],\"ariaControls\":[1,\"aria-controls\"],\"ariaSelected\":[1,\"aria-selected\"],\"ariaPressed\":[1,\"aria-pressed\"],\"description\":[1],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"tabIndex\":[2,\"tab-index\"],\"intent\":[1537],\"disabled\":[516],\"type\":[513],\"size\":[513],\"loading\":[516],\"badge\":[516],\"active\":[516],\"block\":[516],\"color\":[1537],\"fab\":[516],\"ariaLabel\":[1537,\"aria-label\"],\"iconPosition\":[32]},[[2,\"click\",\"disable\"],[0,\"focus\",\"delegateFocus\"]]],[1,\"q2-loading\",{\"type\":[513],\"shape\":[513],\"modifiers\":[513],\"counts\":[513],\"label\":[1537],\"inline\":[516],\"ariaLabel\":[1537,\"aria-label\"]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"q2-calendar.cjs\",[[1,\"q2-calendar\",{\"value\":[1537],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"optional\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[1540],\"open\":[1540],\"typeable\":[516],\"clearable\":[516],\"placeholder\":[513],\"disabledMsg\":[513,\"disabled-msg\"],\"calendarLabel\":[513,\"calendar-label\"],\"disclaimer\":[513],\"displayFormat\":[513,\"display-format\"],\"startDate\":[513,\"start-date\"],\"endDate\":[513,\"end-date\"],\"cutoffTime\":[513,\"cutoff-time\"],\"daysOfWeekChecksum\":[514,\"days-of-week-checksum\"],\"assume\":[513],\"hints\":[1040],\"errors\":[1040],\"invalidDates\":[16],\"validDates\":[16],\"popoverDirection\":[1025,\"popover-direction\"],\"popoverAlignment\":[1,\"popover-alignment\"],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popDirection\":[513,\"pop-direction\"],\"onsuccess\":[16],\"buttonLabel\":[513,\"button-label\"],\"ariaLabel\":[1537,\"aria-label\"],\"keyboardSelection\":[32],\"typedValue\":[32],\"dateList\":[32],\"hintMessage\":[32],\"hintMessageType\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"error\",\"defaultErrorHandler\"],[0,\"success\",\"defaultSuccessHandler\"],[0,\"focus\",\"delegateFocus\"],[0,\"clear\",\"handleClear\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"]]]]],[\"q2-select.cjs\",[[1,\"q2-select\",{\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"value\":[1025],\"selectedOptions\":[1040],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"listLabel\":[1,\"list-label\"],\"errors\":[16],\"multiple\":[516],\"minRows\":[2,\"min-rows\"],\"popDirection\":[513,\"pop-direction\"],\"searchable\":[516],\"multilineOptions\":[516,\"multiline-options\"],\"optional\":[516],\"placeholder\":[513],\"hoist\":[4],\"ariaLabel\":[1537,\"aria-label\"],\"open\":[32],\"showSelected\":[32],\"searchText\":[32],\"hasCustomDisplay\":[32],\"inputFocused\":[32],\"statusMessage\":[32],\"prioritizeSearch\":[32],\"structuredSelectedOptions\":[32]},[[0,\"keydown\",\"keydownHandler\"],[0,\"change\",\"onHostElementChange\"],[0,\"input\",\"onHostElementInput\"],[0,\"focus\",\"delegateFocus\"],[0,\"focusout\",\"handleFocusout\"],[0,\"displayChanged\",\"handleSelectedDisplay\"]]]]],[\"q2-action-sheet.cjs\",[[1,\"q2-action-sheet\",{\"data\":[1040],\"title\":[1],\"hideClose\":[4,\"hide-close\"],\"isScrollable\":[32],\"renderStatus\":[32],\"hide\":[64],\"show\":[64]}]]],[\"q2-dropdown.cjs\",[[1,\"q2-dropdown\",{\"type\":[513],\"icon\":[513],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"disabled\":[516],\"name\":[513],\"context\":[513],\"contextValue\":[513,\"context-value\"],\"resolvedType\":[513,\"resolved-type\"],\"additionalContext\":[513,\"additional-context\"],\"block\":[516],\"open\":[1540],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popoverDirection\":[1025,\"popover-direction\"],\"popoverAlignment\":[1025,\"popover-alignment\"],\"alignment\":[513],\"popDirection\":[513,\"pop-direction\"],\"ariaLabel\":[1537,\"aria-label\"]},[[0,\"focus\",\"delegateFocus\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"]]]]],[\"q2-data-table.cjs\",[[1,\"q2-data-table\",{\"density\":[1537],\"bordered\":[1540],\"shadowed\":[1540],\"selectable\":[1540],\"clickable\":[1540],\"loading\":[1540],\"hideCaption\":[1540,\"hide-caption\"],\"caption\":[1025],\"selectMode\":[1025,\"select-mode\"],\"hideClickable\":[1028,\"hide-clickable\"],\"headers\":[1040],\"rows\":[1040],\"serializedHeaders\":[32],\"serializedRows\":[32],\"hasExpandableRows\":[32],\"hasDropdowns\":[32],\"allRowsSelected\":[32],\"checkSlotCount\":[32]},[[0,\"click\",\"onClickListener\"]]]]],[\"q2-editable-field.cjs\",[[1,\"q2-editable-field\",{\"value\":[1537],\"editing\":[1540],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"type\":[513],\"formatModifier\":[513,\"format-modifier\"],\"truncated\":[516],\"maxlength\":[514],\"persistentLabel\":[516,\"persistent-label\"],\"disabled\":[516],\"block\":[516],\"hints\":[16],\"errors\":[16],\"ariaLabel\":[1537,\"aria-label\"],\"formattedValue\":[32]},[[0,\"change\",\"onHostElementChange\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-pagination.cjs\",[[1,\"q2-pagination\",{\"recordType\":[1,\"record-type\"],\"perPage\":[2,\"per-page\"],\"total\":[514],\"page\":[1538],\"pages\":[1538],\"recordsOnly\":[1540,\"records-only\"],\"pagesOnly\":[1540,\"pages-only\"],\"isSmall\":[32]},[[0,\"focus\",\"onHostElementFocus\"]]]]],[\"q2-pill.cjs\",[[1,\"q2-pill\",{\"hoist\":[4],\"disabled\":[516],\"active\":[1540],\"open\":[1540],\"multiple\":[516],\"maxLength\":[514,\"max-length\"],\"label\":[513],\"value\":[1537],\"theme\":[513],\"selectedOptions\":[1040],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popoverDirection\":[1,\"popover-direction\"],\"popoverAlignment\":[1025,\"popover-alignment\"],\"optionListLabel\":[1,\"option-list-label\"],\"optionCount\":[32],\"selectedOptionElements\":[32]},[[0,\"focus\",\"delegateFocus\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"],[0,\"displayChanged\",\"handleSelectedDisplay\"]]]]],[\"q2-tab-container.cjs\",[[1,\"q2-tab-container\",{\"value\":[1537],\"type\":[513],\"name\":[513],\"color\":[513],\"noPrint\":[516,\"no-print\"],\"hasLeft\":[32],\"hasRight\":[32],\"scrollEnabled\":[32],\"showScrollLeft\":[32],\"showScrollRight\":[32],\"tabs\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[9,\"resize\",\"onResize\"],[0,\"focus\",\"onFocus\"],[0,\"badge\",\"onBadge\"]]]]],[\"q2-tag.cjs\",[[1,\"q2-tag\",{\"hoist\":[4],\"open\":[1540],\"label\":[513],\"theme\":[513],\"popoverMinHeight\":[2,\"popover-min-height\"],\"popoverDirection\":[1,\"popover-direction\"],\"popoverAlignment\":[1025,\"popover-alignment\"],\"optionListLabel\":[1,\"option-list-label\"],\"optionCount\":[32]},[[0,\"focus\",\"delegateFocus\"],[0,\"popoverStateChanged\",\"popoverStateHandler\"]]]]],[\"q2-carousel.cjs\",[[4,\"q2-carousel\",{\"autoPlay\":[516,\"auto-play\"],\"fullWidthPanes\":[516,\"full-width-panes\"],\"hidePagination\":[516,\"hide-pagination\"],\"showNavigationArrows\":[516,\"show-navigation-arrows\"],\"label\":[513],\"index\":[1538],\"ariaLabel\":[513,\"aria-label\"],\"universalCarouselOptions\":[32],\"fullWidthDisplayOptions\":[32],\"activePaneIndex\":[32],\"applyFocus\":[32],\"applyPaginationFocus\":[32],\"autoPlayInProgress\":[32],\"compactMode\":[32],\"carouselWrapperWidth\":[32]},[[0,\"change\",\"onHostElementChange\"],[0,\"clickCarouselPane\",\"carouselPaneClicked\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-month-picker.cjs\",[[1,\"q2-month-picker\",{\"year\":[1538],\"disabledMonths\":[16],\"today\":[1],\"selectedIndex\":[32],\"focusedIndex\":[32],\"showYearLayer\":[32]}]]],[\"q2-section.cjs\",[[1,\"q2-section\",{\"label\":[513],\"collapsible\":[516],\"noCollapseIcon\":[516,\"no-collapse-icon\"],\"expanded\":[1540],\"contentHeight\":[32],\"hideContent\":[32],\"hasYieldedHeader\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-stepper.cjs\",[[1,\"q2-stepper\",{\"currentStep\":[1538,\"current-step\"],\"stepCount\":[1026,\"step-count\"],\"lastEnabledStep\":[1026,\"last-enabled-step\"],\"contentChangeTriggerCount\":[32],\"scrollEnabled\":[32],\"showScrollLeft\":[32],\"showScrollRight\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"],[0,\"statusChange\",\"statusChangeHandler\"],[0,\"contentChange\",\"contentChangeHandler\"]]]]],[\"q2-card.cjs\",[[1,\"q2-card\",{\"title\":[513],\"description\":[513],\"avatarName\":[513,\"avatar-name\"],\"avatarInitials\":[513,\"avatar-initials\"],\"avatarIcon\":[513,\"avatar-icon\"],\"avatarSrc\":[513,\"avatar-src\"],\"isSmall\":[516,\"is-small\"],\"bar\":[513],\"isStatic\":[516,\"is-static\"],\"isTouch\":[516,\"is-touch\"],\"url\":[513],\"target\":[513],\"type\":[513],\"isAutoTouch\":[32],\"isAutoSmall\":[32]},[[0,\"focus\",\"onHostElementFocus\"]]]]],[\"q2-chart-donut.cjs\",[[1,\"q2-chart-donut\",{\"chartName\":[513,\"chart-name\"],\"summaryIcon\":[513,\"summary-icon\"],\"summaryName\":[513,\"summary-name\"],\"innerRadius\":[1025,\"inner-radius\"],\"outerRadius\":[1025,\"outer-radius\"],\"minSliceSize\":[1,\"min-slice-size\"],\"selectedOffset\":[2,\"selected-offset\"],\"hoverScaleSize\":[2,\"hover-scale-size\"],\"format\":[513],\"isClickable\":[516,\"is-clickable\"],\"data\":[16],\"selectedId\":[1,\"selected-id\"],\"hoveredId\":[32],\"selectById\":[64],\"selectByIndex\":[64],\"clearSelection\":[64]},[[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-checkbox-group.cjs\",[[1,\"q2-checkbox-group\",{\"label\":[513],\"value\":[1040],\"disabled\":[516],\"readonly\":[516],\"optional\":[516],\"hasError\":[516,\"has-error\"]},[[0,\"change\",\"onHostElementChange\"]]]]],[\"q2-radio-group.cjs\",[[1,\"q2-radio-group\",{\"label\":[513],\"value\":[1025],\"disabled\":[516],\"name\":[513],\"optional\":[516],\"readonly\":[516],\"tileLayout\":[1540,\"tile-layout\"],\"tileAlignment\":[513,\"tile-alignment\"],\"hasError\":[516,\"has-error\"],\"tilelayout\":[1540]},[[0,\"change\",\"onHostElementChange\"],[0,\"focus\",\"delegateFocus\"],[0,\"keydown\",\"keydownHandler\"]]]]],[\"q2-stepper-vertical.cjs\",[[1,\"q2-stepper-vertical\",{\"currentStepId\":[1537,\"current-step-id\"],\"structuredPanes\":[32]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"],[0,\"statusChange\",\"statusChangeHandler\"]]]]],[\"q2-textarea.cjs\",[[1,\"q2-textarea\",{\"value\":[1025],\"label\":[513],\"hideLabel\":[516,\"hide-label\"],\"hideMessages\":[516,\"hide-messages\"],\"optional\":[516],\"placeholder\":[513],\"disabled\":[516],\"readonly\":[516],\"spellcheck\":[516],\"maxlength\":[1538],\"rows\":[514],\"cols\":[514],\"resize\":[513],\"errors\":[16],\"hints\":[16],\"hasFocus\":[32],\"downParams\":[32]},[[0,\"focus\",\"onHostElementFocus\"],[0,\"change\",\"onHostElementChange\"]]]]],[\"q2-carousel-pane.cjs\",[[4,\"q2-carousel-pane\",{\"index\":[2],\"siblingCount\":[2,\"sibling-count\"],\"isActivePane\":[516,\"is-active-pane\"],\"label\":[513]}]]],[\"q2-chart-area.cjs\",[[1,\"q2-chart-area\",{\"data\":[16],\"alignChartName\":[513,\"align-chart-name\"],\"chartName\":[513,\"chart-name\"],\"chartSubTitle\":[513,\"chart-sub-title\"],\"lineColor\":[513,\"line-color\"],\"pointerLineColor\":[513,\"pointer-line-color\"],\"pointerLineStyle\":[513,\"pointer-line-style\"],\"areaColor\":[513,\"area-color\"],\"dataNamesOverflow\":[513,\"data-names-overflow\"],\"dataNamesWidth\":[514,\"data-names-width\"],\"format\":[513],\"formatModifier\":[513,\"format-modifier\"],\"hideNameAxisLabels\":[516,\"hide-name-axis-labels\"],\"hideValueAxisLabels\":[516,\"hide-value-axis-labels\"],\"offsetDataNames\":[516,\"offset-data-names\"],\"offsetDataValues\":[516,\"offset-data-values\"],\"showChartName\":[516,\"show-chart-name\"],\"showDatapointLabels\":[516,\"show-datapoint-labels\"],\"showGradient\":[516,\"show-gradient\"],\"gridLines\":[513,\"grid-lines\"]}]]],[\"q2-chart-bar.cjs\",[[1,\"q2-chart-bar\",{\"data\":[16],\"alignChartName\":[513,\"align-chart-name\"],\"chartName\":[513,\"chart-name\"],\"chartSubTitle\":[513,\"chart-sub-title\"],\"color\":[513],\"dataNamesOverflow\":[513,\"data-names-overflow\"],\"dataNamesWidth\":[514,\"data-names-width\"],\"format\":[513],\"formatModifier\":[513,\"format-modifier\"],\"hideBarLabels\":[516,\"hide-bar-labels\"],\"hideValueAxisLabels\":[516,\"hide-value-axis-labels\"],\"offsetDataNames\":[516,\"offset-data-names\"],\"offsetDataValues\":[516,\"offset-data-values\"],\"orientation\":[513],\"showChartName\":[516,\"show-chart-name\"],\"sort\":[516]}]]],[\"q2-loading-element.cjs\",[[0,\"q2-loading-element\",{\"shape\":[513],\"width\":[513],\"height\":[513],\"borderRadius\":[513,\"border-radius\"]}]]],[\"q2-loc.cjs\",[[1,\"q2-loc\",{\"value\":[513],\"substitutions\":[16]}]]],[\"q2-radio.cjs\",[[1,\"q2-radio\",{\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"value\":[513],\"disabled\":[516],\"checked\":[516],\"tabIndex\":[2,\"tab-index\"],\"name\":[513],\"groupDisabled\":[4,\"group-disabled\"],\"groupReadonly\":[4,\"group-readonly\"],\"groupTileLayout\":[4,\"group-tile-layout\"],\"ariaLabel\":[1537,\"aria-label\"]},[[0,\"click\",\"onHostClick\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-stepper-pane.cjs\",[[1,\"q2-stepper-pane\",{\"label\":[513],\"description\":[513],\"isActive\":[516,\"is-active\"],\"showWithChildren\":[516,\"show-with-children\"],\"status\":[513],\"isChildActive\":[32]},[[0,\"activeChange\",\"checkForActiveChildren\"]]]]],[\"q2-tab-pane.cjs\",[[1,\"q2-tab-pane\",{\"value\":[513],\"label\":[513],\"name\":[513],\"selected\":[516],\"badgeCount\":[514,\"badge-count\"],\"badgeDescription\":[513,\"badge-description\"],\"badgeTheme\":[513,\"badge-theme\"],\"badgeStatus\":[513,\"badge-status\"],\"index\":[2],\"guid\":[2]}]]],[\"q2-tooltip.cjs\",[[1,\"q2-tooltip\",{\"label\":[513],\"block\":[516],\"multiline\":[516],\"persistent\":[516],\"immediate\":[516],\"focusable\":[516],\"position\":[513],\"focusClass\":[32]},[[0,\"keyup\",\"keyUpHandler\"],[2,\"focus\",\"focusCaptureHandler\"],[0,\"focus\",\"focusHandler\"],[0,\"focusout\",\"focusOutHandler\"]]]]],[\"tecton-tab-pane.cjs\",[[1,\"tecton-tab-pane\",{\"value\":[513],\"label\":[513],\"name\":[513],\"selected\":[516],\"index\":[2],\"guid\":[2],\"provided\":[516],\"url\":[513],\"moduleId\":[513,\"module-id\"],\"minHeight\":[513,\"min-height\"],\"badgeCount\":[514,\"badge-count\"],\"badgeDescription\":[513,\"badge-description\"],\"badgeTheme\":[513,\"badge-theme\"],\"badgeStatus\":[513,\"badge-status\"],\"authPayload\":[16],\"showForm\":[4,\"show-form\"],\"_showForm\":[32]}]]],[\"q2-icon.cjs\",[[1,\"q2-icon\",{\"type\":[513],\"label\":[513],\"inline\":[516]}]]],[\"q2-dropdown-item.cjs\",[[1,\"q2-dropdown-item\",{\"disabled\":[516],\"removable\":[516],\"separator\":[516],\"label\":[1537],\"value\":[513],\"ariaLabel\":[1537,\"aria-label\"]},[[0,\"focus\",\"onHostElementFocus\"]]]]],[\"q2-avatar.cjs\",[[1,\"q2-avatar\",{\"name\":[513],\"initials\":[513],\"src\":[513],\"icon\":[1],\"badSrc\":[32],\"isLoaded\":[32]}]]],[\"q2-checkbox.cjs\",[[1,\"q2-checkbox\",{\"checked\":[1540],\"disabled\":[516],\"hasError\":[516,\"has-error\"],\"hideLabel\":[1540,\"hide-label\"],\"indeterminate\":[516],\"label\":[1537],\"name\":[513],\"readonly\":[516],\"type\":[513],\"value\":[513],\"groupDisabled\":[516,\"group-disabled\"],\"alignment\":[513],\"description\":[513],\"ariaLabel\":[1537,\"aria-label\"]},[[0,\"change\",\"defaultChangeHandler\"],[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-optgroup_2.cjs\",[[1,\"q2-option\",{\"role\":[513],\"display\":[1025],\"value\":[513],\"disabled\":[516],\"disabledGroup\":[516,\"disabled-group\"],\"selected\":[516],\"multiline\":[516],\"active\":[516],\"_multiSelectHidden\":[516,\"_multiselecthidden\"]}],[1,\"q2-optgroup\",{\"disabled\":[516],\"label\":[513],\"hidden\":[32]}]]],[\"q2-message.cjs\",[[1,\"q2-message\",{\"type\":[513],\"appearance\":[513],\"description\":[516],\"presentToggle\":[32],\"present\":[64]},[[0,\"focus\",\"delegateFocus\"]]]]],[\"q2-input.cjs\",[[1,\"q2-input\",{\"value\":[1025],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"type\":[513],\"placeholder\":[513],\"disabled\":[516],\"autocomplete\":[513],\"autocorrect\":[513],\"autocapitalize\":[513],\"autofocus\":[516],\"hideMessages\":[516,\"hide-messages\"],\"iconLeft\":[513,\"icon-left\"],\"iconRight\":[513,\"icon-right\"],\"readonly\":[516],\"clearable\":[516],\"optional\":[516],\"min\":[514],\"max\":[514],\"step\":[514],\"formatModifier\":[513,\"format-modifier\"],\"maxlength\":[1538],\"pseudo\":[516],\"showVisibilityToggle\":[516,\"show-visibility-toggle\"],\"textHidden\":[1540,\"text-hidden\"],\"badgeValue\":[513,\"badge-value\"],\"badgeTheme\":[513,\"badge-theme\"],\"role\":[1],\"ariaControls\":[1,\"aria-controls\"],\"ariaOwns\":[1,\"aria-owns\"],\"ariaHaspopup\":[1,\"aria-haspopup\"],\"ariaExpanded\":[1,\"aria-expanded\"],\"ariaActivedescendant\":[1,\"aria-activedescendant\"],\"current\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"errors\":[16],\"hints\":[16],\"formattedValueObject\":[32],\"hasFocus\":[32]},[[0,\"focus\",\"onHostElementFocus\"],[0,\"change\",\"onHostElementChange\"]]]]],[\"q2-option-list.cjs\",[[1,\"q2-option-list\",{\"customSearch\":[516,\"custom-search\"],\"noSelect\":[516,\"no-select\"],\"align\":[513],\"selectedOptions\":[1040],\"multiple\":[516],\"disabled\":[516],\"showSelected\":[1540,\"show-selected\"],\"type\":[1],\"label\":[1],\"hasOptions\":[32],\"setDefaultActiveElement\":[64],\"setActiveElement\":[64],\"handleExternalKeydown\":[64],\"getContents\":[64],\"getOptions\":[64]},[[0,\"focus\",\"delegateFocus\"],[0,\"click\",\"handleClick\"]]]]],[\"q2-badge.cjs\",[[1,\"q2-badge\",{\"value\":[514],\"maxLength\":[514,\"max-length\"],\"size\":[513],\"theme\":[513],\"status\":[513]}]]],[\"click-elsewhere_2.cjs\",[[1,\"q2-popover\",{\"direction\":[513],\"align\":[513],\"open\":[1540],\"block\":[516],\"minHeight\":[2,\"min-height\"],\"controlElement\":[16],\"currentDirection\":[32],\"show\":[32],\"toggle\":[64],\"scrollContainerTo\":[64]},[[0,\"popoverState\",\"popoverStateHandler\"]]],[0,\"click-elsewhere\"]]],[\"q2-btn_2.cjs\",[[1,\"q2-btn\",{\"ariaExpanded\":[1,\"aria-expanded\"],\"ariaHasPopup\":[1,\"aria-has-popup\"],\"ariaControls\":[1,\"aria-controls\"],\"ariaSelected\":[1,\"aria-selected\"],\"ariaPressed\":[1,\"aria-pressed\"],\"description\":[1],\"label\":[1537],\"hideLabel\":[1540,\"hide-label\"],\"tabIndex\":[2,\"tab-index\"],\"intent\":[1537],\"disabled\":[516],\"type\":[513],\"size\":[513],\"loading\":[516],\"badge\":[516],\"active\":[516],\"block\":[516],\"color\":[1537],\"fab\":[516],\"ariaLabel\":[1537,\"aria-label\"],\"iconPosition\":[32]},[[2,\"click\",\"disable\"],[0,\"focus\",\"delegateFocus\"]]],[1,\"q2-loading\",{\"type\":[513],\"shape\":[513],\"modifiers\":[513],\"counts\":[513],\"label\":[1537],\"inline\":[516],\"ariaLabel\":[1537,\"aria-label\"]}]]]]"), options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/q2-textarea.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2597758.js');
-const index$1 = require('./index-d42bed64.js');
+const index$1 = require('./index-f6545293.js');
 
 const stylesCss = "*{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 #33b4ff #06C)}: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;margin:var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-6x, 30px))) 0 var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-6x, 30px)));font-size:var(--tct-textarea-font-size, var(--t-textarea-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}label{--comp-label-padding:var(--tct-textarea-label-padding, 0 var(--tct-textarea-label-padding-right, var(--t-textarea-label-padding-right, 0)) 0 var(--tct-textarea-label-padding-left, var(--t-textarea-label-padding-left, 0)));--comp-label-margin:var(--tct-textarea-label-margin, var(--tct-textarea-label-margin-top, var(--t-textarea-label-margin-top, 0)) 0 var(--tct-textarea-label-margin-bottom, var(--t-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));display:block;padding:var(--comp-label-padding);margin:var(--comp-label-margin);color:var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit));font-size:var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit));font-weight:var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600));text-transform:var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none));letter-spacing:var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal));transition:color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.optional-tag{--comp-label-optional-margin:var(--tct-textarea-label-optional-margin, 0 0 0 var(--tct-textarea-label-optional-margin-left, var(--t-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);color:var(--tct-textarea-label-optional-font-color, var(--t-textarea-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-textarea-label-optional-font-size, var(--t-textarea-label-optional-font-size, 12px));font-weight:var(--tct-textarea-label-optional-font-weight, var(--t-textarea-label-optional-font-weight, 400))}.input-container{min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));height:100%;--comp-default-border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 3px));--comp-textarea-border-top-left-radius:var(--tct-textarea-border-top-left-radius, var(--t-textarea-border-top-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-top-right-radius:var(--tct-textarea-border-top-right-radius, var(--t-textarea-border-top-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-right-radius:var(--tct-textarea-border-bottom-right-radius, var(--t-textarea-border-bottom-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-left-radius:var(--tct-textarea-border-bottom-left-radius, var(--t-textarea-border-bottom-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-radius:var(--comp-textarea-border-top-left-radius)\n      var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n      var(--comp-textarea-border-bottom-left-radius);--comp-textarea-border-width:var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) var(--tct-textarea-border-right-width, var(--t-textarea-border-right-width, 1px)) var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) var(--tct-textarea-border-left-width, var(--t-textarea-border-left-width, 1px));--comp-textarea-focus-border-width:var(--tct-textarea-focus-border-top-width, var(--t-textarea-focus-border-top-width, 1px)) var(--tct-textarea-focus-border-right-width, var(--t-textarea-focus-border-right-width, 1px)) var(--tct-textarea-focus-border-bottom-width, var(--t-textarea-focus-border-bottom-width, 1px)) var(--tct-textarea-focus-border-left-width, var(--t-textarea-focus-border-left-width, 1px));--comp-textarea-icon-clearance:34px}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(--tct-textarea-disabled-opacity, var(--t-textarea-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}.content-container{--comp-textarea-min-height:44px;--comp-textarea-min-width:150px;position:relative;display:inline-block;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));min-width:var(--tct-textarea-min-width, var(--t-textarea-min-width, var(--comp-textarea-min-width)))}:host(:not([cols])) .content-container{width:100%}textarea{--comp-textarea-padding:var(--tct-textarea-padding, var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))) var(--tct-textarea-horizontal-padding, var(--t-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))));resize:none;height:100%;-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));padding:var(--comp-textarea-padding);background:var(--tct-textarea-background, var(--tct-textarea-bg, var(--t-textarea-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)))))));color:var(--tct-textarea-font-color, var(--t-textarea-font-color, var(--t-input-font-color, inherit)));border-width:var(--comp-textarea-border-width);border-style:solid;border-color:var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #949494)))));border-radius:var(--comp-textarea-border-radius);box-shadow:var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none));scrollbar-width:thin;scrollbar-color:var(--t-a11y-gray-color) transparent;--comp-textarea-tween:var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));transition:border-width var(--comp-textarea-tween), border-color var(--comp-textarea-tween), box-shadow var(--comp-textarea-tween)}textarea::-webkit-scrollbar{width:var(--app-scale-1x);height:var(--app-scale-1x);margin:var(--app-scale-1x)}textarea::-webkit-scrollbar-thumb{background:var(--t-a11y-gray-color);border-radius:2px}textarea::-webkit-scrollbar-track{background:transparent}textarea:not([cols]){width:100%}textarea:focus{border-width:var(--comp-textarea-focus-border-width, 1px);border-color:var(--tct-textarea-focus-border-color, var(--t-textarea-focus-border-color, var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--t-a11y-active-gray-color-AA, #404040)))));box-shadow:var(--const-double-focus-ring), var(--tct-textarea-focus-box-shadow, var(--t-textarea-focus-box-shadow, 0 0 transparent))}textarea::placeholder{color:var(--tct-textarea-placeholder-font-color, var(--t-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))))}textarea[disabled]{cursor:not-allowed}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance)}.has-error textarea:not(:focus){border-color:var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #c30000)))}q2-icon{margin-top:calc(var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) / 2);pointer-events:none;position:absolute;top:var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))));color:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))));right:0;margin-right:var(--tct-scale-2x, var(--app-scale-2x, 10px));--tct-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))));--t-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))))}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, var(--tct-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));box-shadow:var(--tct-textarea-message-box-shadow, var(--t-textarea-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))));transition:height var(--tct-textarea-messages-tween, var(--t-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:2px;z-index:1;position:absolute;width:100%;color:var(--tct-textarea-messages-font-color, var(--t-textarea-messages-font-color, inherit))}.has-error label{color:var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)))}.max-length{color:var(--tct-textarea-max-length-color, var(--t-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-textarea-max-length-font-size, var(--t-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));position:absolute;right:0}.btn-resize{--tct-textarea-resize-icon-padding:calc(\n      calc(\n              var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px))) - var(--tct-textarea-resize-icon-size, var(--t-textarea-resize-icon-size, 12px))\n          ) / 2\n  );width:var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)));height:var(--tct-textarea-resize-btn-height, var(--t-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px)));background:var(--tct-textarea-resize-btn-background, var(--t-textarea-resize-btn-background, transparent));stroke:var(--tct-textarea-resize-color, var(--t-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77))));border:0;position:absolute;right:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);bottom:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);display:block;padding:var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding));font-size:0}.btn-resize:focus{outline:none;box-shadow:none}:host([resize=both]) .btn-resize{cursor:se-resize}:host([resize=vertical]) .btn-resize{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";
 

package/dist/cjs/q2-tooltip.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c2597758.js');
-const index$1 = require('./index-d42bed64.js');
+const index$1 = require('./index-f6545293.js');
 
-const stylesCss = "*{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 #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.85))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:\"\";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 3px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay)}:host([block]) .tooltip{display:block}.tooltip:hover:before,.tooltip:hover:after,.tooltip.has-keyboard-focus:focus-within:before,.tooltip.has-keyboard-focus:focus-within:after,:host([persistent]) .tooltip:before,:host([persistent]) .tooltip:after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset)}:host([position=sw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(50%)}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}";
+const stylesCss = "*{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 #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background, var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.85)))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:\"\";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--comp-background);border-radius:var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 3px)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay)}:host([block]) .tooltip{display:block}.tooltip:hover:before,.tooltip:hover:after,.tooltip.has-keyboard-focus:focus-within:before,.tooltip.has-keyboard-focus:focus-within:after,:host([persistent]) .tooltip:before,:host([persistent]) .tooltip:after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset)}:host([position=sw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset)}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(50%)}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}";
 
 const Q2Tooltip = class {
   constructor(hostRef) {

package/dist/cjs/q2-tooltip.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"q2-tooltip.entry.cjs.js","mappings":"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","names":["overrideFocus","isEventFromElement","h"],"sources":["./src/components/q2-tooltip/styles.scss?tag=q2-tooltip&encapsulation=shadow","./src/components/q2-tooltip/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host([block]) {\n    display: block;\n}\n\n.tooltip {\n    --comp-background: #{var-list(var-prefixer(tooltip-background-color), --t-top-a3, rgba(13, 13, 13, 0.85))};\n    --comp-offset-default: calc(var(--app-scale-1x, 5px) * -1);\n    --comp-offset: #{var-list(var-prefixer(tooltip-offset), --comp-offset-default)};\n    --comp-position: #{var-list(var-prefixer(tooltip-position), --app-scale-1x, 5px)};\n    --comp-body-offset-default: calc(var(--app-scale-3x, 15px) * -1);\n    --comp-body-offset: #{var-list(var-prefixer(tooltip-body-offset), --comp-body-offset-default)};\n    --comp-duration: #{var-list(var-prefixer(tooltip-transition-duration), --app-duration-1, 0.2s)};\n    --comp-visible-duration: #{var-list(var-prefixer(tooltip-transition-visible-duration), 2s)};\n    --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 0s)};\n\n    display: inline-block;\n    position: relative;\n\n    &:hover {\n        --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 1s)};\n    }\n\n    // Tooltip arrow\n    &:before {\n        position: absolute;\n        z-index: 2;\n        width: 0;\n        height: 0;\n        color: var(--comp-background);\n        pointer-events: none;\n        content: '';\n        border: var-list(var-prefixer(tooltip-arrow-size), --app-scale-1x, 5px) solid transparent;\n    }\n\n    // Tooltip bubble\n    &:after {\n        --comp-padding: #{var-list(--app-scale-1x, 5px)} 8px;\n\n        position: absolute;\n        z-index: 1;\n        padding: var-list(var-prefixer(tooltip-padding), --comp-padding);\n        font-weight: var-list(var-prefixer(tooltip-font-weight), 600);\n        font-size: var-list(var-prefixer(tooltip-font-size), --app-font-size-small, 12px);\n        line-height: 1.5;\n        color: var-list(var-prefixer(tooltip-color), --app-white, #ffffff);\n        text-align: center;\n        text-decoration: none;\n        text-shadow: none;\n        text-transform: none;\n        letter-spacing: normal;\n        word-wrap: break-word;\n        white-space: pre;\n        pointer-events: none;\n        content: attr(aria-label);\n        background: var(--comp-background);\n        border-radius: var-list(var-prefixer(tooltip-border-radius), --app-border-radius-1, 3px);\n    }\n\n    &:before,\n    &:after {\n        display: inline-block;\n        visibility: hidden;\n        opacity: 0;\n        transition: all var(--comp-duration) ease-in-out var(--comp-delay);\n    }\n\n    :host([block]) & {\n        display: block;\n    }\n\n    // When to show the tooltip\n    &:hover,\n    &.has-keyboard-focus:focus-within,\n    :host([persistent]) & {\n        &:before,\n        &:after {\n            text-decoration: none;\n            visibility: visible;\n            opacity: 1;\n        }\n    }\n\n    @keyframes tooltippedFade {\n        from {\n            opacity: 0;\n        }\n\n        to {\n            opacity: 1;\n        }\n    }\n\n    &.has-generic-focus:focus-within {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade, tooltippedFade;\n            animation-direction: normal, reverse;\n            animation-duration: var(--comp-duration);\n            animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));\n        }\n    }\n    &.has-generic-focus-out {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade;\n            animation-direction: reverse;\n            animation-duration: var(--comp-duration);\n        }\n    }\n\n    :host([multiline]) & {\n        &:after {\n            width: max-content;\n            max-width: var-list(var-prefixer(tooltip-max-width), 200px);\n            word-break: break-word;\n            word-wrap: normal;\n            white-space: pre-line;\n            border-collapse: separate;\n            text-align: left;\n        }\n\n        :host([position='s']) &,\n        :host([position='n']) & {\n            &:after {\n                right: auto;\n                left: 50%;\n                transform: translateX(-50%);\n            }\n        }\n\n        :host([position='w']) &,\n        :host([position='e']) & {\n            &:after {\n                right: 100%;\n            }\n        }\n\n        &:hover,\n        &:active,\n        &:focus {\n            &:after {\n                display: table-cell;\n            }\n        }\n\n        &:focus-within {\n            &:after {\n                display: table-cell;\n            }\n        }\n    }\n\n    // Below\n    :host([position='s']) &,\n    :host([position='se']) &,\n    :host([position='sw']) & {\n        &:after {\n            top: 100%;\n            right: 50%;\n            margin-top: var(--comp-position);\n        }\n\n        &:before {\n            top: auto;\n            right: 50%;\n            bottom: var(--comp-offset);\n            margin-right: var(--comp-offset);\n            border-bottom-color: var(--comp-background);\n        }\n    }\n\n    // Above\n    :host([position='n']) &,\n    :host([position='ne']) &,\n    :host([position='nw']) & {\n        &:after {\n            right: 50%;\n            bottom: 100%;\n            margin-bottom: var(--comp-position);\n        }\n\n        &:before {\n            top: var(--comp-offset);\n            right: 50%;\n            bottom: auto;\n            margin-right: var(--comp-offset);\n            border-top-color: var(--comp-background);\n        }\n    }\n\n    :host([position='se']) &,\n    :host([position='ne']) & {\n        &:after {\n            right: auto;\n            left: 50%;\n            margin-left: var(--comp-body-offset);\n        }\n    }\n\n    :host([position='sw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n        }\n    }\n\n    :host([position='nw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n        }\n    }\n\n    // Centered\n    :host([position='s']) &,\n    :host([position='n']) & {\n        &:after {\n            transform: translateX(50%);\n        }\n    }\n\n    // Left side\n    :host([position='w']) & {\n        &:after {\n            right: 100%;\n            bottom: 50%;\n            margin-right: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            bottom: 50%;\n            left: var(--comp-offset);\n            margin-top: var(--comp-offset);\n            border-left-color: var(--comp-background);\n        }\n    }\n\n    // Right side\n    :host([position='e']) & {\n        &:after {\n            bottom: 50%;\n            left: 100%;\n            margin-left: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            right: var(--comp-offset);\n            bottom: 50%;\n            margin-top: var(--comp-offset);\n            border-right-color: var(--comp-background);\n        }\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Listen, State } from '@stencil/core';\nimport { isEventFromElement, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-tooltip',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Tooltip implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) block: boolean;\n    @Prop({ reflect: true }) multiline: boolean;\n    @Prop({ reflect: true }) persistent: boolean;\n    @Prop({ reflect: true }) immediate: boolean;\n    @Prop({ reflect: true }) focusable: boolean = false;\n    @Prop({ reflect: true }) position: 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se' = 'n';\n\n    @Element() hostElement: HTMLElement;\n    @State() focusClass: 'has-keyboard-focus' | 'has-generic-focus' | 'has-generic-focus-out';\n\n    tooltipElement: HTMLDivElement;\n    animationEndCount = 0;\n\n    /// LifeCycle Hooks ///\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    /// Getters ///\n    get shouldBeVisible() {\n        if (this.persistent) return true;\n        return this.hostElement.matches(':hover, :focus-within');\n    }\n\n    /// Helpers //\n    checkFocusClass() {\n        if (!this.shouldBeVisible) return;\n        const isKeyboardFocus = !!this.findFocusVisibleElement(document.activeElement);\n        this.focusClass = isKeyboardFocus ? 'has-keyboard-focus' : 'has-generic-focus';\n        if (isKeyboardFocus) return;\n    }\n\n    hideTooltip() {\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    animationEndHandler() {\n        this.animationEndCount = this.animationEndCount + 1;\n        const { focusClass, animationEndCount } = this;\n\n        // animationEnd is fired once for :before and once for :after pseudo elements\n        // there are multiple animations defined for .has-generic-focus\n        // so we need to wait for all of them to finish before we can remove the class\n        if (focusClass === 'has-generic-focus-out' || (focusClass === 'has-generic-focus' && animationEndCount === 4)) {\n            this.focusClass = null;\n            this.animationEndCount = 0;\n        }\n    }\n\n    findFocusVisibleElement(element: Element) {\n        if (!element) return;\n        if (element.shadowRoot) element = this.findFocusVisibleElement(element.shadowRoot.activeElement);\n        return element?.matches(':focus-visible') ? element : null;\n    }\n\n    /// Listeners ///\n    @Listen('keyup')\n    keyUpHandler(event: KeyboardEvent) {\n        switch (event.key) {\n            case 'Esc':\n            case 'Escape':\n                this.hideTooltip();\n                break;\n        }\n    }\n\n    @Listen('focus', { capture: true })\n    focusCaptureHandler() {\n        this.checkFocusClass();\n    }\n\n    @Listen('focus')\n    focusHandler(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.focusable) return;\n        this.tooltipElement.focus();\n    }\n\n    @Listen('focusout')\n    focusOutHandler() {\n        if (this.shouldBeVisible) return;\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    render() {\n        const { focusClass } = this;\n        const classes = ['tooltip'];\n        if (focusClass) classes.push(focusClass);\n\n        return this.label ? (\n            <div\n                tabindex={this.focusable ? 0 : undefined}\n                ref={el => (this.tooltipElement = el)}\n                class={classes.join(' ')}\n                aria-label={this.label}\n                onAnimationEnd={() => this.animationEndHandler()}\n                role=\"tooltip\"\n                test-id=\"tooltipContainer\"\n            >\n                <slot />\n            </div>\n        ) : (\n            <slot />\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-tooltip.entry.cjs.js","mappings":"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","names":["overrideFocus","isEventFromElement","h"],"sources":["./src/components/q2-tooltip/styles.scss?tag=q2-tooltip&encapsulation=shadow","./src/components/q2-tooltip/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host([block]) {\n    display: block;\n}\n\n.tooltip {\n    --comp-background: #{var-list(--tct-tooltip-background, var-prefixer(tooltip-background-color), --t-top-a3, rgba(13, 13, 13, 0.85))};\n    --comp-offset-default: calc(var(--app-scale-1x, 5px) * -1);\n    --comp-offset: #{var-list(var-prefixer(tooltip-offset), --comp-offset-default)};\n    --comp-position: #{var-list(var-prefixer(tooltip-position), --app-scale-1x, 5px)};\n    --comp-body-offset-default: calc(var(--app-scale-3x, 15px) * -1);\n    --comp-body-offset: #{var-list(var-prefixer(tooltip-body-offset), --comp-body-offset-default)};\n    --comp-duration: #{var-list(var-prefixer(tooltip-transition-duration), --app-duration-1, 0.2s)};\n    --comp-visible-duration: #{var-list(var-prefixer(tooltip-transition-visible-duration), 2s)};\n    --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 0s)};\n\n    display: inline-block;\n    position: relative;\n\n    &:hover {\n        --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 1s)};\n    }\n\n    // Tooltip arrow\n    &:before {\n        position: absolute;\n        z-index: 2;\n        width: 0;\n        height: 0;\n        color: var(--comp-background);\n        pointer-events: none;\n        content: '';\n        border: var-list(var-prefixer(tooltip-arrow-size), --app-scale-1x, 5px) solid transparent;\n    }\n\n    // Tooltip bubble\n    &:after {\n        --comp-padding: #{var-list(--app-scale-1x, 5px)} 8px;\n\n        position: absolute;\n        z-index: 1;\n        padding: var-list(var-prefixer(tooltip-padding), --comp-padding);\n        font-weight: var-list(var-prefixer(tooltip-font-weight), 600);\n        font-size: var-list(var-prefixer(tooltip-font-size), --app-font-size-small, 12px);\n        line-height: 1.5;\n        color: var-list(var-prefixer(tooltip-color), --app-white, #ffffff);\n        text-align: center;\n        text-decoration: none;\n        text-shadow: none;\n        text-transform: none;\n        letter-spacing: normal;\n        word-wrap: break-word;\n        white-space: pre;\n        pointer-events: none;\n        content: attr(aria-label);\n        background: var(--comp-background);\n        border-radius: var-list(var-prefixer(tooltip-border-radius), --app-border-radius-1, 3px);\n    }\n\n    &:before,\n    &:after {\n        display: inline-block;\n        visibility: hidden;\n        opacity: 0;\n        transition: all var(--comp-duration) ease-in-out var(--comp-delay);\n    }\n\n    :host([block]) & {\n        display: block;\n    }\n\n    // When to show the tooltip\n    &:hover,\n    &.has-keyboard-focus:focus-within,\n    :host([persistent]) & {\n        &:before,\n        &:after {\n            text-decoration: none;\n            visibility: visible;\n            opacity: 1;\n        }\n    }\n\n    @keyframes tooltippedFade {\n        from {\n            opacity: 0;\n        }\n\n        to {\n            opacity: 1;\n        }\n    }\n\n    &.has-generic-focus:focus-within {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade, tooltippedFade;\n            animation-direction: normal, reverse;\n            animation-duration: var(--comp-duration);\n            animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));\n        }\n    }\n    &.has-generic-focus-out {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade;\n            animation-direction: reverse;\n            animation-duration: var(--comp-duration);\n        }\n    }\n\n    :host([multiline]) & {\n        &:after {\n            width: max-content;\n            max-width: var-list(var-prefixer(tooltip-max-width), 200px);\n            word-break: break-word;\n            word-wrap: normal;\n            white-space: pre-line;\n            border-collapse: separate;\n            text-align: left;\n        }\n\n        :host([position='s']) &,\n        :host([position='n']) & {\n            &:after {\n                right: auto;\n                left: 50%;\n                transform: translateX(-50%);\n            }\n        }\n\n        :host([position='w']) &,\n        :host([position='e']) & {\n            &:after {\n                right: 100%;\n            }\n        }\n\n        &:hover,\n        &:active,\n        &:focus {\n            &:after {\n                display: table-cell;\n            }\n        }\n\n        &:focus-within {\n            &:after {\n                display: table-cell;\n            }\n        }\n    }\n\n    // Below\n    :host([position='s']) &,\n    :host([position='se']) &,\n    :host([position='sw']) & {\n        &:after {\n            top: 100%;\n            right: 50%;\n            margin-top: var(--comp-position);\n        }\n\n        &:before {\n            top: auto;\n            right: 50%;\n            bottom: var(--comp-offset);\n            margin-right: var(--comp-offset);\n            border-bottom-color: var(--comp-background);\n        }\n    }\n\n    // Above\n    :host([position='n']) &,\n    :host([position='ne']) &,\n    :host([position='nw']) & {\n        &:after {\n            right: 50%;\n            bottom: 100%;\n            margin-bottom: var(--comp-position);\n        }\n\n        &:before {\n            top: var(--comp-offset);\n            right: 50%;\n            bottom: auto;\n            margin-right: var(--comp-offset);\n            border-top-color: var(--comp-background);\n        }\n    }\n\n    :host([position='se']) &,\n    :host([position='ne']) & {\n        &:after {\n            right: auto;\n            left: 50%;\n            margin-left: var(--comp-body-offset);\n        }\n    }\n\n    :host([position='sw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n        }\n    }\n\n    :host([position='nw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n        }\n    }\n\n    // Centered\n    :host([position='s']) &,\n    :host([position='n']) & {\n        &:after {\n            transform: translateX(50%);\n        }\n    }\n\n    // Left side\n    :host([position='w']) & {\n        &:after {\n            right: 100%;\n            bottom: 50%;\n            margin-right: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            bottom: 50%;\n            left: var(--comp-offset);\n            margin-top: var(--comp-offset);\n            border-left-color: var(--comp-background);\n        }\n    }\n\n    // Right side\n    :host([position='e']) & {\n        &:after {\n            bottom: 50%;\n            left: 100%;\n            margin-left: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            right: var(--comp-offset);\n            bottom: 50%;\n            margin-top: var(--comp-offset);\n            border-right-color: var(--comp-background);\n        }\n    }\n}\n","import { Component, Prop, h, ComponentInterface, Element, Listen, State } from '@stencil/core';\nimport { isEventFromElement, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-tooltip',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Tooltip implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) block: boolean;\n    @Prop({ reflect: true }) multiline: boolean;\n    @Prop({ reflect: true }) persistent: boolean;\n    @Prop({ reflect: true }) immediate: boolean;\n    @Prop({ reflect: true }) focusable: boolean = false;\n    @Prop({ reflect: true }) position: 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se' = 'n';\n\n    @Element() hostElement: HTMLElement;\n    @State() focusClass: 'has-keyboard-focus' | 'has-generic-focus' | 'has-generic-focus-out';\n\n    tooltipElement: HTMLDivElement;\n    animationEndCount = 0;\n\n    /// LifeCycle Hooks ///\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    /// Getters ///\n    get shouldBeVisible() {\n        if (this.persistent) return true;\n        return this.hostElement.matches(':hover, :focus-within');\n    }\n\n    /// Helpers //\n    checkFocusClass() {\n        if (!this.shouldBeVisible) return;\n        const isKeyboardFocus = !!this.findFocusVisibleElement(document.activeElement);\n        this.focusClass = isKeyboardFocus ? 'has-keyboard-focus' : 'has-generic-focus';\n        if (isKeyboardFocus) return;\n    }\n\n    hideTooltip() {\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    animationEndHandler() {\n        this.animationEndCount = this.animationEndCount + 1;\n        const { focusClass, animationEndCount } = this;\n\n        // animationEnd is fired once for :before and once for :after pseudo elements\n        // there are multiple animations defined for .has-generic-focus\n        // so we need to wait for all of them to finish before we can remove the class\n        if (focusClass === 'has-generic-focus-out' || (focusClass === 'has-generic-focus' && animationEndCount === 4)) {\n            this.focusClass = null;\n            this.animationEndCount = 0;\n        }\n    }\n\n    findFocusVisibleElement(element: Element) {\n        if (!element) return;\n        if (element.shadowRoot) element = this.findFocusVisibleElement(element.shadowRoot.activeElement);\n        return element?.matches(':focus-visible') ? element : null;\n    }\n\n    /// Listeners ///\n    @Listen('keyup')\n    keyUpHandler(event: KeyboardEvent) {\n        switch (event.key) {\n            case 'Esc':\n            case 'Escape':\n                this.hideTooltip();\n                break;\n        }\n    }\n\n    @Listen('focus', { capture: true })\n    focusCaptureHandler() {\n        this.checkFocusClass();\n    }\n\n    @Listen('focus')\n    focusHandler(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.focusable) return;\n        this.tooltipElement.focus();\n    }\n\n    @Listen('focusout')\n    focusOutHandler() {\n        if (this.shouldBeVisible) return;\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    render() {\n        const { focusClass } = this;\n        const classes = ['tooltip'];\n        if (focusClass) classes.push(focusClass);\n\n        return this.label ? (\n            <div\n                tabindex={this.focusable ? 0 : undefined}\n                ref={el => (this.tooltipElement = el)}\n                class={classes.join(' ')}\n                aria-label={this.label}\n                onAnimationEnd={() => this.animationEndHandler()}\n                role=\"tooltip\"\n                test-id=\"tooltipContainer\"\n            >\n                <slot />\n            </div>\n        ) : (\n            <slot />\n        );\n    }\n}\n"],"version":3}

package/dist/collection/components/q2-btn/index.js

@@ -1,7 +1,12 @@
 import { h, Fragment } from '@stencil/core';
-import { handleAriaLabel, handleColor, isEventFromElement, loc, overrideFocus } from 'src/utils';
+import { handleAriaLabel, handleColor, isEventFromElement, loc, overrideFocus, handleDeprecationWarning, } from 'src/utils';
 export class Q2Btn {
   constructor() {
+    this.handleButtonSize = () => {
+      if (Number(this.size) <= 4) {
+        handleDeprecationWarning(this, 'size', 'prop');
+      }
+    };
     this.handleSlotChange = () => {
       this.handleIcons();
     };
@@ -70,6 +75,7 @@ export class Q2Btn {
     handleColor(this);
   }
   componentDidLoad() {
+    this.handleButtonSize();
     overrideFocus(this.hostElement);
   }
   disable(ev) {
@@ -88,6 +94,9 @@ export class Q2Btn {
   ariaLabelObserver() {
     handleAriaLabel(this);
   }
+  sizeObserver() {
+    this.handleButtonSize();
+  }
   get buttonAttributes() {
     var _a, _b, _c;
     return {
@@ -479,6 +488,9 @@ export class Q2Btn {
     return [{
         "propName": "ariaLabel",
         "methodName": "ariaLabelObserver"
+      }, {
+        "propName": "size",
+        "methodName": "sizeObserver"
       }];
   }
   static get listeners() {

package/dist/collection/components/q2-btn/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-btn/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Prop, h, ComponentInterface, Watch, Listen, Element, Fragment } from '@stencil/core';\nimport { handleAriaLabel, handleColor, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-btn',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Btn implements ComponentInterface {\n    @Prop() ariaExpanded: string;\n    @Prop() ariaHasPopup: string;\n    @Prop() ariaControls: string;\n    @Prop() ariaSelected: string;\n    @Prop() ariaPressed: string;\n    @Prop() description: string;\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop() tabIndex: number;\n    @Prop({ reflect: true, mutable: true }) intent:\n        | 'workflow-primary'\n        | 'workflow-secondary'\n        | 'workflow-destroy'\n        | 'workflow-escape'\n        | 'neutral'\n        | 'neutral-text';\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) type: string;\n    @Prop({ reflect: true }) size: string;\n    @Prop({ reflect: true }) loading: boolean;\n    @Prop({ reflect: true }) badge: boolean;\n    @Prop({ reflect: true }) active: boolean;\n    @Prop({ reflect: true }) block: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) color: string; // deprecated but need it to use utils/handleColor\n\n    /** @deprecated */\n    @Prop({ reflect: true }) fab: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @State() iconPosition: 'left' | 'right' | 'only';\n\n    @Element() hostElement: HTMLElement;\n\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    ////////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        this.handleIcons();\n        handleAriaLabel(this);\n        handleColor(this);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n    }\n\n    @Listen('click', { capture: true })\n    disable(ev: Event) {\n        if (this.disabled) {\n            ev.stopImmediatePropagation();\n        }\n        this.primaryBtn.focus();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    //////// Method //////////\n\n    ////////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    handleSlotChange = () => {\n        this.handleIcons();\n    };\n\n    handleIcons = () => {\n        // Only allow one icon in the button\n        const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {\n            if (acc) element.remove();\n            else acc = element;\n            return acc;\n        }, null);\n\n        const hasIcon = !!icon;\n        const hasLoc = !!this.hostElement.querySelector('q2-loc');\n        const hasText = !!this.hostElement.textContent.trim();\n        const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;\n        const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;\n        const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;\n\n        let iconPosition;\n        if (hasIconOnly) iconPosition = 'only';\n        else if (hasIconLeft) iconPosition = 'left';\n        else if (hasIconRight) iconPosition = 'right';\n        this.iconPosition = iconPosition;\n    };\n\n    renderButton = () => {\n        const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, disabled, type, tabindex } =\n            this.buttonAttributes;\n        const { iconPosition, loading, badge, label, hideLabel } = this;\n        const renderLoadingSpinner = iconPosition || loading;\n        const isLoadingSpinnerInline = !iconPosition || badge;\n        return (\n            <Fragment>\n                <button\n                    ref={el => (this.primaryBtn = el ?? this.primaryBtn)}\n                    aria-expanded={ariaExpanded}\n                    aria-haspopup={ariaHasPopup}\n                    aria-label={hideLabel && loc(label)}\n                    aria-selected={ariaSelected}\n                    aria-pressed={ariaPressed}\n                    disabled={disabled}\n                    type={type}\n                    tabindex={tabindex}\n                    test-id=\"q2BtnInnerButton\"\n                    class={iconPosition ? `icon-${iconPosition}` : ''}\n                    aria-describedby={!!description ? 'hidden-description' : undefined}\n                >\n                    <div>\n                        {renderLoadingSpinner && (\n                            <q2-loading\n                                hidden={!loading}\n                                modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n                            />\n                        )}\n                        {!hideLabel && label ? loc(label) : <slot onSlotchange={this.handleSlotChange} />}\n                    </div>\n                </button>\n                {!!description && (\n                    <div\n                        id=\"hidden-description\"\n                        aria-hidden=\"true\"\n                        class=\"sr\"\n                    >\n                        {description}\n                    </div>\n                )}\n            </Fragment>\n        );\n    };\n\n    render = () => {\n        return this.size === 'small' ? (\n            // wrap only for small sized\n            <div\n                class=\"btn-height-wrapper\"\n                ref={el => (this.primaryBtnWrapper = el ?? this.primaryBtnWrapper)}\n                tabIndex={-1}\n            >\n                {this.renderButton()}\n            </div>\n        ) : (\n            this.renderButton()\n        );\n    };\n\n    get buttonAttributes() {\n        return {\n            ariaExpanded: this.ariaExpanded !== undefined ? `${this.ariaExpanded?.toString() === 'true'}` : undefined,\n            ariaHasPopup:\n                this.ariaHasPopup !== undefined\n                    ? `${this.ariaHasPopup === 'true' || this.ariaHasPopup === 'menu'}`\n                    : undefined,\n            ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,\n            ariaSelected: this.ariaSelected !== undefined ? `${this.ariaSelected?.toString() === 'true'}` : undefined,\n            ariaPressed: this.ariaPressed !== undefined ? `${this.ariaPressed?.toString() === 'true'}` : undefined,\n            description: this.description !== undefined ? this.description : undefined,\n            disabled: this.disabled || false,\n            type: this.type || 'button',\n            tabindex: this.tabIndex || undefined,\n        };\n    }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/q2-btn/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Prop, h, ComponentInterface, Watch, Listen, Element, Fragment } from '@stencil/core';\nimport {\n    handleAriaLabel,\n    handleColor,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    handleDeprecationWarning,\n} from 'src/utils';\n\n@Component({\n    tag: 'q2-btn',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Btn implements ComponentInterface {\n    @Prop() ariaExpanded: string;\n    @Prop() ariaHasPopup: string;\n    @Prop() ariaControls: string;\n    @Prop() ariaSelected: string;\n    @Prop() ariaPressed: string;\n    @Prop() description: string;\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop() tabIndex: number;\n    @Prop({ reflect: true, mutable: true }) intent:\n        | 'workflow-primary'\n        | 'workflow-secondary'\n        | 'workflow-destroy'\n        | 'workflow-escape'\n        | 'neutral'\n        | 'neutral-text';\n    @Prop({ reflect: true }) disabled: boolean;\n    @Prop({ reflect: true }) type: string;\n    @Prop({ reflect: true }) size: string;\n    @Prop({ reflect: true }) loading: boolean;\n    @Prop({ reflect: true }) badge: boolean;\n    @Prop({ reflect: true }) active: boolean;\n    @Prop({ reflect: true }) block: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) color: string; // deprecated but need it to use utils/handleColor\n\n    /** @deprecated */\n    @Prop({ reflect: true }) fab: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @State() iconPosition: 'left' | 'right' | 'only';\n\n    @Element() hostElement: HTMLElement;\n\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    ////////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        this.handleIcons();\n        handleAriaLabel(this);\n        handleColor(this);\n    }\n\n    componentDidLoad(): void {\n        this.handleButtonSize();\n        overrideFocus(this.hostElement);\n    }\n\n    @Listen('click', { capture: true })\n    disable(ev: Event) {\n        if (this.disabled) {\n            ev.stopImmediatePropagation();\n        }\n        this.primaryBtn.focus();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    //////// Method //////////\n\n    ////////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('size')\n    sizeObserver() {\n        this.handleButtonSize();\n    }\n\n    handleButtonSize = () => {\n        if (Number(this.size) <= 4) {\n            handleDeprecationWarning(this, 'size', 'prop');\n        }\n    };\n\n    handleSlotChange = () => {\n        this.handleIcons();\n    };\n\n    handleIcons = () => {\n        // Only allow one icon in the button\n        const icon = Array.from(this.hostElement.querySelectorAll(':scope > q2-icon')).reduce((acc, element) => {\n            if (acc) element.remove();\n            else acc = element;\n            return acc;\n        }, null);\n\n        const hasIcon = !!icon;\n        const hasLoc = !!this.hostElement.querySelector('q2-loc');\n        const hasText = !!this.hostElement.textContent.trim();\n        const hasIconLeft = (hasLoc || hasText) && hasIcon && this.hostElement.firstElementChild === icon;\n        const hasIconRight = (hasLoc || hasText) && hasIcon && this.hostElement.lastElementChild === icon;\n        const hasIconOnly = !hasIconLeft && !hasIconRight && hasIcon;\n\n        let iconPosition;\n        if (hasIconOnly) iconPosition = 'only';\n        else if (hasIconLeft) iconPosition = 'left';\n        else if (hasIconRight) iconPosition = 'right';\n        this.iconPosition = iconPosition;\n    };\n\n    renderButton = () => {\n        const { ariaExpanded, ariaHasPopup, ariaSelected, ariaPressed, description, disabled, type, tabindex } =\n            this.buttonAttributes;\n        const { iconPosition, loading, badge, label, hideLabel } = this;\n        const renderLoadingSpinner = iconPosition || loading;\n        const isLoadingSpinnerInline = !iconPosition || badge;\n        return (\n            <Fragment>\n                <button\n                    ref={el => (this.primaryBtn = el ?? this.primaryBtn)}\n                    aria-expanded={ariaExpanded}\n                    aria-haspopup={ariaHasPopup}\n                    aria-label={hideLabel && loc(label)}\n                    aria-selected={ariaSelected}\n                    aria-pressed={ariaPressed}\n                    disabled={disabled}\n                    type={type}\n                    tabindex={tabindex}\n                    test-id=\"q2BtnInnerButton\"\n                    class={iconPosition ? `icon-${iconPosition}` : ''}\n                    aria-describedby={!!description ? 'hidden-description' : undefined}\n                >\n                    <div>\n                        {renderLoadingSpinner && (\n                            <q2-loading\n                                hidden={!loading}\n                                modifiers={isLoadingSpinnerInline ? 'inline' : undefined}\n                            />\n                        )}\n                        {!hideLabel && label ? loc(label) : <slot onSlotchange={this.handleSlotChange} />}\n                    </div>\n                </button>\n                {!!description && (\n                    <div\n                        id=\"hidden-description\"\n                        aria-hidden=\"true\"\n                        class=\"sr\"\n                    >\n                        {description}\n                    </div>\n                )}\n            </Fragment>\n        );\n    };\n\n    render = () => {\n        return this.size === 'small' ? (\n            // wrap only for small sized\n            <div\n                class=\"btn-height-wrapper\"\n                ref={el => (this.primaryBtnWrapper = el ?? this.primaryBtnWrapper)}\n                tabIndex={-1}\n            >\n                {this.renderButton()}\n            </div>\n        ) : (\n            this.renderButton()\n        );\n    };\n\n    get buttonAttributes() {\n        return {\n            ariaExpanded: this.ariaExpanded !== undefined ? `${this.ariaExpanded?.toString() === 'true'}` : undefined,\n            ariaHasPopup:\n                this.ariaHasPopup !== undefined\n                    ? `${this.ariaHasPopup === 'true' || this.ariaHasPopup === 'menu'}`\n                    : undefined,\n            ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,\n            ariaSelected: this.ariaSelected !== undefined ? `${this.ariaSelected?.toString() === 'true'}` : undefined,\n            ariaPressed: this.ariaPressed !== undefined ? `${this.ariaPressed?.toString() === 'true'}` : undefined,\n            description: this.description !== undefined ? this.description : undefined,\n            disabled: this.disabled || false,\n            type: this.type || 'button',\n            tabindex: this.tabIndex || undefined,\n        };\n    }\n}\n"]}