q2-tecton-elements 1.5.3 → 1.6.3

package/dist/collection/components/q2-checkbox/styles.css

@@ -75,7 +75,7 @@ label {
     cursor: pointer;
     --q2-checkbox-outer-stroke-color: var(
         --tct-checkbox-outer-stroke-color,
-        var(--tct-gray-l1, var(--app-gray-l1, #cccccc))
+        var(--tct-gray-11, var(--app-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))
     );
     --q2-checkbox-outer-fill-color: var(
         --tct-checkbox-outer-fill-color,
@@ -87,7 +87,7 @@ label {
     );
     --q2-checkbox-checked-color: var(
         --tct-checkbox-check-stroke-color,
-        var(--t-checkbox-fill, var(--tct-gray-d2, var(--app-gray-d2, #404040)))
+        var(--t-checkbox-fill, var(--tct-gray-5, var(--app-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040)))))
     );
 }
 
@@ -208,7 +208,7 @@ input:checked + label .q2-checkbox-label-content {
     transform: translateY(-50%);
 }
 :host([type='toggle']) .toggle-track {
-    fill: var(--tct-checkbox-toggle-track-color, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)));
+    fill: var(--tct-checkbox-toggle-track-color, var(--tct-gray-11, var(--app-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));
     height: 14px;
     width: 46px;
 }
@@ -231,7 +231,7 @@ input:checked + label .q2-checkbox-label-content {
 }
 
 :host([type='toggle']) .toggle-circle {
-    fill: var(--tct-checkbox-toggle-circle-color, var(--tct-gray, var(--app-gray, #999999)));
+    fill: var(--tct-checkbox-toggle-circle-color, var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))));
 }
 
 :host([type='toggle']) input:checked + label .toggle-circle {
@@ -250,7 +250,7 @@ input:checked + label .q2-checkbox-label-content {
 }
 
 :host([type='toggle']) input:not(:checked):focus + label .toggle-circle {
-    stroke: var(--tct-checkbox-toggle-circle-color, var(--tct-gray, var(--app-gray, #999999)));
+    stroke: var(--tct-checkbox-toggle-circle-color, var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))));
 }
 
 :host([type='toggle']) .checked-fill {

package/dist/collection/components/q2-checkbox-group/styles.css

@@ -116,7 +116,7 @@ legend.sr-only {
     );
     color: var(
         --tct-input-label-optional-font-color,
-        var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-d1, var(--app-gray-d1, #666666))))
+        var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))))
     );
     font-size: var(--tct-input-label-optional-font-size, 12px);
     font-weight: var(--tct-input-label-optional-font-weight, 400);

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

@@ -149,7 +149,7 @@ export class Q2Dropdown {
                         onClickFn = () => this.navigateTo(menuItemData.featureName, menuItemData.moduleName);
                         break;
                     case 'showOverpanel':
-                        onClickFn = () => this.navigateToOverpanel(menuItemData.featureName, menuItemData.moduleName);
+                        onClickFn = () => this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`);
                         break;
                 }
                 const newDropdownItem = document.createElement('q2-dropdown-item');
@@ -164,9 +164,9 @@ export class Q2Dropdown {
     navigateTo(featureName, moduleName) {
         return window.TectonElements && window.TectonElements.navigateTo(featureName, moduleName);
     }
-    navigateToOverpanel(featureName, moduleName) {
+    showOverpanel(overpanelPath) {
         return (window.TectonElements &&
-            window.TectonElements.navigateToOverpanel(featureName, moduleName));
+            window.TectonElements.showOverpanel(overpanelPath, undefined, undefined, true));
     }
     get toggleButtonProps() {
         const allowedTypes = ['icon', 'fab', 'primary', 'secondary', 'custom'];

package/dist/collection/components/q2-dropdown-item/styles.css

@@ -67,7 +67,7 @@ button {
 .dropdown-separator {
     margin: 0 var(--tct-scale-1, var(--app-scale-1, 5px));
     border-bottom: 1px solid
-        var(--tct-dropdown-item-separator-color, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)));
+        var(--tct-dropdown-item-separator-color, var(--tct-gray-11, var(--app-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));
 }
 
 .dropdown-item-wrapper {
@@ -94,7 +94,7 @@ button {
 :host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content {
     background-color: var(
         --tct-dropdown-item-selected-bg,
-        var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))
+        var(--tct-gray-14, var(--app-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))
     );
     color: var(--tct-dropdown-item-selected-font-color, inherit);
 }

package/dist/collection/components/q2-input/formatting/phone.js

@@ -259,7 +259,7 @@ export const phoneNumberFormats = {
         prefix: '+670 '
     },
     EC: {
-        mask: '(0) 000-0000',
+        mask: '(0#) 000-0000',
         prefix: '+593 '
     },
     /* EG: {

package/dist/collection/components/q2-input/styles.css

@@ -154,11 +154,11 @@ label {
     height: var(--tct-input-height, 44px);
     width: 100%;
     padding: 0 var(--tct-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px)));
-    background-color: var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))));
+    background-color: var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--app-gray-14, #f2f2f2))));
     color: var(--tct-input-font-color, var(--t-input-font-color, inherit));
     border-width: var(--q2-input-border-width);
     border-style: solid;
-    border-color: var(--tct-input-border-color, var(--t-input-border, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))));
+    border-color: var(--tct-input-border-color, var(--t-input-border, var(--tct-gray-11, var(--app-gray-11, #cccccc))));
     border-radius: var(--q2-input-border-radius);
     box-shadow: var(--tct-input-box-shadow, none);
     transition: border-width
@@ -173,7 +173,7 @@ input {
 
 .input-field:focus {
     border-width: var(--q2-input-focus-border-width, 1px);
-    border-color: var(--tct-input-focus-border-color, var(--t-input-focus, var(--tct-gray, var(--app-gray, #999999))));
+    border-color: var(--tct-input-focus-border-color, var(--t-input-focus, var(--tct-gray-9, var(--app-gray-9, #999999))));
     box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)),
         var(--tct-input-focus-box-shadow, 0 0 transparent);
 }
@@ -191,7 +191,7 @@ input[type='search']::-webkit-search-results-decoration {
 
 input::placeholder,
 .placeholder-text {
-    color: var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-d1, var(--app-gray-d1, #666666))));
+    color: var(--tct-input-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))))));
 }
 
 .pseudo-input {
@@ -216,9 +216,9 @@ q2-icon {
     margin-top: calc(var(--tct-input-border-top-width, 1px) / 2);
     margin-bottom: calc(var(--tct-input-border-bottom-width, 1px) / 2);
     pointer-events: none;
-    color: var(--tct-input-icon-stroke-primary, var(--app-gray, #999999));
-    --tct-icon-stroke-primary: var(--tct-input-icon-stroke-primary, var(--tct-gray, var(--app-gray, #999999)));
-    --t-icon-stroke-primary: var(--tct-input-icon-stroke-primary, var(--tct-gray, var(--app-gray, #999999)));
+    color: var(--tct-input-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))));
+    --tct-icon-stroke-primary: var(--tct-input-icon-stroke-primary, var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))));
+    --t-icon-stroke-primary: var(--tct-input-icon-stroke-primary, var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))));
 }
 
 .icon-left {
@@ -246,7 +246,7 @@ q2-icon {
     bottom: var(--tct-input-border-bottom-width, 1px);
     font-size: var(--tct-input-prefix-font-size, inherit);
     color: var(--tct-input-prefix-font-color, inherit);
-    background-color: var(--tct-input-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));
+    background-color: var(--tct-input-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--app-gray-14, #f2f2f2)))));
     transition: color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),
         background-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
 }
@@ -256,7 +256,7 @@ q2-icon {
     border-right: 1px solid
         var(
             --tct-input-prefix-border-color,
-            var(--tct-input-border-color, var(--t-input-border, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))
+            var(--tct-input-border-color, var(--t-input-border, var(--tct-gray-11, var(--app-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))
         );
     border-top-left-radius: calc(
         var(--q2-input-border-top-left-radius) - var(--tct-input-border-top-width, 1px) -
@@ -274,7 +274,7 @@ q2-icon {
     border-left: 1px solid
         var(
             --tct-input-prefix-border-color,
-            var(--tct-input-border-color, var(--t-input-border, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))
+            var(--tct-input-border-color, var(--t-input-border, var(--tct-gray-11, var(--app-gray-11, var(--tct-gray-l1, var(--app-grayl1, #cccccc))))))
         );
     border-top-right-radius: calc(
         var(--q2-input-border-top-right-radius) - var(--tct-input-border-top-width, 1px) -
@@ -313,7 +313,7 @@ q2-icon {
 .messages-container {
     height: 0px;
     overflow: hidden;
-    background-color: var(--tct-message-bg, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)));
+    background-color: var(--tct-message-bg, var(--tct-gray-14, var(--app-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));
     box-shadow: var(
         --tct-input-message-box-shadow,
         var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))
@@ -396,7 +396,7 @@ q2-icon {
     color: var(--tct-input-error-prefix-font-color, inherit);
     background-color: var(
         --tct-input-error-prefix-bg,
-        var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))
+        var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--app-var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))
     );
 }
 
@@ -466,7 +466,7 @@ q2-icon {
     border-right: 1px solid
         var(
             --tct-input-prefix-border-color,
-            var(--tct-input-border-color, var(--t-input-border, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))
+            var(--tct-input-border-color, var(--t-input-border, var(--tct-gray-11, var(--app-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))
         );
 }
 

package/dist/collection/components/q2-message/styles.css

@@ -77,7 +77,7 @@ button {
     border-left-style: solid;
     display: flex;
     align-items: flex-start;
-    background: var(--tct-message-bg, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)));
+    background: var(--tct-message-bg, var(--tct-gray-14, var(--app-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));
     color: var(--tct-message-font-color, inherit);
     box-shadow: var(--tct-message-box-shadow, inherit);
     border-radius: var(--tct-message-border-radius, inherit);

package/dist/collection/components/q2-optgroup/styles.css

@@ -71,7 +71,7 @@ button {
 .q2-optgroup-header {
     background-color: var(
         --tct-optgroup-header-bg,
-        var(--tct-gray-l2, var(--app-gray-l2, #e6e6ee))
+        var(--tct-gray-13, var(--app-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6))))
     );
     padding: var(--tct-scale-1, var(--app-scale-1, 5px))
         var(--tct-scale-2, var(--app-scale-2, 10px));

package/dist/collection/components/q2-option/styles.css

@@ -91,7 +91,7 @@ button {
 .q2-option-container:not([aria-disabled='true']):hover,
 :host([active]) .q2-option-container,
 :host(:focus) .q2-option-container {
-    background-color: var(--tct-option-active-bg, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)));
+    background-color: var(--tct-option-active-bg, var(--tct-gray-14, var(--app-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));
     color: var(--tct-option-active-font-color, inherit);
 }
 

package/dist/collection/components/q2-radio/styles.css

@@ -83,7 +83,7 @@ q2-radio .radio-container svg {
 
 q2-radio .radio-container circle:nth-child(1) {
     stroke-width: 2;
-    stroke: var(--tct-radio-stroke-color, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)));
+    stroke: var(--tct-radio-stroke-color, var(--tct-gray-11, var(--app-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));
 }
 
 q2-radio .radio-container input:focus ~ label.radio-label svg {
@@ -94,7 +94,7 @@ q2-radio .radio-container input:checked ~ label.radio-label circle:nth-child(1)
     background-color: var(--tct-radio-checked-bg, transparent);
     stroke: var(
         --tct-radio-checked-stroke-color,
-        var(--tct-radio-stroke-color, var(--app-gray-l1, #cccccc))
+        var(--tct-radio-stroke-color, var(--tct-gray-11, var(--app-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))))
     );
 }
 
@@ -140,7 +140,7 @@ q2-radio .radio-tile {
 q2-radio .radio-tile label {
     align-items: center;
     border-radius: 3px;
-    border: 2px solid var(--tct-radio-stroke-color, var(--app-gray-l1, #cccccc));
+    border: 2px solid var(--tct-radio-stroke-color, var(--tct-gray-11, var(--app-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));
     cursor: pointer;
     display: block;
     padding: 1rem;

package/dist/collection/components/q2-tab-container/styles.css

@@ -75,7 +75,7 @@ button {
     margin: 0;
     list-style: none;
     border-bottom: 1px solid
-        var(--tct-tab-container-border-color, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)));
+        var(--tct-tab-container-border-color, var(--tct-gray-11, var(--app-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));
     white-space: nowrap;
     overflow-x: hidden;
     align-items: center;

package/dist/esm/q2-btn.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-06403810.js';
 
-const stylesCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}*:active{outline:none}*:focus{outline:none;-webkit-box-shadow:var(--const-global-focus);box-shadow:var(--const-global-focus)}:host{-webkit-box-shadow:none !important;box-shadow:none !important}::-moz-focus-inner{border:none}input,button{font-family:inherit;font-size: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([hidden]){display:none}:host([block]){display:block;width:100%}button{--q2-btn-primary-bg:var(--tct-btn-primary-bg, var(--t-button-primary-bg, #2E2E2E));--q2-btn-primary-font-color:var(--tct-btn-primary-font-color, var(--t-button-primary-font-color, var(--tct-white, var(--app-white,#FFFFFF))));--q2-btn-primary-box-shadow:var(--tct-btn-primary-box-shadow, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24));--q2-btn-primary-hover-box-shadow:var(--tct-btn-primary-hover-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23));--q2-btn-secondary-bg:var(--tct-btn-secondary-bg, var(--t-button-default-bg, #CCCCCC));--q2-btn-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-button-default-font-color, #2E2E2E));--q2-btn-secondary-box-shadow:var(--tct-btn-secondary-box-shadow, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24));--q2-btn-secondary-hover-box-shadow:var(--tct-btn-secondary-hover-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23));--q2-btn-tween:var(--tct-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));--q2-btn-neutral-bg:var(--tct-btn-neutral-bg, transparent);--q2-btn-neutral-font-color:var(--tct-btn-neutral-font-color, var(--t-button-default-font-color, #2E2E2E));--q2-btn-neutral-box-shadow:var(--tct-btn-neutral-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.12), 0 3px 3px rgba(0, 0, 0, 0.24));--q2-btn-neutral-hover-box-shadow:var(--tct-btn-neutral-hover-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.36));margin:var(--tct-scale-0, var(--app-scale-0, 0));padding:var(--tct-scale-0, var(--app-scale-0, 0));display:inline-block;width:100%;border:0;background:transparent;-webkit-box-shadow:none;box-shadow:none;border-radius:0;font-weight:400;color:inherit;cursor:pointer;-webkit-transition:background-color var(--q2-btn-tween),\n        color var(--q2-btn-tween),\n        fill var(--q2-btn-tween),\n        border-color var(--q2-btn-tween),\n        border-width var(--q2-btn-tween),\n        -webkit-box-shadow var(--q2-btn-tween);transition:background-color var(--q2-btn-tween),\n        color var(--q2-btn-tween),\n        fill var(--q2-btn-tween),\n        border-color var(--q2-btn-tween),\n        border-width var(--q2-btn-tween),\n        -webkit-box-shadow var(--q2-btn-tween);transition:background-color var(--q2-btn-tween),\n        color var(--q2-btn-tween),\n        box-shadow var(--q2-btn-tween),\n        fill var(--q2-btn-tween),\n        border-color var(--q2-btn-tween),\n        border-width var(--q2-btn-tween);transition:background-color var(--q2-btn-tween),\n        color var(--q2-btn-tween),\n        box-shadow var(--q2-btn-tween),\n        fill var(--q2-btn-tween),\n        border-color var(--q2-btn-tween),\n        border-width var(--q2-btn-tween),\n        -webkit-box-shadow var(--q2-btn-tween);outline:0}button:disabled{opacity:var(--tct-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}:host([size=\"1\"]) button{padding:var(--tct-scale-1, var(--app-scale-1, 5px))}:host([color]:not([size])) button,:host([intent]:not([size])) button{padding:var(--tct-btn-padding, var(--tct-scale-2, var(--app-scale-2, 10px)))}:host([size=\"2\"]) button{padding:var(--tct-scale-2, var(--app-scale-2, 10px))}:host([size=\"3\"]) button{padding:var(--tct-scale-3, var(--app-scale-3, 15px))}:host([size=\"4\"]) button{padding:var(--tct-scale-4, var(--app-scale-4, 30px))}:host([color]) button,:host([intent]) button{border-style:solid;font-size:var(--tct-btn-font-size, inherit)}:host([color=\"primary\"]) button,:host([intent=\"workflow-primary\"]) button{background:var(--q2-btn-primary-bg);color:var(--q2-btn-primary-font-color);border-color:var(--tct-btn-primary-border-color, transparent);border-width:var(--tct-btn-primary-border-width, 0);border-radius:var(--tct-btn-primary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));-webkit-box-shadow:var(--q2-btn-primary-box-shadow);box-shadow:var(--q2-btn-primary-box-shadow);font-weight:var(--tct-btn-primary-font-weight, 600);text-transform:var(--tct-btn-primary-text-transform, none);letter-spacing:var(--tct-btn-primary-letter-spacing, normal)}:host([color=\"primary\"]) button:enabled:hover,:host([color=\"primary\"]) button:enabled:focus,:host([color=\"primary\"]) button:enabled:active,:host([intent=\"workflow-primary\"]) button:enabled:hover,:host([intent=\"workflow-primary\"]) button:enabled:focus,:host([intent=\"workflow-primary\"]) button:enabled:active{background:var(--tct-btn-primary-hover-bg, var(--t-button-primary-hover-bg, var(--tct-gray-d2, var(--app-gray-d2, #404040))));color:var(--tct-btn-primary-hover-font-color, var(--t-button-primary-hover-font-color, var(--tct-white, var(--app-white,#FFFFFF))));border-color:var(--tct-btn-primary-hover-border-color, var(--tct-btn-primary-border-color, transparent))}:host([color=\"primary\"]) button:hover:enabled,:host([color=\"primary\"]) button:active:enabled,:host([intent=\"workflow-primary\"]) button:hover:enabled,:host([intent=\"workflow-primary\"]) button:active:enabled{-webkit-box-shadow:var(--q2-btn-primary-hover-box-shadow);box-shadow:var(--q2-btn-primary-hover-box-shadow)}:host([color=\"primary\"]) button:focus,:host([intent=\"workflow-primary\"]) button:focus{-webkit-box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33B4FF)), var(--q2-btn-primary-hover-box-shadow);box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33B4FF)), var(--q2-btn-primary-hover-box-shadow)}:host([color=\"primary\"]) button:disabled,:host([intent=\"workflow-primary\"]) button:disabled{background:var(--tct-btn-primary-disabled-bg, var(--q2-btn-primary-bg));color:var(--tct-btn-primary-disabled-font-color, var(--q2-btn-primary-font-color));-webkit-box-shadow:var(--tct-btn-primary-disabled-box-shadow, var(--q2-btn-primary-box-shadow));box-shadow:var(--tct-btn-primary-disabled-box-shadow, var(--q2-btn-primary-box-shadow))}:host([color=\"secondary\"]) button,:host([intent=\"workflow-secondary\"]) button{background:var(--q2-btn-secondary-bg);color:var(--q2-btn-secondary-font-color, var(--tct-btn-secondary-font-color, var(--t-button-secondary-font-color, var(--tct-white, var(--app-white, #FFFFFF)))));border-color:var(--tct-btn-secondary-border-color, transparent);border-width:var(--tct-btn-secondary-border-width, 0);border-radius:var(--tct-btn-secondary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));-webkit-box-shadow:var(--q2-btn-secondary-box-shadow, var(--tct-btn-secondary-box-shadow, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)));box-shadow:var(--q2-btn-secondary-box-shadow, var(--tct-btn-secondary-box-shadow, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)));font-weight:var(--tct-btn-secondary-font-weight, 600);text-transform:var(--tct-btn-secondary-text-transform, none);letter-spacing:var(--tct-btn-secondary-letter-spacing, normal)}:host([color=\"secondary\"]) button:enabled:hover,:host([color=\"secondary\"]) button:enabled:focus,:host([color=\"secondary\"]) button:enabled:active,:host([intent=\"workflow-secondary\"]) button:enabled:hover,:host([intent=\"workflow-secondary\"]) button:enabled:focus,:host([intent=\"workflow-secondary\"]) button:enabled:active{background:var(--tct-btn-secondary-hover-bg, var(--t-button-default-hover-bg, var(--tct-gray-d2, var(--app-gray-d2, #404040))));color:var(--tct-btn-secondary-hover-font-color, var(--t-button-default-hover-font-color, var(--tct-white, var(--app-white, #FFFFFF))));border-color:var(--tct-btn-secondary-hover-border-color, var(--tct-btn-secondary-border-color, transparent))}:host([color=\"secondary\"]) button:hover:enabled,:host([color=\"secondary\"]) button:active:enabled,:host([intent=\"workflow-secondary\"]) button:hover:enabled,:host([intent=\"workflow-secondary\"]) button:active:enabled{-webkit-box-shadow:var(--q2-btn-secondary-hover-box-shadow, var(--tct-btn-secondary-hover-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23)));box-shadow:var(--q2-btn-secondary-hover-box-shadow, var(--tct-btn-secondary-hover-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23)))}:host([color=\"secondary\"]) button:focus,:host([intent=\"workflow-secondary\"]) button:focus{-webkit-box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33B4FF)), var(--q2-btn-secondary-hover-box-shadow);box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33B4FF)), var(--q2-btn-secondary-hover-box-shadow)}:host([color=\"secondary\"]) button:disabled,:host([intent=\"workflow-secondary\"]) button:disabled{background:var(--tct-btn-secondary-disabled-bg, var(--q2-btn-secondary-bg));color:var(--tct-btn-secondary-disabled-font-color, var(--q2-btn-secondary-font-color));-webkit-box-shadow:var(--tct-btn-secondary-disabled-box-shadow, var(--q2-btn-secondary-box-shadow));box-shadow:var(--tct-btn-secondary-disabled-box-shadow, var(--q2-btn-secondary-box-shadow))}:host([intent=\"neutral\"]) button{background:var(--q2-btn-neutral-bg, var(--tct-btn-neutral-bg, transparent));color:var(--q2-btn-neutral-font-color, var(--tct-btn-neutral-font-color, var(--t-button-neutral-font-color, var(--tct-black, var(--app-black, #0d0d0d)))));border-color:var(--tct-btn-neutral-border-color, transparent);border-width:var(--tct-btn-neutral-border-width, 0);border-radius:var(--tct-btn-neutral-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));-webkit-box-shadow:var(--q2-btn-neutral-box-shadow, var(--tct-btn-neutral-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.12), 0 3px 3px rgba(0, 0, 0, 0.24)));box-shadow:var(--q2-btn-neutral-box-shadow, var(--tct-btn-neutral-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.12), 0 3px 3px rgba(0, 0, 0, 0.24)));font-weight:var(--tct-btn-neutral-font-weight, 600);text-transform:var(--tct-btn-neutral-text-transform, none);letter-spacing:var(--tct-btn-neutral-letter-spacing, normal)}:host([intent=\"neutral\"]) button:enabled:hover,:host([intent=\"neutral\"]) button:enabled:focus,:host([intent=\"neutral\"]) button:enabled:active{background:var(--tct-btn-neutral-hover-bg, transparent);color:var(--tct-btn-neutral-hover-font-color, var(--t-button-default-hover-font-color, var(--tct-white, var(--app-white, #FFFFFF))));border-color:var(--tct-btn-neutral-hover-border-color, var(--tct-btn-neutral-border-color, transparent))}:host([intent=\"neutral\"]) button:hover:enabled,:host([intent=\"neutral\"]) button:active:enabled{-webkit-box-shadow:var(--q2-btn-neutral-hover-box-shadow, var(--tct-btn-neutral-hover-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.36)));box-shadow:var(--q2-btn-neutral-hover-box-shadow, var(--tct-btn-neutral-hover-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.36)))}:host([intent=\"neutral\"]) button:focus{-webkit-box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33B4FF)), var(--q2-btn-neutral-hover-box-shadow);box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33B4FF)), var(--q2-btn-neutral-hover-box-shadow)}:host([intent=\"neutral\"]) button:disabled{background:var(--tct-btn-neutral-disabled-bg, var(--q2-btn-neutral-bg));color:var(--tct-btn-neutral-disabled-font-color, var(--q2-btn-neutral-font-color));-webkit-box-shadow:var(--tct-btn-neutral-disabled-box-shadow, var(--q2-btn-neutral-box-shadow));box-shadow:var(--tct-btn-neutral-disabled-box-shadow, var(--q2-btn-neutral-box-shadow))}:host([icon]) button{width:var(--tct-btn-icon-width, 44px);height:var(--tct-btn-icon-height, 44px);color:var(--tct-btn-icon-color, inherit);border-radius:var(--tct-btn-icon-border-radius, 0)}:host([icon]) button:hover,:host([icon]) button:focus{background-color:var(--tct-btn-icon-hover-bg, var(--tct-gray-l3, var(--app-gray-l3, #F2F2F2)))}:host([icon][active]) button{background-color:var(--tct-btn-icon-active-bg, var(--tct-btn-icon-hover-bg, var(--tct-gray-l3, var(--app-gray-l3, #F2F2F2))))}:host([icon]) button:hover *,:host([icon]) button:focus *,:host([icon][active]) button *{color:var(--tct-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color,#080808)))}:host([icon]) button div{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host([badge]) button{padding:var(--tct-btn-badge-padding, 2px 5px);font-size:var(--tct-btn-badge-font-size, var(--tct-btn-font-size, inherit));border-radius:var(--tct-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));background-color:var(--tct-btn-badge-bg, transparent);color:var(--tct-btn-badge-font-color, inherit)}:host([badge]:hover) button:enabled{background-color:var(--tct-btn-badge-hover-bg, var(--tct-gray-l3, var(--app-gray-l3, #F2F2F2)));color:var(--tct-btn-badge-hover-font-color, var(--tct-gray-d2, var(--app-gray-d2, #404040)))}:host(.selected[badge]) button,:host([active][badge]) button{background-color:var(--tct-btn-badge-active-bg, var(--q2-btn-primary-bg));color:var(--tct-btn-badge-active-font-color, var(--q2-btn-primary-font-color))}";
+const stylesCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}*:active{outline:none}*:focus{outline:none;-webkit-box-shadow:var(--const-global-focus);box-shadow:var(--const-global-focus)}:host{-webkit-box-shadow:none !important;box-shadow:none !important}::-moz-focus-inner{border:none}input,button{font-family:inherit;font-size: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([hidden]){display:none}:host([block]){display:block;width:100%}button{--q2-btn-primary-bg:var(--tct-btn-primary-bg, var(--t-button-primary-bg, #2E2E2E));--q2-btn-primary-font-color:var(--tct-btn-primary-font-color, var(--t-button-primary-font-color, var(--tct-white, var(--app-white,#FFFFFF))));--q2-btn-primary-box-shadow:var(--tct-btn-primary-box-shadow, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24));--q2-btn-primary-hover-box-shadow:var(--tct-btn-primary-hover-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23));--q2-btn-secondary-bg:var(--tct-btn-secondary-bg, var(--t-button-default-bg, #CCCCCC));--q2-btn-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-button-default-font-color, #2E2E2E));--q2-btn-secondary-box-shadow:var(--tct-btn-secondary-box-shadow, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24));--q2-btn-secondary-hover-box-shadow:var(--tct-btn-secondary-hover-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23));--q2-btn-tween:var(--tct-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));--q2-btn-neutral-bg:var(--tct-btn-neutral-bg, transparent);--q2-btn-neutral-font-color:var(--tct-btn-neutral-font-color, var(--t-button-default-font-color, #2E2E2E));--q2-btn-neutral-box-shadow:var(--tct-btn-neutral-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.12), 0 3px 3px rgba(0, 0, 0, 0.24));--q2-btn-neutral-hover-box-shadow:var(--tct-btn-neutral-hover-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.36));margin:var(--tct-scale-0, var(--app-scale-0, 0));padding:var(--tct-scale-0, var(--app-scale-0, 0));display:inline-block;width:100%;border:0;background:transparent;-webkit-box-shadow:none;box-shadow:none;border-radius:0;font-weight:400;color:inherit;cursor:pointer;-webkit-transition:background-color var(--q2-btn-tween),\n        color var(--q2-btn-tween),\n        fill var(--q2-btn-tween),\n        border-color var(--q2-btn-tween),\n        border-width var(--q2-btn-tween),\n        -webkit-box-shadow var(--q2-btn-tween);transition:background-color var(--q2-btn-tween),\n        color var(--q2-btn-tween),\n        fill var(--q2-btn-tween),\n        border-color var(--q2-btn-tween),\n        border-width var(--q2-btn-tween),\n        -webkit-box-shadow var(--q2-btn-tween);transition:background-color var(--q2-btn-tween),\n        color var(--q2-btn-tween),\n        box-shadow var(--q2-btn-tween),\n        fill var(--q2-btn-tween),\n        border-color var(--q2-btn-tween),\n        border-width var(--q2-btn-tween);transition:background-color var(--q2-btn-tween),\n        color var(--q2-btn-tween),\n        box-shadow var(--q2-btn-tween),\n        fill var(--q2-btn-tween),\n        border-color var(--q2-btn-tween),\n        border-width var(--q2-btn-tween),\n        -webkit-box-shadow var(--q2-btn-tween);outline:0}button:disabled{opacity:var(--tct-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}:host([size=\"1\"]) button{padding:var(--tct-scale-1, var(--app-scale-1, 5px))}:host([color]:not([size])) button,:host([intent]:not([size])) button{padding:var(--tct-btn-padding, var(--tct-scale-2, var(--app-scale-2, 10px)))}:host([size=\"2\"]) button{padding:var(--tct-scale-2, var(--app-scale-2, 10px))}:host([size=\"3\"]) button{padding:var(--tct-scale-3, var(--app-scale-3, 15px))}:host([size=\"4\"]) button{padding:var(--tct-scale-4, var(--app-scale-4, 30px))}:host([color]) button,:host([intent]) button{border-style:solid;font-size:var(--tct-btn-font-size, inherit)}:host([color=\"primary\"]) button,:host([intent=\"workflow-primary\"]) button{background:var(--q2-btn-primary-bg);color:var(--q2-btn-primary-font-color);border-color:var(--tct-btn-primary-border-color, transparent);border-width:var(--tct-btn-primary-border-width, 0);border-radius:var(--tct-btn-primary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));-webkit-box-shadow:var(--q2-btn-primary-box-shadow);box-shadow:var(--q2-btn-primary-box-shadow);font-weight:var(--tct-btn-primary-font-weight, 600);text-transform:var(--tct-btn-primary-text-transform, none);letter-spacing:var(--tct-btn-primary-letter-spacing, normal)}:host([color=\"primary\"]) button:enabled:hover,:host([color=\"primary\"]) button:enabled:focus,:host([color=\"primary\"]) button:enabled:active,:host([intent=\"workflow-primary\"]) button:enabled:hover,:host([intent=\"workflow-primary\"]) button:enabled:focus,:host([intent=\"workflow-primary\"]) button:enabled:active{background:var(--tct-btn-primary-hover-bg, var(--t-button-primary-hover-bg, var(--tct-gray-5, var(--app-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));color:var(--tct-btn-primary-hover-font-color, var(--t-button-primary-hover-font-color, var(--tct-white, var(--app-white,#FFFFFF))));border-color:var(--tct-btn-primary-hover-border-color, var(--tct-btn-primary-border-color, transparent))}:host([color=\"primary\"]) button:hover:enabled,:host([color=\"primary\"]) button:active:enabled,:host([intent=\"workflow-primary\"]) button:hover:enabled,:host([intent=\"workflow-primary\"]) button:active:enabled{-webkit-box-shadow:var(--q2-btn-primary-hover-box-shadow);box-shadow:var(--q2-btn-primary-hover-box-shadow)}:host([color=\"primary\"]) button:focus,:host([intent=\"workflow-primary\"]) button:focus{-webkit-box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33B4FF)), var(--q2-btn-primary-hover-box-shadow);box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33B4FF)), var(--q2-btn-primary-hover-box-shadow)}:host([color=\"primary\"]) button:disabled,:host([intent=\"workflow-primary\"]) button:disabled{background:var(--tct-btn-primary-disabled-bg, var(--q2-btn-primary-bg));color:var(--tct-btn-primary-disabled-font-color, var(--q2-btn-primary-font-color));-webkit-box-shadow:var(--tct-btn-primary-disabled-box-shadow, var(--q2-btn-primary-box-shadow));box-shadow:var(--tct-btn-primary-disabled-box-shadow, var(--q2-btn-primary-box-shadow))}:host([color=\"secondary\"]) button,:host([intent=\"workflow-secondary\"]) button{background:var(--q2-btn-secondary-bg);color:var(--q2-btn-secondary-font-color, var(--tct-btn-secondary-font-color, var(--t-button-secondary-font-color, var(--tct-white, var(--app-white, #FFFFFF)))));border-color:var(--tct-btn-secondary-border-color, transparent);border-width:var(--tct-btn-secondary-border-width, 0);border-radius:var(--tct-btn-secondary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));-webkit-box-shadow:var(--q2-btn-secondary-box-shadow, var(--tct-btn-secondary-box-shadow, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)));box-shadow:var(--q2-btn-secondary-box-shadow, var(--tct-btn-secondary-box-shadow, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)));font-weight:var(--tct-btn-secondary-font-weight, 600);text-transform:var(--tct-btn-secondary-text-transform, none);letter-spacing:var(--tct-btn-secondary-letter-spacing, normal)}:host([color=\"secondary\"]) button:enabled:hover,:host([color=\"secondary\"]) button:enabled:focus,:host([color=\"secondary\"]) button:enabled:active,:host([intent=\"workflow-secondary\"]) button:enabled:hover,:host([intent=\"workflow-secondary\"]) button:enabled:focus,:host([intent=\"workflow-secondary\"]) button:enabled:active{background:var(--tct-btn-secondary-hover-bg, var(--t-button-default-hover-bg, var(--tct-gray-5, var(--app-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));color:var(--tct-btn-secondary-hover-font-color, var(--t-button-default-hover-font-color, var(--tct-white, var(--app-white, #FFFFFF))));border-color:var(--tct-btn-secondary-hover-border-color, var(--tct-btn-secondary-border-color, transparent))}:host([color=\"secondary\"]) button:hover:enabled,:host([color=\"secondary\"]) button:active:enabled,:host([intent=\"workflow-secondary\"]) button:hover:enabled,:host([intent=\"workflow-secondary\"]) button:active:enabled{-webkit-box-shadow:var(--q2-btn-secondary-hover-box-shadow, var(--tct-btn-secondary-hover-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23)));box-shadow:var(--q2-btn-secondary-hover-box-shadow, var(--tct-btn-secondary-hover-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23)))}:host([color=\"secondary\"]) button:focus,:host([intent=\"workflow-secondary\"]) button:focus{-webkit-box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33B4FF)), var(--q2-btn-secondary-hover-box-shadow);box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33B4FF)), var(--q2-btn-secondary-hover-box-shadow)}:host([color=\"secondary\"]) button:disabled,:host([intent=\"workflow-secondary\"]) button:disabled{background:var(--tct-btn-secondary-disabled-bg, var(--q2-btn-secondary-bg));color:var(--tct-btn-secondary-disabled-font-color, var(--q2-btn-secondary-font-color));-webkit-box-shadow:var(--tct-btn-secondary-disabled-box-shadow, var(--q2-btn-secondary-box-shadow));box-shadow:var(--tct-btn-secondary-disabled-box-shadow, var(--q2-btn-secondary-box-shadow))}:host([intent=\"neutral\"]) button{background:var(--q2-btn-neutral-bg, var(--tct-btn-neutral-bg, transparent));color:var(--q2-btn-neutral-font-color, var(--tct-btn-neutral-font-color, var(--t-button-neutral-font-color, var(--tct-gray-1, var(--app-gray-1, var(--tct-black, var(--app-black, #0d0d0d)))))));border-color:var(--tct-btn-neutral-border-color, transparent);border-width:var(--tct-btn-neutral-border-width, 0);border-radius:var(--tct-btn-neutral-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));-webkit-box-shadow:var(--q2-btn-neutral-box-shadow, var(--tct-btn-neutral-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.12), 0 3px 3px rgba(0, 0, 0, 0.24)));box-shadow:var(--q2-btn-neutral-box-shadow, var(--tct-btn-neutral-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.12), 0 3px 3px rgba(0, 0, 0, 0.24)));font-weight:var(--tct-btn-neutral-font-weight, 600);text-transform:var(--tct-btn-neutral-text-transform, none);letter-spacing:var(--tct-btn-neutral-letter-spacing, normal)}:host([intent=\"neutral\"]) button:enabled:hover,:host([intent=\"neutral\"]) button:enabled:focus,:host([intent=\"neutral\"]) button:enabled:active{background:var(--tct-btn-neutral-hover-bg, transparent);color:var(--tct-btn-neutral-hover-font-color, var(--t-button-default-hover-font-color, var(--tct-white, var(--app-white, #FFFFFF))));border-color:var(--tct-btn-neutral-hover-border-color, var(--tct-btn-neutral-border-color, transparent))}:host([intent=\"neutral\"]) button:hover:enabled,:host([intent=\"neutral\"]) button:active:enabled{-webkit-box-shadow:var(--q2-btn-neutral-hover-box-shadow, var(--tct-btn-neutral-hover-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.36)));box-shadow:var(--q2-btn-neutral-hover-box-shadow, var(--tct-btn-neutral-hover-box-shadow, 0 5px 10px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.36)))}:host([intent=\"neutral\"]) button:focus{-webkit-box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33B4FF)), var(--q2-btn-neutral-hover-box-shadow);box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33B4FF)), var(--q2-btn-neutral-hover-box-shadow)}:host([intent=\"neutral\"]) button:disabled{background:var(--tct-btn-neutral-disabled-bg, var(--q2-btn-neutral-bg));color:var(--tct-btn-neutral-disabled-font-color, var(--q2-btn-neutral-font-color));-webkit-box-shadow:var(--tct-btn-neutral-disabled-box-shadow, var(--q2-btn-neutral-box-shadow));box-shadow:var(--tct-btn-neutral-disabled-box-shadow, var(--q2-btn-neutral-box-shadow))}:host([icon]) button{width:var(--tct-btn-icon-width, 44px);height:var(--tct-btn-icon-height, 44px);color:var(--tct-btn-icon-color, inherit);border-radius:var(--tct-btn-icon-border-radius, 0)}:host([icon]) button:hover,:host([icon]) button:focus{background-color:var(--tct-btn-icon-hover-bg, var(--tct-gray-14, var(--app-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #F2F2F2)))))}:host([icon][active]) button{background-color:var(--tct-btn-icon-active-bg, var(--tct-btn-icon-hover-bg, ar(--tct-gray-14, var(--app-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #F2F2F2))))))}:host([icon]) button:hover *,:host([icon]) button:focus *,:host([icon][active]) button *{color:var(--tct-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color,#080808)))}:host([icon]) button div{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host([badge]) button{padding:var(--tct-btn-badge-padding, 2px 5px);font-size:var(--tct-btn-badge-font-size, var(--tct-btn-font-size, inherit));border-radius:var(--tct-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));background-color:var(--tct-btn-badge-bg, transparent);color:var(--tct-btn-badge-font-color, inherit)}:host([badge]:hover) button:enabled{background-color:var(--tct-btn-badge-hover-bg, var(--tct-gray-14, var(--app-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #F2F2F2)))));color:var(--tct-btn-badge-hover-font-color, var(--tct-gray-5, var(--app-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040)))))}:host(.selected[badge]) button,:host([active][badge]) button{background-color:var(--tct-btn-badge-active-bg, var(--q2-btn-primary-bg));color:var(--tct-btn-badge-active-font-color, var(--q2-btn-primary-font-color))}";
 
 const Q2Btn = class {
     constructor(hostRef) {

package/dist/esm/q2-calendar.entry.js

@@ -6181,7 +6181,7 @@ function processCount(newCalendarDate, count) {
     return returnCount;
 }
 
-const stylesCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}*:active{outline:none}*:focus{outline:none;-webkit-box-shadow:var(--const-global-focus);box-shadow:var(--const-global-focus)}:host{-webkit-box-shadow:none !important;box-shadow:none !important}::-moz-focus-inner{border:none}input,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white);color:var(--t-font-color);left:0;width:100%;z-index:100;margin-top:1px;-webkit-box-shadow:var(--app-shadow-1);box-shadow:var(--app-shadow-1);height:0;overflow:hidden;opacity:0;visibility:hidden;-webkit-transition:opacity var(--app-tween-1);transition:opacity var(--app-tween-1);border-radius:var(--tct-dropdown-element-br, 0)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible;margin-bottom:var(--app-scale-2)}:host([alignment='right']) .q2-element-dropdown{left:auto;right:0}:host{display:block}:host[hidden]{display:none}.calendar-container{position:relative;display:block}q2-input{margin:0;cursor:pointer}.q2-element-dropdown{text-align:center;min-width:308px}.q2-element-dropdown.dropup{bottom:var(--q2-input-min-height, 44px);margin-bottom:0px}.calendar-label{font-size:var(--tct-calendar-label-font-size, 16px);-ms-flex:1 1;flex:1 1;-ms-flex-preferred-size:calc(100% - var(--tct-btn-icon-width, 44px));flex-basis:calc(100% - var(--tct-btn-icon-width, 44px));margin:0;padding:var(\n            --tct-calendar-label-vertical-padding,\n            var(--tct-scale-2, var(--app-scale-2, 10px))\n        )\n        0}.cal-month-heading{padding:0 0 0.75rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;font-size:var(--tct-calendar-month-font-size, 16px);font-weight:var(--tct-calendar-month-font-weight, 600)}.cal-month-text{min-width:82px;display:inline-block}.cal-year-text{min-width:50px;display:inline-block}.cal-days{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-bottom:2px}.cal-day,.cal-days>div{-ms-flex:0 0 14.285714%;flex:0 0 14.285714%}.cal-day-heading{font-size:var(--tct-calendar-day-heading-font-size, inherit);font-weight:var(--tct-calendar-day-heading-font-weight, 600)}.is-valid:hover{background-color:var(--tct-calendar-day-hover-bg, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)));color:var(--tct-calendar-day-hover-font-color, inherit)}.is-valid.is-selected{background-color:var(\n        --tct-calendar-day-selected-bg,\n        var(--tct-calendar-day-hover-bg, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))\n    );color:var(\n        --tct-calendar-day-selected-font-color,\n        var(--tct-calendar-day-hover-font-color, inherit)\n    );-webkit-box-shadow:inset 2px 2px\n            var(\n                --tct-calenday-day-selected-outline-color,\n                var(---tct-stoplight-info, var(--const-stoplight-info, #0079c1))\n            ),\n        inset -2px -2px\n            var(\n                --tct-calenday-day-selected-outline-color,\n                var(---tct-stoplight-info, var(--const-stoplight-info, #0079c1))\n            );box-shadow:inset 2px 2px\n            var(\n                --tct-calenday-day-selected-outline-color,\n                var(---tct-stoplight-info, var(--const-stoplight-info, #0079c1))\n            ),\n        inset -2px -2px\n            var(\n                --tct-calenday-day-selected-outline-color,\n                var(---tct-stoplight-info, var(--const-stoplight-info, #0079c1))\n            )}.date-details{display:-ms-flexbox;display:flex;height:44px;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.is-today span{display:block}.is-today .date-details{-ms-flex-pack:start;justify-content:flex-start}.today-decorator{text-transform:uppercase;font-weight:700;font-size:10px;height:12px}.activity-decorator{width:var(--tct-scale-1, var(--app-scale-1, 5px));height:var(--tct-scale-1, var(--app-scale-1, 5px));border-radius:50%;margin:0 auto;background-color:var(\n        --tct-calendar-activity-indicator-color,\n        var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))\n    )}.calendar-disclaimer{font-size:var(\n        --tct-calendar-disclaimer-font-size,\n        var(--tct-font-size-small, var(--app-font-size-small, 12px))\n    );border-top:1px solid\n        var(--tct-calendar-disclaimer-border-color, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)));padding:var(--tct-calendar-disclaimer-padding, var(--tct-scale-2, var(--app-scale-2, 10px)));text-align:left}";
+const stylesCss = "* {\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n*:active {\n    outline: none;\n}\n\n*:focus {\n    outline: none;\n    -webkit-box-shadow: var(--const-global-focus);\n    box-shadow: var(--const-global-focus);\n}\n\n:host {\n    -webkit-box-shadow: none !important;\n    box-shadow: none !important;\n}\n\n::-moz-focus-inner {\n    border: none;\n}\n\ninput,\nbutton {\n    font-family: inherit;\n    font-size: inherit;\n}\n\n:host(.sr),\n:host(.sr) button {\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n    white-space: nowrap;\n}\n\n.sr,\n.sr button {\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n    white-space: nowrap;\n}\n\n.hidden {\n    display: none;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.invisible {\n    visibility: hidden;\n}\n\n.q2-element-dropdown {\n    display: none;\n    position: absolute;\n    background-color: var(--app-white);\n    color: var(--t-font-color);\n    left: 0;\n    width: 100%;\n    z-index: 100;\n    margin-top: 1px;\n    -webkit-box-shadow: var(--app-shadow-1);\n    box-shadow: var(--app-shadow-1);\n    height: 0;\n    overflow: hidden;\n    opacity: 0;\n    visibility: hidden;\n    -webkit-transition: opacity var(--app-tween-1);\n    transition: opacity var(--app-tween-1);\n    border-radius: var(--tct-dropdown-element-br, 0);\n}\n\n.q2-element-dropdown.sizable {\n    display: block;\n    height: auto;\n}\n\n.dropdown-open .q2-element-dropdown {\n    display: block;\n    height: auto;\n    overflow: auto;\n    opacity: 1;\n    visibility: visible;\n    margin-bottom: var(--app-scale-2);\n}\n\n:host([alignment='right']) .q2-element-dropdown {\n    left: auto;\n    right: 0;\n}\n\n\n:host {\n    display: block;\n}\n\n:host[hidden] {\n    display: none;\n}\n\n.calendar-container {\n    position: relative;\n    display: block;\n}\n\nq2-input {\n    margin: 0;\n    cursor: pointer;\n}\n\n.q2-element-dropdown {\n    text-align: center;\n    min-width: 308px;\n}\n\n.q2-element-dropdown.dropup {\n    bottom: var(--q2-input-min-height, 44px);\n    margin-bottom: 0px;\n}\n\n.calendar-label {\n    font-size: var(--tct-calendar-label-font-size, 16px);\n    -ms-flex: 1 1;\n    flex: 1 1;\n    -ms-flex-preferred-size: calc(100% - var(--tct-btn-icon-width, 44px));\n    flex-basis: calc(100% - var(--tct-btn-icon-width, 44px));\n    margin: 0;\n    padding: var(\n            --tct-calendar-label-vertical-padding,\n            var(--tct-scale-2, var(--app-scale-2, 10px))\n        )\n        0;\n}\n\n.cal-month-heading {\n    padding: 0 0 0.75rem;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-pack: center;\n    justify-content: center;\n    -ms-flex-align: center;\n    align-items: center;\n    font-size: var(--tct-calendar-month-font-size, 16px);\n    font-weight: var(--tct-calendar-month-font-weight, 600);\n}\n\n.cal-month-text {\n    min-width: 82px;\n    display: inline-block;\n}\n\n.cal-year-text {\n    min-width: 50px;\n    display: inline-block;\n}\n\n.cal-days {\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-wrap: wrap;\n    flex-wrap: wrap;\n    padding-bottom: 2px;\n}\n\n.cal-day,\n.cal-days > div {\n    -ms-flex: 0 0 14.285714%;\n    flex: 0 0 14.285714%;\n}\n\n.cal-day-heading {\n    font-size: var(--tct-calendar-day-heading-font-size, inherit);\n    font-weight: var(--tct-calendar-day-heading-font-weight, 600);\n}\n\n.is-valid:hover {\n    background-color: var(--tct-calendar-day-hover-bg, var(--tct-gray-14, var(--app-gray14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2)))));\n    color: var(--tct-calendar-day-hover-font-color, inherit);\n}\n\n.is-valid.is-selected {\n    background-color: var(\n        --tct-calendar-day-selected-bg,\n        var(--tct-calendar-day-hover-bg, var(--tct-gray-14, var(--app-gray-14, var(--tct-gray-l4,var(--app-gray-l4, #f2f2f2)))));\n    );\n    color: var(\n        --tct-calendar-day-selected-font-color,\n        var(--tct-calendar-day-hover-font-color, inherit)\n    );\n    -webkit-box-shadow: inset 2px 2px\n            var(\n                --tct-calenday-day-selected-outline-color,\n                var(---tct-stoplight-info, var(--const-stoplight-info, #0079c1))\n            ),\n        inset -2px -2px\n            var(\n                --tct-calenday-day-selected-outline-color,\n                var(---tct-stoplight-info, var(--const-stoplight-info, #0079c1))\n            );\n    box-shadow: inset 2px 2px\n            var(\n                --tct-calenday-day-selected-outline-color,\n                var(---tct-stoplight-info, var(--const-stoplight-info, #0079c1))\n            ),\n        inset -2px -2px\n            var(\n                --tct-calenday-day-selected-outline-color,\n                var(---tct-stoplight-info, var(--const-stoplight-info, #0079c1))\n            );\n}\n\n.date-details {\n    display: -ms-flexbox;\n    display: flex;\n    height: 44px;\n    -ms-flex-direction: column;\n    flex-direction: column;\n    -ms-flex-pack: center;\n    justify-content: center;\n    -ms-flex-align: center;\n    align-items: center;\n}\n\n.is-today span {\n    display: block;\n}\n\n.is-today .date-details {\n    -ms-flex-pack: start;\n    justify-content: flex-start;\n}\n\n.today-decorator {\n    text-transform: uppercase;\n    font-weight: 700;\n    font-size: 10px;\n    height: 12px;\n}\n\n.activity-decorator {\n    width: var(--tct-scale-1, var(--app-scale-1, 5px));\n    height: var(--tct-scale-1, var(--app-scale-1, 5px));\n    border-radius: 50%;\n    margin: 0 auto;\n    background-color: var(\n        --tct-calendar-activity-indicator-color,\n        var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))\n    );\n}\n\n.calendar-disclaimer {\n    font-size: var(\n        --tct-calendar-disclaimer-font-size,\n        var(--tct-font-size-small, var(--app-font-size-small, 12px))\n    );\n    border-top: 1px solid\n        var(--tct-calendar-disclaimer-border-color, var(--tct-gray-13, var(--app-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #e6e6e6)))));\n    padding: var(--tct-calendar-disclaimer-padding, var(--tct-scale-2, var(--app-scale-2, 10px)));\n    text-align: left;\n}\n";
 
 const Q2Calendar = class {
     constructor(hostRef) {

package/dist/esm/q2-carousel-pane.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-06403810.js';
 
-const stylesCss = "q2-carousel .swiper-slide{-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition:all .2s;transition:all .2s}.q2-carousel-pane .q2-carousel-pane-main-content{-webkit-box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.25);box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.25);background-color:var(---tct-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)));border:var(--tct-carousel-pane-border-width, 1px) solid var(--tct-carousel-pane-border-color, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)));border-radius:var(--tct-carousel-pane-border-radius, 8px);padding:var(--tct-carousel-pane-padding, .5rem .5rem .5rem .5rem);min-height:10em}q2-carousel-pane.q2-carousel-pane:focus{-webkit-box-shadow:none;box-shadow:none}.q2-carousel-pane:focus .q2-carousel-pane-main-content{outline:none;-webkit-box-shadow:0 0 0 2px #33B4FF;box-shadow:0 0 0 2px #33B4FF;}.q2-carousel-pane .q2-carousel-pane-main-content:hover{cursor:-webkit-grab;cursor:grab}";
+const stylesCss = "q2-carousel .swiper-slide{-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition:all .2s;transition:all .2s}.q2-carousel-pane .q2-carousel-pane-main-content{-webkit-box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.25);box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.25);background-color:var(---tct-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)));border:var(--tct-carousel-pane-border-width, 1px) solid var(--tct-carousel-pane-border-color, var(--tct-gray-11, var(--app-gray-11, var(--tct-gray-l1, var(--app-gray-l1,#cccccc)))));border-radius:var(--tct-carousel-pane-border-radius, 8px);padding:var(--tct-carousel-pane-padding, .5rem .5rem .5rem .5rem);min-height:10em}q2-carousel-pane.q2-carousel-pane:focus{-webkit-box-shadow:none;box-shadow:none}.q2-carousel-pane:focus .q2-carousel-pane-main-content{outline:none;-webkit-box-shadow:0 0 0 2px #33B4FF;box-shadow:0 0 0 2px #33B4FF;}.q2-carousel-pane .q2-carousel-pane-main-content:hover{cursor:-webkit-grab;cursor:grab}";
 
 const Q2Carousel = class {
     constructor(hostRef) {

package/dist/esm/q2-carousel.entry.js

@@ -8626,7 +8626,7 @@ if (typeof Swiper.use === 'undefined') {
 
 Swiper.use(components);
 
-const stylesCss = ".q2-carousel-pagination-navigation-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin:.5rem 0}.q2-carousel-pagination-navigation-wrapper.evenly-space{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.q2-carousel-pagination-navigation-wrapper .q2-carousel-control-center-tray{display:-ms-flexbox;display:flex}q2-carousel button{border:0;background:transparent;-webkit-transition:all .2s;transition:all .2s;opacity:0.3}q2-carousel button:hover{opacity:0.7;cursor:pointer}.q2-carousel-navigation-button{border:0;background:transparent;-webkit-transition:all .2s;transition:all .2s;opacity:0.3}.q2-carousel-navigation-button.hide-carousel-navigation-button{opacity:0;pointer-events:none}.q2-carousel-navigation-button.hide-carousel-navigation-button:hover{cursor:default}.q2-carousel-content-staging{display:none}.q2-carousel-swiper-wrapper.compact{overflow:visible}.q2-carousel-swiper-container.compact q2-btn{margin-top:4px}.q2-carousel-pagination{margin-top:10px;height:12px;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;-ms-flex-pack:center;justify-content:center}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator{display:none}.q2-carousel-pagination .q2-carousel-page-indicator{display:inline-block;height:12px;width:12px;border-radius:50%;background-color:var(---tct-carousel-pagination-inactive-color, var(--tct-gray-l1, var(--app-gray-l1, #CCCCCC)));margin-right:.5rem;padding:0;border:0;-webkit-transition:all .5s;transition:all .5s;opacity:0.7}.q2-carousel-pagination .q2-carousel-page-indicator:hover{cursor:pointer;background-color:var(---tct-carousel-pagination-active-color, var(--tct-primary, var(--app-primary, #006eb2)));opacity:1}.q2-carousel-pagination .q2-carousel-page-indicator.active-page{display:inline-block;background-color:var(---tct-carousel-pagination-active-color, var(--tct-primary, var(--app-primary, #006eb2)))}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent{display:inline-block;height:10px;width:10px}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent-adjacent{display:inline-block;height:8px;width:8px}.q2-carousel-swiper-container .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}q2-carousel .swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:5px 0 0 0;z-index:1}q2-carousel .swiper-container:focus{-webkit-box-shadow:none;box-shadow:none}.q2-carousel-swiper-container .swiper-wrapper{position:relative;width:100%;min-height:12em;z-index:1;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}q2-carousel .swiper-slide-invisible-blank{visibility:hidden}q2-carousel .swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.q2-carousel-swiper-container.content-peek-display .q2-carousel-pane:not(.swiper-slide-active){-webkit-transform:scale(0.9);transform:scale(0.9)}.q2-carousel-swiper-container.full-width-display{padding:5px}.q2-carousel-swiper-container.swiper-container.insufficient-panes .q2-carousel-swiper-wrapper,.q2-carousel-swiper-container.swiper-container.insufficient-panes .q2-carousel-pagination-navigation-wrapper{display:none}q2-carousel .insufficient-pane-feedback{text-align:center}q2-carousel .insufficient-pane-feedback.content-peek-display{max-width:395px;margin:0 auto}q2-carousel .insufficient-panes-header,q2-carousel .insufficient-panes-body{text-align:center}q2-carousel .insufficient-panes-header strong{font-weight:600}q2-carousel .insufficient-pane-feedback{-webkit-box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.25);box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.25);background-color:var(---tct-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)));border:var(--tct-carousel-pane-border-width, 1px) solid var(--tct-carousel-pane-border-color, var(--tct-gray-l1, var(--app-gray-l1, #CCCCCC)));border-radius:var(--tct-carousel-pane-border-radius, 8px);padding:var(--tct-carousel-pane-padding, .5rem .5rem .5rem .5rem);min-height:10em}q2-carousel .insufficient-panes-icon-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin:1rem 0 2rem 0}q2-carousel .insufficient-panes-icon-wrapper q2-icon{width:38px}q2-carousel .insufficient-pane-feedback .insufficient-panes-body{margin:0 auto 2rem auto;max-width:75%}";
+const stylesCss = ".q2-carousel-pagination-navigation-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin:.5rem 0}.q2-carousel-pagination-navigation-wrapper.evenly-space{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.q2-carousel-pagination-navigation-wrapper .q2-carousel-control-center-tray{display:-ms-flexbox;display:flex}q2-carousel button{border:0;background:transparent;-webkit-transition:all .2s;transition:all .2s;opacity:0.3}q2-carousel button:hover{opacity:0.7;cursor:pointer}.q2-carousel-navigation-button{border:0;background:transparent;-webkit-transition:all .2s;transition:all .2s;opacity:0.3}.q2-carousel-navigation-button.hide-carousel-navigation-button{opacity:0;pointer-events:none}.q2-carousel-navigation-button.hide-carousel-navigation-button:hover{cursor:default}.q2-carousel-content-staging{display:none}.q2-carousel-swiper-wrapper.compact{overflow:visible}.q2-carousel-swiper-container.compact q2-btn{margin-top:4px}.q2-carousel-pagination{margin-top:10px;height:12px;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;-ms-flex-pack:center;justify-content:center}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator{display:none}.q2-carousel-pagination .q2-carousel-page-indicator{display:inline-block;height:12px;width:12px;border-radius:50%;background-color:var(---tct-carousel-pagination-inactive-color, var(--tct-gray-11, var(--app-gray-11,  var(--tct-grayl1, var(--app-gray-l1,#CCCCCC)))));margin-right:.5rem;padding:0;border:0;-webkit-transition:all .5s;transition:all .5s;opacity:0.7}.q2-carousel-pagination .q2-carousel-page-indicator:hover{cursor:pointer;background-color:var(---tct-carousel-pagination-active-color, var(--tct-primary, var(--app-primary, #006eb2)));opacity:1}.q2-carousel-pagination .q2-carousel-page-indicator.active-page{display:inline-block;background-color:var(---tct-carousel-pagination-active-color, var(--tct-primary, var(--app-primary, #006eb2)))}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent{display:inline-block;height:10px;width:10px}.q2-carousel-pagination.dynamic .q2-carousel-page-indicator.active-adjacent-adjacent{display:inline-block;height:8px;width:8px}.q2-carousel-swiper-container .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}q2-carousel .swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:5px 0 0 0;z-index:1}q2-carousel .swiper-container:focus{-webkit-box-shadow:none;box-shadow:none}.q2-carousel-swiper-container .swiper-wrapper{position:relative;width:100%;min-height:12em;z-index:1;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}q2-carousel .swiper-slide-invisible-blank{visibility:hidden}q2-carousel .swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.q2-carousel-swiper-container.content-peek-display .q2-carousel-pane:not(.swiper-slide-active){-webkit-transform:scale(0.9);transform:scale(0.9)}.q2-carousel-swiper-container.full-width-display{padding:5px}.q2-carousel-swiper-container.swiper-container.insufficient-panes .q2-carousel-swiper-wrapper,.q2-carousel-swiper-container.swiper-container.insufficient-panes .q2-carousel-pagination-navigation-wrapper{display:none}q2-carousel .insufficient-pane-feedback{text-align:center}q2-carousel .insufficient-pane-feedback.content-peek-display{max-width:395px;margin:0 auto}q2-carousel .insufficient-panes-header,q2-carousel .insufficient-panes-body{text-align:center}q2-carousel .insufficient-panes-header strong{font-weight:600}q2-carousel .insufficient-pane-feedback{-webkit-box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.25);box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.25);background-color:var(---tct-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)));border:var(--tct-carousel-pane-border-width, 1px) solid var(--tct-carousel-pane-border-color, var(--tct-gray-11, var(--app-gray-11, var(--tct-gray-l1, var(--app-grayl1, #CCCCCC)))));border-radius:var(--tct-carousel-pane-border-radius, 8px);padding:var(--tct-carousel-pane-padding, .5rem .5rem .5rem .5rem);min-height:10em}q2-carousel .insufficient-panes-icon-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin:1rem 0 2rem 0}q2-carousel .insufficient-panes-icon-wrapper q2-icon{width:38px}q2-carousel .insufficient-pane-feedback .insufficient-panes-body{margin:0 auto 2rem auto;max-width:75%}";
 
 const carouselBreakpoint = 500; /* width in px of this host element where the layout starts to get unruly */
 const Q2Carousel = class {

package/dist/esm/q2-checkbox-group.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-06403810.js';
 import { c as createGuid } from './index-ff056163.js';
 
-const stylesCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}*:active{outline:none}*:focus{outline:none;-webkit-box-shadow:var(--const-global-focus);box-shadow:var(--const-global-focus)}:host{-webkit-box-shadow:none !important;box-shadow:none !important}::-moz-focus-inner{border:none}input,button{font-family:inherit;font-size: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{margin-top:var(--tct-scale-2, var(--app-scale-2, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:-webkit-gradient(linear, left top, right top, from(transparent), to(white));background:linear-gradient(to right, transparent, white)}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(\n        --tct-input-label-optional-margin-left,\n        var(--tct-scale-1, var(--app-scale-1, 5px))\n    );color:var(\n        --tct-input-label-optional-font-color,\n        var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n    );font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flexed.left{-ms-flex-pack:left;justify-content:left}";
+const stylesCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}*:active{outline:none}*:focus{outline:none;-webkit-box-shadow:var(--const-global-focus);box-shadow:var(--const-global-focus)}:host{-webkit-box-shadow:none !important;box-shadow:none !important}::-moz-focus-inner{border:none}input,button{font-family:inherit;font-size: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{margin-top:var(--tct-scale-2, var(--app-scale-2, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:-webkit-gradient(linear, left top, right top, from(transparent), to(white));background:linear-gradient(to right, transparent, white)}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(\n        --tct-input-label-optional-margin-left,\n        var(--tct-scale-1, var(--app-scale-1, 5px))\n    );color:var(\n        --tct-input-label-optional-font-color,\n        var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))))\n    );font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flexed.left{-ms-flex-pack:left;justify-content:left}";
 
 const Q2CheckboxGroup = class {
     constructor(hostRef) {

package/dist/esm/q2-checkbox.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-06403810.js';
 import { c as createGuid } from './index-ff056163.js';
 
-const stylesCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}*:active{outline:none}*:focus{outline:none;-webkit-box-shadow:var(--const-global-focus);box-shadow:var(--const-global-focus)}:host{-webkit-box-shadow:none !important;box-shadow:none !important}::-moz-focus-inner{border:none}input,button{font-family:inherit;font-size: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;padding:var(--tct-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px))) 0}label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;cursor:pointer;--q2-checkbox-outer-stroke-color:var(\n        --tct-checkbox-outer-stroke-color,\n        var(--tct-gray-l1, var(--app-gray-l1, #cccccc))\n    );--q2-checkbox-outer-fill-color:var(\n        --tct-checkbox-outer-fill-color,\n        var(--tct-white, var(--app-white, #ffffff))\n    );--q2-checkbox-favorite-fill:var(\n        --tct-checkbox-favorite-fill-color,\n        var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))\n    );--q2-checkbox-checked-color:var(\n        --tct-checkbox-check-stroke-color,\n        var(--t-checkbox-fill, var(--tct-gray-d2, var(--app-gray-d2, #404040)))\n    )}input:disabled+label{opacity:var(\n        --tct-checkbox-disabled-opacity,\n        var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))\n    )}.checkbox-icon{height:var(--tct-checkbox-size, 20px);width:var(--tct-checkbox-size, 20px);border-radius:var(\n        --tct-checkbox-outer-border-radius,\n        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n    );stroke:var(--q2-checkbox-outer-stroke-color);color:var(--q2-checkbox-outer-stroke-color);--t-icon-stroke-primary:var(--q2-checkbox-outer-stroke-color);stroke-width:var(--tct-checkbox-outer-stroke-width, 2);fill:var(--q2-checkbox-outer-fill-color);-ms-flex-negative:0;flex-shrink:0}input:focus+label .checkbox-icon{-webkit-box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff));box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}.checkbox-fill{stroke:var(--q2-checkbox-checked-color)}input:checked+label .checkbox-icon{fill:var(--tct-checkbox-checked-outer-fill-color, var(--q2-checkbox-outer-fill-color));stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--q2-checkbox-outer-stroke-color))}input:focus+label .checkbox-icon{stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--q2-checkbox-checked-color))}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, 2.5);stroke-linecap:round;stroke-linejoin:round}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, 3.5)}.q2-checkbox-label-content{font-weight:var(--tct-checkbox-font-weight, 400);-ms-flex:1 1 auto;flex:1 1 auto;width:calc(\n        100% - var(--tct-checkbox-size, 20px) - var(--tct-scale-2, var(--app-scale-2, 10px))\n    )}input:checked+label .q2-checkbox-label-content{font-weight:var(--tct-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25)}:host([type='favorite']) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, 2.5);width:var(--tct-checkbox-size, 20px);height:var(--tct-checkbox-size, 20px);-webkit-transition:fill var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        stroke var(--tct-tween-2, var(--app-tween-2, 0.4s ease));transition:fill var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        stroke var(--tct-tween-2, var(--app-tween-2, 0.4s ease))}:host([type='favorite']) input:focus+label .checkbox-icon{color:var(--q2-checkbox-favorite-fill);--tct-icon-stroke-primary:var(--q2-checkbox-favorite-fill)}:host([type='favorite']) input:checked+label .checkbox-icon{color:var(--q2-checkbox-favorite-fill);--t-icon-stroke-primary:var(--q2-checkbox-favorite-fill);--tct-icon-stroke-primary:var(--q2-checkbox-favorite-fill);fill:var(--q2-checkbox-favorite-fill);--tct-icon-stroke-width:1;-webkit-transition:fill var(--tct-tween-1, var(--app-tween-1, 0.2s ease)),\n        color var(--tct-tween-1, var(--app-tween-1, 0.2s ease)),\n        stroke var(--tct-tween-1, var(--app-tween-1, 0.2s ease));transition:fill var(--tct-tween-1, var(--app-tween-1, 0.2s ease)),\n        color var(--tct-tween-1, var(--app-tween-1, 0.2s ease)),\n        stroke var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([alignment='right']) label,:host([type='toggle']:not([alignment='left'])) label{-ms-flex-flow:row-reverse;flex-flow:row-reverse}.checkbox-icon,:host([type='toggle'][alignment='left']) .toggle-svg{margin-right:var(--tct-scale-2, var(--app-scale-2, 10px));margin-left:0}:host([alignment='right']) .checkbox-icon,.toggle-svg{margin-right:0;margin-left:var(--tct-scale-2, var(--app-scale-2, 10px))}:host([type='toggle']) .toggle-svg{height:30px;width:46px;position:relative}:host([type='toggle']) .toggle-track,:host([type='toggle']) .toggle-indicator{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}:host([type='toggle']) .toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)));height:14px;width:46px}:host([type='toggle']) input:checked+label .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--q2-checkbox-checked-color));opacity:0.5}:host([type='toggle']) .toggle-indicator{-webkit-transition:left var(--tct-tween-1, var(--app-tween-1, 0.2s ease));transition:left var(--tct-tween-1, var(--app-tween-1, 0.2s ease));height:30px;width:30px;left:0;border-radius:50%}:host([type='toggle']) input:checked+label .toggle-indicator{left:21px}:host([type='toggle']) .toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--tct-gray, var(--app-gray, #999999)))}:host([type='toggle']) input:checked+label .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--q2-checkbox-checked-color))}:host([type='toggle']) input:checked+label .off,:host([type='toggle']) input:not(:checked)+label .on{opacity:0}:host([type='toggle']) input:focus+label .toggle-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--q2-checkbox-checked-color));stroke-width:10px;stroke-opacity:0.5}:host([type='toggle']) input:not(:checked):focus+label .toggle-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--tct-gray, var(--app-gray, #999999)))}:host([type='toggle']) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff)));-webkit-transition:opacity var(--tct-tween-1, var(--app-tween-1, 0.2s ease));transition:opacity var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type='toggle']) input:checked+label .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff))))}";
+const stylesCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}*:active{outline:none}*:focus{outline:none;-webkit-box-shadow:var(--const-global-focus);box-shadow:var(--const-global-focus)}:host{-webkit-box-shadow:none !important;box-shadow:none !important}::-moz-focus-inner{border:none}input,button{font-family:inherit;font-size: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;padding:var(--tct-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px))) 0}label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;cursor:pointer;--q2-checkbox-outer-stroke-color:var(\n        --tct-checkbox-outer-stroke-color,\n        var(--tct-gray-11, var(--app-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))\n    );--q2-checkbox-outer-fill-color:var(\n        --tct-checkbox-outer-fill-color,\n        var(--tct-white, var(--app-white, #ffffff))\n    );--q2-checkbox-favorite-fill:var(\n        --tct-checkbox-favorite-fill-color,\n        var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))\n    );--q2-checkbox-checked-color:var(\n        --tct-checkbox-check-stroke-color,\n        var(--t-checkbox-fill, var(--tct-gray-5, var(--app-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040)))))\n    )}input:disabled+label{opacity:var(\n        --tct-checkbox-disabled-opacity,\n        var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))\n    )}.checkbox-icon{height:var(--tct-checkbox-size, 20px);width:var(--tct-checkbox-size, 20px);border-radius:var(\n        --tct-checkbox-outer-border-radius,\n        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))\n    );stroke:var(--q2-checkbox-outer-stroke-color);color:var(--q2-checkbox-outer-stroke-color);--t-icon-stroke-primary:var(--q2-checkbox-outer-stroke-color);stroke-width:var(--tct-checkbox-outer-stroke-width, 2);fill:var(--q2-checkbox-outer-fill-color);-ms-flex-negative:0;flex-shrink:0}input:focus+label .checkbox-icon{-webkit-box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff));box-shadow:var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}.checkbox-fill{stroke:var(--q2-checkbox-checked-color)}input:checked+label .checkbox-icon{fill:var(--tct-checkbox-checked-outer-fill-color, var(--q2-checkbox-outer-fill-color));stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--q2-checkbox-outer-stroke-color))}input:focus+label .checkbox-icon{stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--q2-checkbox-checked-color))}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, 2.5);stroke-linecap:round;stroke-linejoin:round}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, 3.5)}.q2-checkbox-label-content{font-weight:var(--tct-checkbox-font-weight, 400);-ms-flex:1 1 auto;flex:1 1 auto;width:calc(\n        100% - var(--tct-checkbox-size, 20px) - var(--tct-scale-2, var(--app-scale-2, 10px))\n    )}input:checked+label .q2-checkbox-label-content{font-weight:var(--tct-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25)}:host([type='favorite']) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, 2.5);width:var(--tct-checkbox-size, 20px);height:var(--tct-checkbox-size, 20px);-webkit-transition:fill var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        stroke var(--tct-tween-2, var(--app-tween-2, 0.4s ease));transition:fill var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),\n        stroke var(--tct-tween-2, var(--app-tween-2, 0.4s ease))}:host([type='favorite']) input:focus+label .checkbox-icon{color:var(--q2-checkbox-favorite-fill);--tct-icon-stroke-primary:var(--q2-checkbox-favorite-fill)}:host([type='favorite']) input:checked+label .checkbox-icon{color:var(--q2-checkbox-favorite-fill);--t-icon-stroke-primary:var(--q2-checkbox-favorite-fill);--tct-icon-stroke-primary:var(--q2-checkbox-favorite-fill);fill:var(--q2-checkbox-favorite-fill);--tct-icon-stroke-width:1;-webkit-transition:fill var(--tct-tween-1, var(--app-tween-1, 0.2s ease)),\n        color var(--tct-tween-1, var(--app-tween-1, 0.2s ease)),\n        stroke var(--tct-tween-1, var(--app-tween-1, 0.2s ease));transition:fill var(--tct-tween-1, var(--app-tween-1, 0.2s ease)),\n        color var(--tct-tween-1, var(--app-tween-1, 0.2s ease)),\n        stroke var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([alignment='right']) label,:host([type='toggle']:not([alignment='left'])) label{-ms-flex-flow:row-reverse;flex-flow:row-reverse}.checkbox-icon,:host([type='toggle'][alignment='left']) .toggle-svg{margin-right:var(--tct-scale-2, var(--app-scale-2, 10px));margin-left:0}:host([alignment='right']) .checkbox-icon,.toggle-svg{margin-right:0;margin-left:var(--tct-scale-2, var(--app-scale-2, 10px))}:host([type='toggle']) .toggle-svg{height:30px;width:46px;position:relative}:host([type='toggle']) .toggle-track,:host([type='toggle']) .toggle-indicator{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}:host([type='toggle']) .toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--tct-gray-11, var(--app-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));height:14px;width:46px}:host([type='toggle']) input:checked+label .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--q2-checkbox-checked-color));opacity:0.5}:host([type='toggle']) .toggle-indicator{-webkit-transition:left var(--tct-tween-1, var(--app-tween-1, 0.2s ease));transition:left var(--tct-tween-1, var(--app-tween-1, 0.2s ease));height:30px;width:30px;left:0;border-radius:50%}:host([type='toggle']) input:checked+label .toggle-indicator{left:21px}:host([type='toggle']) .toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))))}:host([type='toggle']) input:checked+label .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--q2-checkbox-checked-color))}:host([type='toggle']) input:checked+label .off,:host([type='toggle']) input:not(:checked)+label .on{opacity:0}:host([type='toggle']) input:focus+label .toggle-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--q2-checkbox-checked-color));stroke-width:10px;stroke-opacity:0.5}:host([type='toggle']) input:not(:checked):focus+label .toggle-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))))}:host([type='toggle']) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff)));-webkit-transition:opacity var(--tct-tween-1, var(--app-tween-1, 0.2s ease));transition:opacity var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type='toggle']) input:checked+label .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff))))}";
 
 const Q2Checkbox = class {
     constructor(hostRef) {

package/dist/esm/q2-dropdown-item.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-06403810.js';
 
-const stylesCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}*:active{outline:none}*:focus{outline:none;-webkit-box-shadow:var(--const-global-focus);box-shadow:var(--const-global-focus)}:host{-webkit-box-shadow:none !important;box-shadow:none !important}::-moz-focus-inner{border:none}input,button{font-family:inherit;font-size: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}.dropdown-separator{margin:0 var(--tct-scale-1, var(--app-scale-1, 5px));border-bottom:1px solid\n        var(--tct-dropdown-item-separator-color, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))}.dropdown-item-wrapper{display:-ms-flexbox;display:flex}.dropdown-item{min-height:44px;-ms-flex:1 1 100%;flex:1 1 100%;padding:var(--tct-dropdown-item-padding, 2px)}.dropdown-item-content{padding:12px var(--tct-scale-3, var(--app-scale-3, 15px));text-align:left;background-color:var(--tct-dropdown-item-bg, var(--tct-white, var(--app-white, #ffffff)));color:var(--tct-dropdown-item-font-color, inherit);-webkit-transition:background-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));transition:background-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));overflow:hidden;text-overflow:ellipsis}:host(:not([disabled])) .dropdown-item-content:hover,:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content{background-color:var(\n        --tct-dropdown-item-selected-bg,\n        var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))\n    );color:var(--tct-dropdown-item-selected-font-color, inherit)}.remove-dropdown-item{-ms-flex:0 0 44px;flex:0 0 44px;margin:2px}";
+const stylesCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}*:active{outline:none}*:focus{outline:none;-webkit-box-shadow:var(--const-global-focus);box-shadow:var(--const-global-focus)}:host{-webkit-box-shadow:none !important;box-shadow:none !important}::-moz-focus-inner{border:none}input,button{font-family:inherit;font-size: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}.dropdown-separator{margin:0 var(--tct-scale-1, var(--app-scale-1, 5px));border-bottom:1px solid\n        var(--tct-dropdown-item-separator-color, var(--tct-gray-11, var(--app-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))))}.dropdown-item-wrapper{display:-ms-flexbox;display:flex}.dropdown-item{min-height:44px;-ms-flex:1 1 100%;flex:1 1 100%;padding:var(--tct-dropdown-item-padding, 2px)}.dropdown-item-content{padding:12px var(--tct-scale-3, var(--app-scale-3, 15px));text-align:left;background-color:var(--tct-dropdown-item-bg, var(--tct-white, var(--app-white, #ffffff)));color:var(--tct-dropdown-item-font-color, inherit);-webkit-transition:background-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));transition:background-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));overflow:hidden;text-overflow:ellipsis}:host(:not([disabled])) .dropdown-item-content:hover,:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content{background-color:var(\n        --tct-dropdown-item-selected-bg,\n        var(--tct-gray-14, var(--app-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))\n    );color:var(--tct-dropdown-item-selected-font-color, inherit)}.remove-dropdown-item{-ms-flex:0 0 44px;flex:0 0 44px;margin:2px}";
 
 const Q2DropdownItem = class {
     constructor(hostRef) {

package/dist/esm/q2-dropdown.entry.js

@@ -153,7 +153,7 @@ const Q2Dropdown = class {
                         onClickFn = () => this.navigateTo(menuItemData.featureName, menuItemData.moduleName);
                         break;
                     case 'showOverpanel':
-                        onClickFn = () => this.navigateToOverpanel(menuItemData.featureName, menuItemData.moduleName);
+                        onClickFn = () => this.showOverpanel(`${menuItemData.featureName}.${menuItemData.moduleName}`);
                         break;
                 }
                 const newDropdownItem = document.createElement('q2-dropdown-item');
@@ -168,9 +168,9 @@ const Q2Dropdown = class {
     navigateTo(featureName, moduleName) {
         return window.TectonElements && window.TectonElements.navigateTo(featureName, moduleName);
     }
-    navigateToOverpanel(featureName, moduleName) {
+    showOverpanel(overpanelPath) {
         return (window.TectonElements &&
-            window.TectonElements.navigateToOverpanel(featureName, moduleName));
+            window.TectonElements.showOverpanel(overpanelPath, undefined, undefined, true));
     }
     get toggleButtonProps() {
         const allowedTypes = ['icon', 'fab', 'primary', 'secondary', 'custom'];