q2-tecton-elements 1.14.2 → 1.15.1-alpha.0

package/dist/collection/components/q2-message/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 {
@@ -73,10 +73,11 @@ button {
 }
 
 .message {
-  border-left-width: var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1, 5px)));
+  border-left-width: var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));
   border-left-style: solid;
+  --comp-line-height: var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));
   display: grid;
-  gap: var(--tct-scale-1, var(--app-scale-1, 5px));
+  gap: var(--tct-scale-1, var(--app-scale-1x, 5px));
   align-items: flex-start;
   background: var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));
   color: var(--tct-message-font-color, var(--t-message-font-color, inherit));
@@ -88,47 +89,48 @@ button {
 }
 
 .message-icon {
-  width: 24px;
+  --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);
+  --tct-icon-size: var(--comp-icon-size);
+  top: var(--comp-top-offset);
+  margin-bottom: calc(var(--comp-top-offset) * -1);
 }
 
 .message-content {
   flex: 1;
+  line-height: var(--comp-line-height);
 }
 
 ::slotted(ul) {
-  padding-left: var(--tct-scale-l3, var(--app-scale-3, 15px));
+  padding-left: var(--tct-scale-l3, var(--app-scale-3x, 15px));
 }
 
 :host(:not([appearance])),
 :host([appearance=standard]) {
-  margin: var(--tct-scale-l3, var(--app-scale-3, 15px)) 0;
+  margin: var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0;
 }
 :host(:not([appearance])) .message,
 :host([appearance=standard]) .message {
-  grid-template-columns: 24px 1fr;
-  --comp-padding: var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3, 15px)));
+  --comp-icon-size: var(--tct-message-icon-size, var(--t-message-icon-size, 24px));
+  --comp-padding: var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));
+  grid-template-columns: var(--comp-icon-size) 1fr;
   padding: var(--comp-padding);
-  padding-top: calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1, 5px)));
-  padding-left: calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2, 10px)));
-}
-:host(:not([appearance])) .message-content,
-:host([appearance=standard]) .message-content {
-  padding-top: var(--tct-scale-1, var(--app-scale-1, 5px));
+  padding-left: calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));
+  padding-bottom: calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)));
 }
 :host(:not([appearance])) ::slotted(ul),
 :host([appearance=standard]) ::slotted(ul) {
-  margin: var(--tct-scale-l3, var(--app-scale-3, 15px)) 0;
+  margin: var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0;
 }
 
 :host([appearance=minimal]) {
   margin: 0;
 }
 :host([appearance=minimal]) .message {
-  padding: var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2, 10px)));
+  padding: var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));
   grid-template-columns: 1fr;
 }
 :host([appearance=minimal]) ::slotted(ul) {
-  margin: var(--tct-scale-1, var(--app-scale-1, 5px)) 0;
+  margin: var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;
 }
 
 :host(:not([type])) .message,

package/dist/collection/components/q2-optgroup/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 {
@@ -69,16 +69,12 @@ button {
 }
 
 .q2-optgroup-header {
-  background-color: var(--tct-optgroup-header-bg, var(--tct-gray-13, var(--t-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));
-  font-weight: var(--tct-optgroup-header-font-weight, 600);
-  text-transform: var(--tct-optgroup-header-text-transform, uppercase);
-  /*
-  position: -webkit-sticky;
+  --comp-header-padding: var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));
+  background: var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6))))));
+  padding: var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));
+  font-weight: var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));
+  text-transform: var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));
   position: sticky;
-  top: 0;
+  top: var(--comp-multi-select-header-height, 0);
   z-index: 1;
-
-  temp removal, will fix with TCT-804
-  */
 }

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

@@ -1,10 +1,18 @@
-import { Component, Prop, h, Element, Host } from '@stencil/core';
+import { Component, Prop, h, Element, Host, Watch } from '@stencil/core';
 export class Q2Option {
   constructor() {
     this.role = 'option';
     this.tabindex = '-1';
     this._multiSelectHidden = false;
   }
+  componentWillLoad() {
+    this.handleDisplay();
+  }
+  handleDisplay() {
+    if (this.display || this.multiline)
+      return;
+    this.display = this.hostElement.textContent.trim();
+  }
   render() {
     const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
     const isDisabled = disabled || disabledGroup;
@@ -60,7 +68,7 @@ export class Q2Option {
     },
     "display": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -73,7 +81,7 @@ export class Q2Option {
         "text": ""
       },
       "attribute": "display",
-      "reflect": true
+      "reflect": false
     },
     "value": {
       "type": "string",
@@ -248,4 +256,8 @@ export class Q2Option {
     }
   }; }
   static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "display",
+      "methodName": "handleDisplay"
+    }]; }
 }

package/dist/collection/components/q2-option/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 {
@@ -65,14 +65,21 @@ button {
 }
 
 :host {
-  padding: 0 var(--tct-scale-2, var(--app-scale-2, 10px));
+  --comp-padding: 0 var(--app-scale-2x, 10px);
+  --comp-selected-icon-size: var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));
+  padding: var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));
   min-height: 44px;
   align-items: center;
   cursor: pointer;
-  grid-template-columns: var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px))) 1fr;
+  grid-template-columns: var(--comp-selected-icon-size) 1fr;
   align-items: center;
   grid-template-areas: "icon content";
-  gap: var(--tct-scale-1, var(--app-scale-1, 5px));
+  gap: var(--tct-scale-1, var(--app-scale-1x, 5px));
+}
+
+:host([multiline]) {
+  --comp-padding: var(--app-scale-2, 10px) var(--app-scale-2, 10px);
+  --comp-selected-icon-size: var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px));
 }
 
 :host([_no-select]) {
@@ -102,7 +109,7 @@ button {
 
 q2-icon {
   grid-area: icon;
-  --tct-icon-size: var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px)));
+  --tct-icon-size: var(--comp-selected-icon-size);
 }
 
 .content {

package/dist/collection/components/q2-option-list/index.js

@@ -306,21 +306,21 @@ export class Q2OptionList {
     event.stopPropagation();
   }
   /// Public Methods ///
-  toggle() {
+  async toggle() {
     const isOpen = !this.open;
     this.open = isOpen;
   }
-  setDefaultActiveElement() {
+  async setDefaultActiveElement() {
     this.activeIndex = this.getDefaultActiveIndex();
     this.setActiveOption();
     this.setFocusedOption();
   }
-  setActiveElement(index) {
+  async setActiveElement(index) {
     this.activeIndex = index;
     this.setActiveOption();
     this.setFocusedOption();
   }
-  handleExternalKeydown(event) {
+  async handleExternalKeydown(event) {
     const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End'];
     if (keysThatTriggerOpen.includes(event.key)) {
       this.open = true;
@@ -569,7 +569,11 @@ export class Q2OptionList {
       "complexType": {
         "signature": "() => Promise<void>",
         "parameters": [],
-        "references": {},
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
         "return": "Promise<void>"
       },
       "docs": {
@@ -581,7 +585,11 @@ export class Q2OptionList {
       "complexType": {
         "signature": "() => Promise<void>",
         "parameters": [],
-        "references": {},
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
         "return": "Promise<void>"
       },
       "docs": {
@@ -596,7 +604,11 @@ export class Q2OptionList {
             "tags": [],
             "text": ""
           }],
-        "references": {},
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
         "return": "Promise<void>"
       },
       "docs": {
@@ -612,6 +624,9 @@ export class Q2OptionList {
             "text": ""
           }],
         "references": {
+          "Promise": {
+            "location": "global"
+          },
           "KeyboardEvent": {
             "location": "global"
           }

package/dist/collection/components/q2-option-list/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 {
@@ -76,15 +76,15 @@ button {
   height: 0;
   opacity: 0;
   visibility: hidden;
-  background-color: var(--app-white);
-  color: var(--t-font-color);
+  background-color: var(--app-white, #ffffff);
+  color: var(--t-text, #4d4d4d);
   z-index: 100;
   width: max-content;
   min-width: var(--tct-option-list-min-width, var(--t-option-list-min-width, 135px));
-  box-shadow: var(--app-shadow-1);
+  box-shadow: var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));
   overflow: hidden;
   text-align: start;
-  transition: opacity var(--app-tween-1);
+  transition: opacity var(--app-tween-1, 0.2s ease);
   border-radius: var(--tct-option-list-border-radius, var(--t-option-list-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)));

package/dist/collection/components/q2-pagination/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-pill/index.js

@@ -93,6 +93,13 @@ export class Q2Pill {
       return selectedOptions[0].display;
     return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });
   }
+  get truncatedButtonContent() {
+    const { maxLength, buttonContent } = this;
+    if (maxLength)
+      return buttonContent.length > maxLength ? `${buttonContent.substring(0, maxLength)}…` : buttonContent;
+    else
+      return buttonContent;
+  }
   /// Listeners ///
   delegateFocus(event) {
     if (!isEventFromElement(event, this.hostElement))
@@ -123,8 +130,8 @@ export class Q2Pill {
     return (h(Fragment, null,
       h("div", { class: wrapperClassNames.join(' ') },
         h("div", { class: "btn-height-wrapper", onClick: this.handleWrapperClick, tabIndex: -1 },
-          h("button", { class: "btn-primary", type: "button", "test-id": "btn-control", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, onFocusout: this.handleFocusout, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": hasOptions && open ? 'true' : 'false' },
-            this.buttonContent,
+          h("button", { class: "btn-primary", type: "button", "test-id": "btn-control", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, onFocusout: this.handleFocusout, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": (hasOptions && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent },
+            this.truncatedButtonContent,
             !hasOptions && active && h("span", { class: "sr" },
               "(",
               loc('tecton.element.pill.active'),
@@ -210,6 +217,23 @@ export class Q2Pill {
       "attribute": "multiple",
       "reflect": true
     },
+    "maxLength": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max-length",
+      "reflect": true
+    },
     "label": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/q2-pill/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 {
@@ -82,6 +82,7 @@ button {
   --compt-hover-btn-background: var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));
   --comp-btn-padding: var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));
   --comp-btn-color: var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));
+  --comp-active-btn-color: var(--comp-btn-background);
   --comp-active-btn-background: var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));
   --comp-active-btn-border-color: var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));
   --comp-hover-active-btn-background: var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));
@@ -96,24 +97,24 @@ button {
 }
 :host([theme=primary]) .btn-wrapper {
   --comp-active-btn-background: var(--t-primary-l5, #61c4ff);
-  --comp-btn-color: var(--t-primary-text, #ffffff);
+  --comp-active-btn-color: var(--t-primary-text, #ffffff);
   --comp-active-btn-border-color: var(--t-primary-l5, #61c4ff);
   --comp-hover-active-btn-background: var(--t-primary-l3, #21acff);
   --comp-hover-active-btn-border-color: var(--t-primary-l3, #21acff);
 }
 :host([theme=secondary]) .btn-wrapper {
-  --comp-active-btn-background: var(--t-secondary-l5, #61c4ff);
-  --comp-btn-color: var(--t-secondary-text, #000000);
-  --comp-active-btn-border-color: var(--t-secondary-l5, #61c4ff);
-  --comp-hover-active-btn-background: var(--t-secondary-l3, #21acff);
-  --comp-hover-active-btn-border-color: var(--t-secondary-l3, #21acff);
+  --comp-active-btn-background: var(--t-secondary-l5, #d9e1e6);
+  --comp-active-btn-color: var(--t-secondary-text, #141414);
+  --comp-active-btn-border-color: var(--t-secondary-l5, #d9e1e6);
+  --comp-hover-active-btn-background: var(--t-secondary-l3, #c9d5db);
+  --comp-hover-active-btn-border-color: var(--t-secondary-l3, #c9d5db);
 }
 :host([theme=tertiary]) .btn-wrapper {
-  --comp-active-btn-background: var(--t-tertiary-l5, #61c4ff);
-  --comp-btn-color: var(--t-tertiary-text, #000000);
-  --comp-active-btn-border-color: var(--t-tertiary-l5, #61c4ff);
-  --comp-hover-active-btn-background: var(--t-tertiary-l3, #21acff);
-  --comp-hover-active-btn-border-color: var(--t-tertiary-l3, #21acff);
+  --comp-active-btn-background: var(--t-tertiary-l5, #f4fafe);
+  --comp-active-btn-color: var(--t-tertiary-text, #141414);
+  --comp-active-btn-border-color: var(--t-tertiary-l5, #f4fafe);
+  --comp-hover-active-btn-background: var(--t-tertiary-l3, #eff8fd);
+  --comp-hover-active-btn-border-color: var(--t-tertiary-l3, #eff8fd);
 }
 
 q2-option-list {
@@ -167,9 +168,7 @@ q2-option-list {
   background: var(--comp-hover-btn-background);
 }
 :host(:not(:empty)) .btn-primary, .has-icon .btn-primary {
-  padding-right: calc(
-            var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-size-1x, 5px))) + var(--comp-close-size)
-        );
+  padding-right: calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size));
 }
 .has-options .btn-primary {
   text-overflow: ellipsis;
@@ -180,6 +179,7 @@ q2-option-list {
 :host([active]) .btn-primary {
   background: var(--comp-active-btn-background);
   border-color: var(--comp-active-btn-border-color);
+  color: var(--comp-active-btn-color);
 }
 :host([active]) .btn-primary:focus, :host([active]) .btn-primary:hover {
   background: var(--comp-hover-active-btn-background);
@@ -202,8 +202,9 @@ q2-option-list {
   top: 50%;
   transform: translateY(-50%);
   opacity: 0;
-  stroke: var(--comp-btn-color);
-  --tct-icon-stroke-primary: var(--comp-btn-color);
+}
+:host([active]) .btn-close {
+  color: var(--comp-active-btn-color);
 }
 :host(:not(:empty)) .btn-close, .has-icon .btn-close {
   opacity: 1;

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

@@ -27,6 +27,7 @@ export class Q2Radio {
   componentDidLoad() {
     this.isLoaded = true;
     overrideFocus(this.hostElement);
+    this.hostElement.click = () => this.inputField.click();
   }
   ////////// OBSERVERS //////////
   ariaLabelObserver() {

package/dist/collection/components/q2-radio/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 {
@@ -80,7 +80,7 @@ button {
   margin-right: 1rem;
   display: grid;
   grid-template-columns: 18px 1fr;
-  gap: var(--tct-scale-1, var(--app-scale-1, 5px));
+  gap: var(--tct-scale-1, var(--app-scale-1x, 5px));
 }
 .radio-container svg {
   border-radius: 50%;

package/dist/collection/components/q2-radio-group/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 {
@@ -65,7 +65,7 @@ button {
 }
 
 :host {
-  margin-top: var(--tct-scale-2, var(--app-scale-2, 10px));
+  margin-top: var(--tct-scale-2, var(--app-scale-2x, 10px));
 }
 
 fieldset {
@@ -92,7 +92,7 @@ fieldset {
 }
 
 .optional-tag {
-  margin-left: var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px))));
+  margin-left: var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px))));
   color: var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));
   font-size: var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, 12px));
   font-weight: var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400));

package/dist/collection/components/q2-section/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,17 +79,17 @@ button {
   background-color: var(--tct-section-bg, var(--t-section-bg, var(--tct-white, var(--app-white, #ffffff))));
   color: var(--tct-section-font-color, var(--t-section-font-color, #2e2e2e));
   border-radius: var(--tct-section-border-radius, var(--t-section-border-radius, 3px));
-  margin: var(--tct-scale-3, var(--app-scale-3, 15px));
+  margin: var(--tct-scale-3, var(--app-scale-3x, 15px));
 }
 
 @media screen and (max-width: 767px) {
   :host {
-    margin: var(--tct-scale-3, var(--app-scale-3, 15px)) 0;
+    margin: var(--tct-scale-3, var(--app-scale-3x, 15px)) 0;
   }
 }
 .q2-section-wrapper {
   display: block;
-  padding: var(--tct-scale-1, var(--app-scale-1, 5px)) 0;
+  padding: var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;
 }
 
 .q2-section-wrapper:hover {
@@ -97,7 +97,7 @@ button {
 }
 
 .q2-section-header {
-  padding: 0 var(--tct-scale-3, var(--app-scale-3, 15px));
+  padding: 0 var(--tct-scale-3, var(--app-scale-3x, 15px));
   display: flex;
 }
 
@@ -137,7 +137,7 @@ button {
 }
 
 .q2-section-content {
-  padding: var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-3, var(--app-scale-3, 15px));
+  padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-3, var(--app-scale-3x, 15px));
 }
 
 .q2-section-content:focus {