q2-tecton-elements 1.15.1 → 1.16.2

package/dist/collection/components/q2-btn/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 {
@@ -81,10 +81,8 @@ button {
   --comp-btn-primary-bg: var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e));
   --comp-btn-primary-font-color: var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));
   --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-  --comp-btn-fallback-hover-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19),
-      0 3px 3px rgba(0, 0, 0, 0.23);
-  --comp-btn-neutral-fallback-hover-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.24),
-      0 3px 3px rgba(0, 0, 0, 0.36);
+  --comp-btn-fallback-hover-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23);
+  --comp-btn-neutral-fallback-hover-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.36);
   --comp-btn-primary-box-shadow: var(--tct-btn-primary-box-shadow, var(--t-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow)));
   --comp-btn-primary-hover-box-shadow: var(--tct-btn-primary-hover-box-shadow, var(--t-btn-primary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow)));
   --comp-btn-secondary-bg: var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc));
@@ -99,8 +97,8 @@ button {
 }
 
 button {
-  margin: var(--tct-scale-0, var(--app-scale-0, 0));
-  padding: var(--tct-scale-0, var(--app-scale-0, 0));
+  margin: var(--tct-scale-0, var(--app-scale-0x, 0));
+  padding: var(--tct-scale-0, var(--app-scale-0x, 0));
   display: inline-block;
   width: 100%;
   border: 0;
@@ -119,16 +117,16 @@ button:disabled {
   cursor: not-allowed;
 }
 :host([size="1"]) button {
-  padding: var(--tct-scale-1, var(--app-scale-1, 5px));
+  padding: var(--tct-scale-1, var(--app-scale-1x, 5px));
 }
 :host([color]:not([size])) button, :host([intent]:not([size])) button {
-  padding: var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));
+  padding: var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));
 }
 :host([size="2"]) button {
-  padding: var(--tct-scale-2, var(--app-scale-2, 10px));
+  padding: var(--tct-scale-2, var(--app-scale-2x, 10px));
 }
 :host([size="3"]) button {
-  padding: var(--tct-scale-3, var(--app-scale-3, 15px));
+  padding: var(--tct-scale-3, var(--app-scale-3x, 15px));
 }
 :host([size="4x"]) button {
   padding: var(--tct-scale-4x, var(--app-scale-4x, 20px));
@@ -258,7 +256,7 @@ div {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--app-scale-1, 5px);
+  gap: var(--app-scale-1x, 5px);
 }
 :host([loading]) .icon-right div {
   flex-direction: row-reverse;

package/dist/collection/components/q2-calendar/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)));
@@ -156,7 +156,7 @@ q2-input {
   flex: 1 1;
   flex-basis: calc(100% - var(--tct-btn-icon-width, 44px));
   margin: 0;
-  padding: var(--tct-calendar-label-vertical-padding, var(--t-calendar-label-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px)))) 0;
+  padding: var(--tct-calendar-label-vertical-padding, var(--t-calendar-label-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0;
 }
 
 .calendar-hint {
@@ -228,6 +228,6 @@ td[aria-selected] {
 .calendar-disclaimer {
   font-size: var(--tct-calendar-disclaimer-font-size, var(--t-calendar-disclaimer-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));
   border-top: 1px solid var(--tct-calendar-disclaimer-border-color, var(--t-calendar-disclaimer-border-color, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #e6e6e6))))));
-  padding: var(--tct-calendar-disclaimer-padding, var(--tct-scale-2, var(--app-scale-2, 10px)));
+  padding: var(--tct-calendar-disclaimer-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)));
   text-align: left;
 }

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

@@ -70,6 +70,8 @@ export class Q2Card {
   }
   determineAutoSmall() {
     var _a, _b;
+    if (this.isStatic)
+      return;
     if (this.hostElement.hasAttribute('is-small'))
       return;
     const { containerElement, avatarElement } = this;
@@ -91,28 +93,34 @@ export class Q2Card {
     return (h(Fragment, null,
       this.bar && (h("div", { class: "bar", "test-id": "bar", style: { '--comp-bar-color': this.barColor } })),
       this.generateAvatar(),
-      h("div", { class: "container", "test-id": "contentContainer", ref: e => (this.containerElement = e) },
+      h("div", { class: "content", "test-id": "contentContainer", ref: e => (this.containerElement = e) },
         this.title && h("h3", { "test-id": "title" }, this.title),
-        this.description && h("p", { "test-id": "description" }, this.description)),
-      this.isTouch && (h("q2-icon", { "test-id": "touchIndicator", type: "chevron-right", class: "touch-indicator" }))));
+        this.description && h("p", { "test-id": "description" }, this.description),
+        h("slot", null)),
+      this.isTouch && !this.isStatic && (h("q2-icon", { "test-id": "touchIndicator", type: "chevron-right", class: "touch-indicator" }))));
   }
   generateContainerClasses() {
-    const { isSmall, isAutoSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isTouch, isAutoTouch } = this;
-    const result = [];
+    const { isSmall, isAutoSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isTouch, isAutoTouch, isStatic, } = this;
+    const result = ['container'];
     const showSmall = isSmall || isAutoSmall;
     const showTouch = isTouch || isAutoTouch;
     const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;
     if (showSmall)
       result.push('is-small');
-    if (showTouch)
+    if (showTouch && !isStatic)
       result.push('is-touch');
     if (hasAvatar)
       result.push('has-avatar');
     return result.join(' ');
   }
   render() {
-    const { url } = this;
-    return !!url ? (h("a", { ref: e => (this.clickableElement = e), href: this.url, class: this.generateContainerClasses(), target: this.target, rel: "noopener noreferrer", "test-id": "clickableElement", onClick: this.handleClick }, this.generateContent())) : (h("button", { ref: e => (this.clickableElement = e), class: this.generateContainerClasses(), "test-id": "clickableElement", type: "button", onClick: this.handleClick }, this.generateContent()));
+    const { url, isStatic } = this;
+    if (!!url)
+      return (h("a", { ref: e => (this.clickableElement = e), href: this.url, class: this.generateContainerClasses(), target: this.target, rel: "noopener noreferrer", "test-id": "clickableElement", onClick: this.handleClick }, this.generateContent()));
+    else if (isStatic)
+      return (h("div", { ref: e => (this.clickableElement = e), class: this.generateContainerClasses(), "test-id": "clickableElement" }, this.generateContent()));
+    else
+      return (h("button", { ref: e => (this.clickableElement = e), class: this.generateContainerClasses(), "test-id": "clickableElement", type: "button", onClick: this.handleClick }, this.generateContent()));
   }
   static get is() { return "q2-card"; }
   static get encapsulation() { return "shadow"; }
@@ -259,6 +267,23 @@ export class Q2Card {
       "attribute": "bar",
       "reflect": true
     },
+    "isStatic": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-static",
+      "reflect": true
+    },
     "isTouch": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/q2-card/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 {
@@ -68,22 +68,39 @@ button {
   display: block;
 }
 
-button,
-a {
-  --comp-border-radius: var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 3px)));
-  --comp-border-width: var(--tct-card-border-width, var(--t-card-border-width, 0px));
+.container {
   position: relative;
   width: 100%;
   text-align: start;
-  cursor: pointer;
   height: 100%;
   display: grid;
   gap: var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));
   margin: 0;
+  color: var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));
+  --comp-avatar-size: var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));
+  --comp-chevron-size: 0;
+  --comp-bar-width: var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));
+  --comp-card-padding: var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)));
+}
+.container.is-small {
+  --comp-avatar-size: var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px));
+}
+.container.has-avatar {
+  grid-template-columns: var(--comp-avatar-size) 1fr;
+  --tct-avatar-width: var(--comp-avatar-size);
+  --tct-avatar-height: var(--comp-avatar-size);
+  --tct-icon-size: var(--comp-avatar-size);
+}
+:host([bar][is-static]) .container {
+  padding-left: var(--comp-card-padding);
+}
+.container:is(button), .container:is(a) {
+  --comp-border-radius: var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 3px)));
+  --comp-border-width: var(--tct-card-border-width, var(--t-card-border-width, 0px));
+  cursor: pointer;
   border: none;
   background: var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));
-  padding: var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)));
-  color: var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));
+  padding: var(--comp-card-padding);
   text-decoration: none;
   border-width: var(--comp-border-width);
   border-color: var(--tct-card-border-color, var(--t-card-border-color, transparent));
@@ -91,50 +108,30 @@ a {
   border-radius: var(--comp-border-radius);
   transition: box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
   box-shadow: var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))));
-  --comp-avatar-size: var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));
-  --comp-chevron-size: 0;
 }
 @media (hover: hover) {
-  button:hover, button:active, button:focus,
-a:hover,
-a:active,
-a:focus {
+  .container:is(button):hover, .container:is(button):active, .container:is(button):focus, .container:is(a):hover, .container:is(a):active, .container:is(a):focus {
     color: var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));
   }
-  button:hover,
-a:hover {
+  .container:is(button):hover, .container:is(a):hover {
     box-shadow: var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0 4px 12px rgba(0, 0, 0, 0.3))));
   }
-  button:active,
-a:active {
+  .container:is(button):active, .container:is(a):active {
     box-shadow: var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));
   }
 }
-button.is-small,
-a.is-small {
-  --comp-avatar-size: var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px));
-}
-button.is-touch,
-a.is-touch {
+.container:is(button).is-touch, .container:is(a).is-touch {
   --comp-chevron-size: var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));
   grid-template-columns: 1fr var(--comp-chevron-size);
 }
-button.has-avatar,
-a.has-avatar {
-  grid-template-columns: var(--comp-avatar-size) 1fr;
-  --tct-avatar-width: var(--comp-avatar-size);
-  --tct-avatar-height: var(--comp-avatar-size);
-  --tct-icon-size: var(--comp-avatar-size);
-}
-button.has-avatar.is-touch,
-a.has-avatar.is-touch {
+.container:is(button).has-avatar.is-touch, .container:is(a).has-avatar.is-touch {
   grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);
 }
 
-.container {
+.content {
   overflow: hidden;
   display: grid;
-  gap: var(--tct-card-container-gap, var(--t-card-container-gap, var(--app-scale-1x, 5px)));
+  gap: var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));
   align-content: start;
 }
 
@@ -166,7 +163,7 @@ p {
   border-radius: var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);
   position: absolute;
   inset: 0 auto auto 0;
-  width: var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));
+  width: var(--comp-bar-width);
   background: var(--comp-bar-color);
   height: 100%;
 }

package/dist/collection/components/q2-carousel/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-carousel-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-chart-donut/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 {
@@ -101,7 +101,7 @@ button {
 }
 
 button {
-  --comp-button-vertical-padding: var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1, 5px)));
+  --comp-button-vertical-padding: var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1x, 5px)));
   transition: box-shadow var(--tct-chart-donut-button-tween, var(--t-chart-donut-button-tween, var(--app-tween-1, 0.2s ease)));
   padding: var(--comp-button-vertical-padding) 0;
 }
@@ -119,6 +119,7 @@ button:focus {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
+  padding: var(--tct-chart-donut-button-container-padding, var(--t-chart-donut-button-container-padding, var(--app-scale-1x, 5px)));
 }
 
 .center-card {

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

@@ -51,7 +51,7 @@ export class Q2Checkbox {
     if (this.hideLabel)
       textLabelClasses.push('sr');
     return (h("div", { class: "container" },
-      h("input", { ref: el => (this.inputElement = el), id: this.id, type: "checkbox", checked: this.indeterminate || this.checked || false, disabled: !!this.disabled || !!this.groupDisabled, class: "sr", value: this.value, name: this.name || this.id, "aria-label": this.label ? loc(this.label) : undefined, "aria-describedby": this.description ? 'description' : undefined, "test-id": "q2CheckboxInnerCheckBox", onClick: this.onInputClick }),
+      h("input", { ref: el => (this.inputElement = el), id: this.id, type: "checkbox", checked: this.indeterminate || this.checked || false, disabled: !!this.disabled || !!this.groupDisabled, class: "sr", value: this.value, name: this.name || this.id, "aria-describedby": this.description ? 'description' : undefined, "test-id": "q2CheckboxInnerCheckBox", onClick: this.onInputClick }),
       h("label", { htmlFor: this.id, class: "label-control", "test-id": "checkboxButton" }, this.generateCheckboxSVG()),
       h("div", { class: textLabelClasses.join(' ') },
         h("label", { "test-id": "checkboxLabel", htmlFor: this.id },

package/dist/collection/components/q2-checkbox/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,7 +67,7 @@ button {
 :host {
   display: block;
   position: relative;
-  padding: var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px)))) 0;
+  padding: var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0;
 }
 
 .container {

package/dist/collection/components/q2-checkbox-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 {
@@ -110,7 +110,7 @@ legend.sr-only {
 }
 
 .optional-tag {
-  margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px)));
+  margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));
   color: var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-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/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)));
@@ -138,7 +138,7 @@ button {
 }
 
 .dropdown-button.unstyled .dropdown-button-content {
-  padding: var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));
+  padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));
 }
 
 .q2-element-dropdown {

package/dist/collection/components/q2-dropdown-item/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 {
 }
 
 .dropdown-separator {
-  margin: 0 var(--tct-scale-1, var(--app-scale-1, 5px));
+  margin: 0 var(--tct-scale-1, var(--app-scale-1x, 5px));
   border-bottom: 1px solid var(--tct-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));
 }
 
@@ -80,7 +80,7 @@ button {
 }
 
 .dropdown-item-content {
-  padding: 12px var(--tct-scale-3, var(--app-scale-3, 15px));
+  padding: 12px var(--tct-scale-3, var(--app-scale-3x, 15px));
   text-align: left;
   background-color: var(--tct-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))));
   color: var(--tct-dropdown-item-font-color, inherit);

package/dist/collection/components/q2-editable-field/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,7 +79,7 @@ button {
 
 q2-input,
 .text-wrapper {
-  margin: 0 var(--tct-scale-2, var(--app-scale-2, 10px)) 0 0;
+  margin: 0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0;
 }
 
 q2-input {
@@ -104,7 +104,7 @@ q2-btn {
 }
 
 dl {
-  margin: var(--tct-scale-0, var(--app-scale-0, 0));
+  margin: var(--tct-scale-0, var(--app-scale-0x, 0));
 }
 
 dt {
@@ -112,7 +112,7 @@ dt {
 }
 
 dd {
-  margin-left: var(--tct-scale-0, var(--app-scale-0, 0));
+  margin-left: var(--tct-scale-0, var(--app-scale-0x, 0));
   display: flex;
   align-items: center;
 }

package/dist/collection/components/q2-icon/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 {