q2-tecton-elements 1.10.9 → 1.13.0-alpha.0

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

@@ -66,9 +66,9 @@ button {
 
 :host {
   display: block;
-  margin-top: var(--tct-input-margin-top, var(--app-scale-6x, 30px));
-  margin-bottom: var(--tct-input-margin-bottom, var(--app-scale-6x, 30px));
-  font-size: var(--tct-input-font-size, var(--app-font-size, inherit));
+  margin-top: var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-6x, 30px)));
+  margin-bottom: var(--tct-input-margin-bottom, var(--t-input-margin-bottom, var(--app-scale-6x, 30px)));
+  font-size: var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)));
 }
 
 :host([hidden]) {
@@ -80,51 +80,40 @@ button {
   position: relative;
 }
 
+.field-container {
+  --comp-input-tween: var(--tct-input-tween, var(--t-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));
+}
+
 label {
   display: block;
-  padding-left: var(--tct-input-label-padding-left, 0);
-  padding-right: var(--tct-input-label-padding-right, 0);
-  margin-top: var(--tct-input-label-margin-top, 0);
-  margin-bottom: var(--tct-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1, 5px)));
-  color: var(--tct-input-label-font-color, inherit);
-  font-size: var(--tct-input-label-font-size, inherit);
-  font-weight: var(--tct-input-label-font-weight, 600);
-  text-transform: var(--tct-input-label-text-transform, none);
-  letter-spacing: var(--tct-input-label-letter-spacing, normal);
-  transition: color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
+  padding-left: var(--tct-input-label-padding-left, var(--t-input-label-padding-left, 0));
+  padding-right: var(--tct-input-label-padding-right, var(--t-input-label-padding-right, 0));
+  margin-top: var(--tct-input-label-margin-top, var(--t-input-label-margin-top, 0));
+  margin-bottom: var(--tct-input-label-margin-bottom, var(--t-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1, 5px))));
+  color: var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit));
+  font-size: var(--tct-input-label-font-size, var(--t-input-label-font-size, inherit));
+  font-weight: var(--tct-input-label-font-weight, var(--t-input-label-font-weight, 600));
+  text-transform: var(--tct-input-label-text-transform, var(--t-input-label-text-transform, none));
+  letter-spacing: var(--tct-input-label-letter-spacing, var(--t-input-label-letter-spacing, normal));
+  transition: color var(--comp-input-tween);
 }
 
 .optional-tag {
-  margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px)));
-  color: var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, #767676)));
-  font-size: var(--tct-input-label-optional-font-size, 12px);
-  font-weight: var(--tct-input-label-optional-font-weight, 400);
+  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))));
+  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));
 }
 
 .input-container {
   background-color: var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))));
   display: flex;
   align-items: center;
-  --comp-input-horizontal-gap: var(
-      --tct-input-horizontal-gap,
-      var(--t-input-horizontal-gap, 8px)
-  );
-  --comp-input-border-top-left-radius: var(
-      --tct-input-border-top-left-radius,
-      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-  );
-  --comp-input-border-top-right-radius: var(
-      --tct-input-border-top-right-radius,
-      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-  );
-  --comp-input-border-bottom-right-radius: var(
-      --tct-input-border-bottom-right-radius,
-      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-  );
-  --comp-input-border-bottom-left-radius: var(
-      --tct-input-border-bottom-left-radius,
-      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-  );
+  --comp-input-horizontal-gap: var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 8px));
+  --comp-input-border-top-left-radius: var(--tct-input-border-top-left-radius, var(--t-input-border-top-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));
+  --comp-input-border-top-right-radius: var(--tct-input-border-top-right-radius, var(--t-input-border-top-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));
+  --comp-input-border-bottom-right-radius: var(--tct-input-border-bottom-right-radius, var(--t-input-border-bottom-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));
+  --comp-input-border-bottom-left-radius: var(--tct-input-border-bottom-left-radius, var(--t-input-border-bottom-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));
   --comp-input-border-radius: var(--comp-input-border-top-left-radius)
       var(--comp-input-border-top-right-radius) var(--comp-input-border-bottom-right-radius)
       var(--comp-input-border-bottom-left-radius);
@@ -142,10 +131,14 @@ label {
   --comp-input-min-height: 44px;
   border-width: var(--comp-input-border-width);
   border-style: solid;
-  border-color: var(--tct-input-border-color, var(--t-input-border, var(--tct-gray-11, var(--t-gray-11, #cccccc))));
+  border-color: var(--tct-input-border-color, var(--t-input-border-color, var(--tct-gray-11, var(--t-gray-11, #cccccc))));
   border-radius: var(--comp-input-border-radius);
-  box-shadow: var(--tct-input-box-shadow, none);
-  transition: border-width var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), border-color var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), box-shadow var(--tct-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
+  box-shadow: var(--tct-input-box-shadow, var(--t-input-box-shadow, none));
+  transition: border-width var(--comp-input-tween), border-color var(--comp-input-tween), box-shadow var(--comp-input-tween);
+}
+:host([disabled]) .input-container {
+  cursor: not-allowed;
+  opacity: var(--tct-input-disabled-opacity, var(--t-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));
 }
 
 .input-field {
@@ -155,109 +148,93 @@ label {
   appearance: none;
   box-sizing: border-box;
   min-height: var(--comp-input-min-height);
-  height: var(--tct-input-height, 44px);
+  height: var(--tct-input-height, var(--t-input-height, 44px));
   width: 100%;
-  padding: 0 var(--tct-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px)));
+  padding: 0 var(--tct-input-horizontal-padding, var(--t-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));
   background-color: transparent;
   color: var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));
+  /* To remove up/down arrow in number field for webkit based browser */
+  /* For Firefox */
 }
-
-input {
-  display: inline-block;
-}
-
 .input-field:focus {
   outline: none;
   box-shadow: none;
 }
-
-/* To remove up/down arrow in number field for webkit based browser */
-.input-field::-webkit-outer-spin-button,
-.input-field::-webkit-inner-spin-button {
+.input-field::-webkit-outer-spin-button, .input-field::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-
-/* For Firefox */
 .input-field[type=number] {
   -moz-appearance: textfield;
 }
+.input-field[disabled] {
+  cursor: not-allowed;
+}
+.right-aligned .input-field {
+  text-align: right;
+}
 
 .input-container:focus-within {
   border-width: var(--comp-input-focus-border-width, 1px);
-  border-color: var(--tct-input-focus-border-color, var(--t-input-focus, var(--tct-gray-9, var(--t-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);
+  border-color: var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--tct-gray-9, var(--t-gray-9, #999999))));
+  box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-input-focus-box-shadow, var(--t-input-focus-box-shadow, 0 0 transparent));
 }
 
+input {
+  display: inline-block;
+}
 input::-ms-clear {
   display: none;
 }
-
-input[type=search]::-webkit-search-decoration,
-input[type=search]::-webkit-search-cancel-button,
-input[type=search]::-webkit-search-results-button,
-input[type=search]::-webkit-search-results-decoration {
+input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
   display: none;
 }
 
 input::placeholder,
 .placeholder-text {
-  color: var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))));
+  color: var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--t-textA, var(--app-gray-d1, rgba(77, 77, 77, 0.77)))));
 }
 
 .pseudo-input {
   display: inline-flex;
   align-items: center;
 }
-
 .pseudo-input span {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.input-icons-container-left:empty {
-  display: none;
-}
-
-.input-icons-container-left {
+.input-icons-container-left,
+.input-icons-container-right {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: var(--comp-input-horizontal-gap);
-  padding-left: var(--comp-input-horizontal-gap);
 }
-
+.input-icons-container-left:empty,
 .input-icons-container-right:empty {
   display: none;
 }
 
+.input-icons-container-left {
+  padding-left: var(--comp-input-horizontal-gap);
+}
+
 .input-icons-container-right {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--comp-input-horizontal-gap);
   padding-right: var(--comp-input-horizontal-gap);
 }
-
 .input-icons-container-right .btn-visibility-toggle {
   color: var(--tct-primary, var(--t-primary, #006eb2));
   font-size: 12px;
 }
 
 q2-icon {
-  margin-top: calc(var(--tct-input-border-top-width, 1px) / 2);
-  margin-bottom: calc(var(--tct-input-border-bottom-width, 1px) / 2);
+  margin-top: calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);
+  margin-bottom: calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);
   pointer-events: none;
-  color: var(--tct-input-icon-stroke-primary, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))));
-  --tct-icon-stroke-primary: var(
-      --tct-input-icon-stroke-primary,
-      var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))
-  );
-  --t-icon-stroke-primary: var(
-      --tct-input-icon-stroke-primary,
-      var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))
-  );
+  color: var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-textA, var(--app-gray, rgba(77, 77, 77, 0.77)))));
+  --tct-icon-stroke-primary: var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-textA, var(--app-gray, rgba(77, 77, 77, 0.77)))));
 }
 
 .icon-left-muted {
@@ -272,30 +249,42 @@ q2-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: calc( var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, 1px) - var(--tct-input-focus-border-bottom-width, 1px) );
-  height: calc( var(--tct-input-height, 44px) - var(--tct-input-focus-border-top-width, 1px) - var(--tct-input-focus-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-14, var(--t-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)));
+  min-height: calc(
+        var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) -
+            var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px))
+    );
+  height: calc(
+        var(--tct-input-height, var(--t-input-height, 44px)) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) - var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px))
+    );
+  font-size: var(--tct-input-prefix-font-size, var(--t-input-prefix-font-size, inherit));
+  color: var(--tct-input-prefix-font-color, var(--t-input-prefix-font-color, inherit));
+  background-color: var(--tct-input-prefix-bg, var(--t-input-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))));
+  transition: color var(--comp-input-tween), background-color var(--comp-input-tween);
 }
 
 .input-prefix {
-  border-top-left-radius: calc( var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, 1px) - var(--tct-input-border-left-width, 1px) );
-  border-bottom-left-radius: calc( var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, 1px) - var(--tct-input-border-left-width, 1px) );
+  border-top-left-radius: calc(
+        var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))
+    );
+  border-bottom-left-radius: calc(
+        var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))
+    );
   pointer-events: none;
   /* used to allow iOS voiceover to display keyboard in input TCT-1194 */
 }
 
 .input-suffix {
-  border-top-right-radius: calc( var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, 1px) - var(--tct-input-border-right-width, 1px) );
-  border-bottom-right-radius: calc( var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, 1px) - var(--tct-input-border-right-width, 1px) );
+  border-top-right-radius: calc(
+        var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))
+    );
+  border-bottom-right-radius: calc(
+        var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))
+    );
 }
 
 .icon-error {
   color: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
   --tct-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
-  --t-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
 }
 
 .pw-show {
@@ -304,8 +293,8 @@ q2-icon {
 }
 
 .btn-clear {
-  margin-top: calc(var(--tct-input-border-top-width, 1px) / 2);
-  margin-bottom: calc(var(--tct-input-border-bottom-width, 1px) / 2);
+  margin-top: calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);
+  margin-bottom: calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);
   height: 22px;
   --tct-btn-icon-width: 17px;
   --tct-btn-icon-height: 22px;
@@ -315,37 +304,24 @@ q2-icon {
 .messages-container {
   height: 0px;
   overflow: hidden;
-  background-color: var(--tct-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));
-  box-shadow: var(--tct-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));
-  transition: height var(--tct-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));
+  background-color: 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))))));
+  box-shadow: var(--tct-input-message-box-shadow, var(--t-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))));
+  transition: height var(--tct-input-messages-tween, var(--t-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));
   margin-top: 2px;
   z-index: 1;
   position: absolute;
   width: 100%;
-  color: var(--tct-input-messages-font-color, inherit);
-}
-
-:host([disabled]) .input-container {
-  cursor: not-allowed;
-  opacity: var(--tct-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));
-}
-
-.input-field[disabled] {
-  cursor: not-allowed;
-}
-
-.right-aligned .input-field {
-  text-align: right;
+  color: var(--tct-input-messages-font-color, var(--t-input-messages-font-color, inherit));
 }
 
 .has-error label {
-  color: var(--tct-input-error-label-font-color, var(--tct-input-label-font-color, inherit));
+  color: var(--tct-input-error-label-font-color, var(--t-input-error-label-font-color, var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit))));
 }
 
 .has-error:not(.has-focus) .input-prefix,
 .has-error:not(.has-focus) .input-suffix {
-  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-14, var(--app-var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));
+  color: var(--tct-input-error-prefix-font-color, var(--t-input-error-prefix-font-color, inherit));
+  background-color: var(--tct-input-error-prefix-bg, var(--t-input-error-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))));
 }
 
 .has-error .input-container:not(:focus-within) {
@@ -359,5 +335,5 @@ q2-icon {
 
 .vertical-separator {
   height: calc(var(--comp-input-min-height) - 2px);
-  border-right: 1px solid var(--tct-input-prefix-border-color, var(--tct-input-border-color, var(--t-input-border, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))))));
+  border-right: 1px solid var(--tct-input-prefix-border-color, var(--t-input-prefix-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))));
 }

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

@@ -125,7 +125,7 @@ button {
   width: 100%;
   height: 100%;
   border-radius: 100%;
-  border: calc(1em / 12) solid transparent;
+  border: 0.0833333333em solid transparent;
 }
 
 .half-circle-spinner .circle.circle-1 {

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

@@ -46,6 +46,7 @@ export class Q2Radio {
           h("slot", null))))));
   }
   static get is() { return "q2-radio"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["styles.scss"]
   }; }

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

@@ -64,15 +64,15 @@ button {
   visibility: hidden;
 }
 
-q2-radio {
+:host {
   margin-top: var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px));
   margin-right: var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px));
   display: block;
 }
-q2-radio .radio-container {
+:host .radio-container {
   margin-bottom: var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px));
 }
-q2-radio .radio-container label[for] {
+:host .radio-container label[for] {
   font-weight: var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));
   align-items: center;
   cursor: pointer;
@@ -81,39 +81,39 @@ q2-radio .radio-container label[for] {
   grid-template-columns: 18px 1fr;
   gap: var(--tct-scale-1, var(--app-scale-1, 5px));
 }
-q2-radio .radio-container svg {
+:host .radio-container svg {
   border-radius: 50%;
   transition: box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
   outline: 0;
   width: 100%;
 }
-q2-radio .radio-container circle:nth-child(1) {
+:host .radio-container circle:nth-child(1) {
   stroke-width: 2;
   stroke: var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));
 }
-q2-radio .radio-container input:focus + label svg {
+:host .radio-container input:focus + label svg {
   box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff));
 }
-q2-radio .radio-container input:focus + label circle:nth-child(1) {
+:host .radio-container input:focus + label circle:nth-child(1) {
   stroke: var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));
 }
-q2-radio .radio-container input:checked + label circle:nth-child(1) {
+:host .radio-container input:checked + 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(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));
 }
-q2-radio .radio-container input:checked + label .label-content {
+:host .radio-container input:checked + label .label-content {
   font-weight: var(--tct-checkbox-selected-font-weight, 600);
   letter-spacing: var(--tct-checkbox-selected-letter-spacing, 0.25);
 }
-q2-radio .radio-container input:checked + label circle:nth-child(2) {
+:host .radio-container input:checked + label circle:nth-child(2) {
   fill: var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));
 }
-q2-radio .radio-tile {
+:host .radio-tile {
   flex-basis: 100px;
   flex-grow: 0;
   flex-wrap: wrap;
 }
-q2-radio .radio-tile label[for] {
+:host .radio-tile label[for] {
   align-items: center;
   border-radius: 3px;
   border: 2px solid var(--tct-radio-stroke-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));
@@ -125,15 +125,15 @@ q2-radio .radio-tile label[for] {
   transition: border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
   white-space: nowrap;
 }
-q2-radio .radio-tile input:focus + label {
+:host .radio-tile input:focus + label {
   border-color: #0079c1;
   box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff));
 }
-q2-radio .radio-tile input:checked + label {
+:host .radio-tile input:checked + label {
   border-color: var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e));
   box-shadow: inset 0 0 0 2px #ffffff;
 }
-q2-radio .radio-tile input:checked + label:after {
+:host .radio-tile input:checked + label:after {
   border-bottom-width: 3px;
   border-bottom: 5px solid #0079c1;
   border-left-width: 5px;
@@ -148,7 +148,7 @@ q2-radio .radio-tile input:checked + label:after {
   position: absolute;
   width: 0;
 }
-q2-radio input:disabled + label {
+:host input:disabled + label {
   cursor: not-allowed;
   opacity: var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));
 }

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

@@ -63,6 +63,25 @@ export class Q2RadioGroup {
       this.hostElement.querySelector('q2-radio');
     radio === null || radio === void 0 ? void 0 : radio.dispatchEvent(new FocusEvent('focus'));
   }
+  keydownHandler(event) {
+    const currentValue = event.target.getAttribute('value') || this.value;
+    let index = this.radioElements.findIndex(el => el === event.target || el.getAttribute('value') === currentValue);
+    let sign = 0;
+    if (['ArrowLeft', 'Left', 'ArrowUp', 'Up'].includes(event.key)) {
+      sign = -1;
+    }
+    else if (['ArrowRight', 'Right', 'ArrowDown', 'Down'].includes(event.key)) {
+      sign = 1;
+    }
+    if (index === -1 || sign === 0) {
+      return;
+    }
+    index += sign;
+    index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);
+    event.preventDefault();
+    this.value = this.radioElements[index].value;
+    this.radioElements[index].dispatchEvent(new FocusEvent('focus'));
+  }
   render() {
     return (h("div", null,
       this.label || this.optional ? (h("div", { class: "group-legend" },
@@ -280,5 +299,11 @@ export class Q2RadioGroup {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "keydown",
+      "method": "keydownHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

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

@@ -73,7 +73,6 @@ fieldset {
   margin: 0;
   border: 0;
 }
-
 fieldset.has-error {
   border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));
   border-width: 1px;
@@ -81,7 +80,6 @@ fieldset.has-error {
   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;
@@ -90,7 +88,6 @@ fieldset.has-error .error-icon-container {
   text-align: right;
   background: linear-gradient(to right, transparent, white);
 }
-
 fieldset.has-error legend + div.error-icon-container.no-label {
   top: 28px;
 }
@@ -110,10 +107,10 @@ legend.sr-only {
 }
 
 .optional-tag {
-  margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px)));
-  color: var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, #767676)));
-  font-size: var(--tct-input-label-optional-font-size, 12px);
-  font-weight: var(--tct-input-label-optional-font-weight, 400);
+  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))));
+  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));
 }
 
 .flexed {
@@ -123,11 +120,9 @@ legend.sr-only {
   align-items: center;
   justify-content: center;
 }
-
 .flexed.left {
   justify-content: left;
 }
-
 .flexed.right {
   justify-content: right;
 }

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

@@ -42,9 +42,9 @@ export class Q2Select {
     this.searchAndFocus = keyValue => {
       // pseudo search in non-searchable select
       const reorder = () => {
-        const pivotIndex = (this.activeIndex || 0) + 1;
+        this.pivotIndex = this.pivotIndex === undefined ? 0 : (this.activeIndex || 0) + 1;
         const list = this.optionElements.map((element, index) => ({ element, index }));
-        return [...list.slice(pivotIndex), ...list.slice(0, pivotIndex)];
+        return [...list.slice(this.pivotIndex), ...list.slice(0, this.pivotIndex)];
       };
       const buildQueue = () => {
         const now = new Date();
@@ -60,6 +60,7 @@ export class Q2Select {
       const searchIndex = list => {
         return list.find(v => {
           return (!v.element.disabled &&
+            v.element.display &&
             v.element.display
               .replace(/\s/g, '')
               .match(new RegExp(`^${this.keyStore.queue.join('')}`, 'i')));
@@ -180,6 +181,7 @@ export class Q2Select {
       }
     };
     this.inputKeydownHandler = (event) => {
+      event.stopPropagation();
       const { key } = event;
       const { optionElements, dropdownOpen, searchable } = this;
       switch (key) {
@@ -342,7 +344,7 @@ export class Q2Select {
   get minPopHeight() {
     const { minRows } = this;
     const firstOption = this.hostElement.querySelector('q2-option:not([hidden])');
-    const minHeight = window.getComputedStyle(firstOption).minHeight;
+    const minHeight = firstOption ? window.getComputedStyle(firstOption).minHeight : '44px';
     return minRows * parseInt(minHeight);
   }
   get selectedDisplay() {

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

@@ -136,9 +136,9 @@ button {
 .custom-display-content {
   position: absolute;
   bottom: 0;
-  left: calc(var-list(--tct-scale-2, --app-scale-2, 10px) + 1px);
+  left: calc(var(--tct-scale-2, var(--app-scale-2, 10px)) + 1px);
   height: 44px;
-  width: calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3, 15px));
+  width: calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3, 15px)));
   overflow: hidden;
   cursor: pointer;
   transition: left var(--tct-tween-2, var(--app-tween-1, 0.2s ease));
@@ -151,11 +151,11 @@ button {
 
 .is-searchable.is-focused .custom-display-content,
 .is-searchable .custom-display-content:active {
-  left: calc(var-list(--tct-scale-3, --app-scale-3, 15px) + 1px);
+  left: calc(var(--tct-scale-3, var(--app-scale-3, 15px)) + 1px);
 }
 
 .has-error .custom-display-content {
-  width: calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3, 15px));
+  width: calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3, 15px)));
 }
 
 .dropdown-open .q2-select-dropdown {

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

@@ -65,6 +65,8 @@ export class Q2Stepper {
       this.stepCount = allPanes.length;
     };
     this.checkScrollState = () => {
+      if (!this.listElement)
+        return;
       const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
       this.scrollEnabled = scrollWidth > clientWidth;
       this.showScrollLeft = !!scrollLeft;

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

@@ -171,9 +171,9 @@ li {
 }
 
 hr {
-  width: calc( var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size) );
-  top: calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));
-  left: calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));
+  width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));
+  top: calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));
+  left: calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));
   border: 0;
   border-top: 1px solid var(--comp-bullet-bg);
   height: 0;