q2-tecton-elements 1.15.1 → 1.16.0

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 
 :host {
@@ -67,18 +67,18 @@ button {
 .q2-element-dropdown {
   display: none;
   position: absolute;
-  background-color: var(--app-white);
-  color: var(--t-font-color);
+  background-color: var(--app-white, #ffffff);
+  color: var(--t-text, #4d4d4d);
   left: 0;
   width: 100%;
   z-index: 100;
   margin-top: 1px;
-  box-shadow: var(--app-shadow-1);
+  box-shadow: var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));
   height: 0;
   overflow: hidden;
   opacity: 0;
   visibility: hidden;
-  transition: opacity var(--app-tween-1);
+  transition: opacity var(--app-tween-1, 0.2s ease);
   border-radius: var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);
   --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)));
@@ -136,14 +136,21 @@ button {
 
 .q2-select-input {
   margin: 0;
+  --tct-input-min-height: var(--tct-select-input-min-height, var(--t-select-input-min-height));
+  --tct-input-max-height: var(--tct-select-input-max-height, var(--t-select-input-max-height, 100px));
+}
+
+::slotted([slot=_selected-display]) {
+  width: 100%;
+  min-height: var(--comp-selected-display-height, 44px);
 }
 
 .custom-display-content {
   position: absolute;
   bottom: 0;
-  left: calc(var(--tct-scale-2, var(--app-scale-2, 10px)) + 1px);
+  left: calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);
   height: 44px;
-  width: calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3, 15px)));
+  width: calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));
   overflow: hidden;
   cursor: pointer;
   transition: left var(--tct-tween-2, var(--app-tween-1, 0.2s ease));
@@ -156,11 +163,11 @@ button {
 
 .is-searchable.is-focused .custom-display-content,
 .is-searchable .custom-display-content:active {
-  left: calc(var(--tct-scale-3, var(--app-scale-3, 15px)) + 1px);
+  left: calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px);
 }
 
 .has-error .custom-display-content {
-  width: calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3, 15px)));
+  width: calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)));
 }
 
 .dropdown-open .q2-select-dropdown {
@@ -169,14 +176,18 @@ button {
 }
 
 .multi-select-header {
-  padding: var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-2, var(--app-scale-2, 10px));
+  padding: var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  background: var(--app-white);
 }
 
 .show-all-options {
-  margin-right: var(--tct-scale-1, var(--app-scale-1, 5px));
-  margin-left: var(--tct-scale-2, var(--app-scale-2, 10px));
+  margin-right: var(--tct-scale-1, var(--app-scale-1x, 5px));
+  margin-left: var(--tct-scale-2, var(--app-scale-2x, 10px));
 }
 
 .q2-element-dropdown.dropup {
-  bottom: 40px;
+  bottom: var(--comp-dropup-offset);
 }

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 
 :host {
@@ -75,7 +75,7 @@ ul {
   --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)));
+  --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));
@@ -140,13 +140,13 @@ li {
   padding: 0;
   transition-property: box-shadow;
   outline: none;
-  --comp-active-color: var(--t-primary);
+  --comp-active-color: var(--t-primary, #0079c1);
 }
 .step-btn.status-complete {
-  --comp-active-color: var(--const-stoplight-success);
+  --comp-active-color: var(--const-stoplight-success, #0e8a00);
 }
 .step-btn.status-error {
-  --comp-active-color: var(--const-stoplight-alert);
+  --comp-active-color: var(--const-stoplight-alert, #c30000);
 }
 .step-btn[aria-disabled] {
   cursor: not-allowed;
@@ -156,7 +156,8 @@ li {
   --comp-bullet-bg: var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9)));
 }
 
-.step-icon, .step-bubble {
+.step-icon,
+.step-bubble {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -172,18 +173,23 @@ li {
   border-radius: 50%;
   position: relative;
 }
-.step-icon q2-icon, .step-bubble q2-icon {
+.step-icon q2-icon,
+.step-bubble q2-icon {
   fill: var(--comp-active-color);
   --tct-icon-stroke-primary: var(--comp-active-color);
-  --tct-icon-stroke-secondary: var(--t-base);
+  --tct-icon-stroke-secondary: var(--t-base, #ffffff);
 }
-.status-complete .step-icon, .status-error .step-icon, .status-complete .step-bubble, .status-error .step-bubble {
+.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 {
+[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 {
+[aria-selected] .step-icon:before,
+[aria-selected] .step-bubble:before {
   content: "";
   position: absolute;
   inset: calc(var(--comp-bullet-border-offset) * -1);
@@ -252,12 +258,12 @@ hr {
 }
 
 .gradient-left {
-  background-image: linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);
+  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), var(--t-base-a2) 10%, var(--t-base) 100%);
+  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;
 }
 

package/dist/collection/components/q2-stepper-pane/styles.css

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 
 :host {

package/dist/collection/components/q2-stepper-vertical/index.js

@@ -173,6 +173,7 @@ export class Q2AdvancedStepper {
         spacer.addEventListener('transitionend', () => {
           spacer.classList.remove('is-opening');
           spacer.classList.add('is-open');
+          this.resizeIframe();
         }, { once: true });
       }
       else {

package/dist/collection/components/q2-stepper-vertical/styles.css

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 
 :host {
@@ -158,20 +158,20 @@ ul ul[aria-hidden=true] {
 .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(--t-primary);
+  --comp-active-color: var(--t-primary, #0079c1);
 }
 .step-btn.status-complete {
-  --comp-active-color: var(--const-stoplight-success);
+  --comp-active-color: var(--const-stoplight-success, #0e8a00);
 }
 .step-btn.status-error {
-  --comp-active-color: var(--const-stoplight-alert);
+  --comp-active-color: var(--const-stoplight-alert, #c30000);
 }
 .step-btn.status-locked {
   cursor: not-allowed;
 }
 
 .step-child-btn {
-  --comp-active-color: var(--t-primary);
+  --comp-active-color: var(--t-primary, #0079c1);
   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));
@@ -184,8 +184,8 @@ ul ul[aria-hidden=true] {
   border-left-color: var(--comp-active-color);
 }
 .step-child-btn.status-error {
-  --comp-btn-label-color: var(--const-stoplight-alert);
-  --comp-active-color: var(--const-stoplight-alert);
+  --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;
@@ -212,8 +212,8 @@ ul ul[aria-hidden=true] {
 
 .step-icon,
 .step-bubble {
-  background: var(--t-primary);
-  color: var(--t-base);
+  background: var(--t-primary, #0079c1);
+  color: var(--t-base, #ffffff);
   border-radius: 50%;
 }
 .status-complete .step-icon, .status-error .step-icon,
@@ -223,16 +223,16 @@ ul ul[aria-hidden=true] {
 }
 .step-icon q2-icon,
 .step-bubble q2-icon {
-  --tct-icon-stroke-secondary: var(--t-base);
+  --tct-icon-stroke-secondary: var(--t-base, #ffffff);
 }
 .status-locked .step-icon,
 .status-locked .step-bubble {
-  background: var(--t-gray-12);
-  color: var(--t-text);
+  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), 0 0 0 4px var(--comp-active-color);
+  box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);
 }
 
 .step-bubble {
@@ -248,7 +248,7 @@ ul ul[aria-hidden=true] {
 }
 [aria-selected=true] .step-child-icon q2-icon {
   fill: var(--comp-active-color);
-  --tct-icon-stroke-secondary: var(--t-base);
+  --tct-icon-stroke-secondary: var(--t-base, #ffffff);
 }
 
 .spacer {

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 
 :host {
@@ -79,10 +79,10 @@ button {
 }
 
 ul {
-  --comp-container-padding: var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px)) 0;
+  --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)));
   display: flex;
-  gap: var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1, 5px))));
+  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;
@@ -118,14 +118,14 @@ li button {
   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-2, 10px))));
+  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-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));
+  --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)));
 }
@@ -149,14 +149,14 @@ li button[aria-selected=true] {
 }
 @media screen and (max-width: 767px) {
   li button {
-    --comp-tab-padding: var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));
+    --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-2, 10px)) 0;
+  --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 {

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 
 :host {

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 
 :host {
@@ -84,11 +84,11 @@ button {
   --comp-tag-color: var(--t-primary-text, #ffffff);
 }
 :host([theme=secondary]) .tag-wrapper {
-  --comp-tag-background: var(--t-secondary-l5, #61c4ff);
+  --comp-tag-background: var(--t-secondary-l5, #d9e1e6);
   --comp-tag-color: var(--t-secondary-text, #000000);
 }
 :host([theme=tertiary]) .tag-wrapper {
-  --comp-tag-background: var(--t-tertiary-l5, #61c4ff);
+  --comp-tag-background: var(--t-tertiary-l5, #f4fafe);
   --comp-tag-color: var(--t-tertiary-text, #000000);
 }
 
@@ -106,9 +106,7 @@ button {
 
 .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-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);
   height: var(--comp-tag-clickable-size);
   width: var(--comp-tag-clickable-size);
   display: flex;

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

@@ -8,7 +8,7 @@
 
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 
 :host {
@@ -137,7 +137,7 @@ textarea {
   box-sizing: border-box;
   min-height: var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));
   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))));
-  background-color: var(--tct-textarea-bg, var(--t-textarea-bg, var(--t-input-bg, var(--tct-gray-14, var(--app-gray-14, #f2f2f2)))));
+  background-color: var(--tct-textarea-bg, var(--t-textarea-bg, 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;

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

@@ -0,0 +1,120 @@
+import { Component, Prop, h, Element, Fragment } from '@stencil/core';
+export class Q2Tooltip {
+  constructor() {
+    this.position = 'n';
+  }
+  render() {
+    const classList = ['q2-tooltip-container', 'tooltipped'];
+    classList.push(`tooltipped-${this.position}`);
+    if (this.block) {
+      classList.push('block');
+      this.hostElement.style.display = 'block';
+    }
+    if (this.multiline) {
+      classList.push('tooltipped-multiline');
+    }
+    if (this.persistent) {
+      classList.push('persistent');
+    }
+    return this.label ? (h(Fragment, null,
+      h("div", { class: classList.join(' '), "aria-label": this.label },
+        h("slot", null)))) : (h("slot", null));
+  }
+  static get is() { return "q2-tooltip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": true
+    },
+    "block": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "block",
+      "reflect": true
+    },
+    "multiline": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "multiline",
+      "reflect": true
+    },
+    "persistent": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "persistent",
+      "reflect": true
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se'",
+        "resolved": "\"e\" | \"n\" | \"ne\" | \"nw\" | \"s\" | \"se\" | \"sw\" | \"w\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "position",
+      "reflect": true,
+      "defaultValue": "'n'"
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}