q2-tecton-elements 1.10.8 → 1.11.0

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

@@ -66,9 +66,9 @@ button {
 
 :host {
   display: block;
-  margin-top: var(--tct-textarea-margin-top, var(--app-scale-6x, 30px));
-  margin-bottom: var(--tct-textarea-margin-bottom, var(--app-scale-6x, 30px));
-  font-size: var(--tct-textarea-font-size, var(--app-font-size, inherit));
+  margin-top: var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-6x, 30px)));
+  margin-bottom: var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-6x, 30px)));
+  font-size: var(--tct-textarea-font-size, var(--t-textarea-font-size, var(--app-font-size, inherit)));
 }
 
 :host([hidden]) {
@@ -77,66 +77,53 @@ button {
 
 label {
   display: block;
-  padding-left: var(--tct-textarea-label-padding-left, 0);
-  padding-right: var(--tct-textarea-label-padding-right, 0);
-  margin-top: var(--tct-textarea-label-margin-top, 0);
-  margin-bottom: var(--tct-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px)));
-  color: var(--tct-textarea-label-font-color, inherit);
-  font-size: var(--tct-textarea-label-font-size, inherit);
-  font-weight: var(--tct-textarea-label-font-weight, 600);
-  text-transform: var(--tct-textarea-label-text-transform, none);
-  letter-spacing: var(--tct-textarea-label-letter-spacing, normal);
-  transition: color var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
+  padding-left: var(--tct-textarea-label-padding-left, var(--t-textarea-label-padding-left, 0));
+  padding-right: var(--tct-textarea-label-padding-right, var(--t-textarea-label-padding-right, 0));
+  margin-top: var(--tct-textarea-label-margin-top, var(--t-textarea-label-margin-top, 0));
+  margin-bottom: var(--tct-textarea-label-margin-bottom, var(--t-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px))));
+  color: var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit));
+  font-size: var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit));
+  font-weight: var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600));
+  text-transform: var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none));
+  letter-spacing: var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal));
+  transition: color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));
 }
 
 .optional-tag {
-  margin-left: var(--tct-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px)));
-  color: var(--tct-textarea-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, #767676)));
-  font-size: var(--tct-textarea-label-optional-font-size, 12px);
-  font-weight: var(--tct-textarea-label-optional-font-weight, 400);
+  margin-left: var(--tct-textarea-label-optional-margin-left, var(--t-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px))));
+  color: var(--tct-textarea-label-optional-font-color, var(--t-textarea-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));
+  font-size: var(--tct-textarea-label-optional-font-size, var(--t-textarea-label-optional-font-size, 12px));
+  font-weight: var(--tct-textarea-label-optional-font-weight, var(--t-textarea-label-optional-font-weight, 400));
 }
 
 .input-container {
-  min-height: var(--comp-textarea-min-height, var(--tct-textarea-min-height));
+  min-height: var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));
   height: 100%;
-  --comp-textarea-border-top-left-radius: var(
-      --tct-textarea-border-top-left-radius,
-      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-  );
-  --comp-textarea-border-top-right-radius: var(
-      --tct-textarea-border-top-right-radius,
-      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-  );
-  --comp-textarea-border-bottom-right-radius: var(
-      --tct-textarea-border-bottom-right-radius,
-      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-  );
-  --comp-textarea-border-bottom-left-radius: var(
-      --tct-textarea-border-bottom-left-radius,
-      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-  );
+  --comp-default-border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 3px));
+  --comp-textarea-border-top-left-radius: var(--tct-textarea-border-top-left-radius, var(--t-textarea-border-top-left-radius, var(--comp-default-border-radius)));
+  --comp-textarea-border-top-right-radius: var(--tct-textarea-border-top-right-radius, var(--t-textarea-border-top-right-radius, var(--comp-default-border-radius)));
+  --comp-textarea-border-bottom-right-radius: var(--tct-textarea-border-bottom-right-radius, var(--t-textarea-border-bottom-right-radius, var(--comp-default-border-radius)));
+  --comp-textarea-border-bottom-left-radius: var(--tct-textarea-border-bottom-left-radius, var(--t-textarea-border-bottom-left-radius, var(--comp-default-border-radius)));
   --comp-textarea-border-radius: var(--comp-textarea-border-top-left-radius)
       var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)
       var(--comp-textarea-border-bottom-left-radius);
-  --comp-textarea-border-width: var(--tct-textarea-border-top-width, 1px)
-      var(--tct-textarea-border-right-width, 1px) var(--tct-textarea-border-bottom-width, 1px)
-      var(--tct-textarea-border-left-width, 1px);
-  --comp-textarea-focus-border-width: var(--tct-textarea-focus-border-top-width, 1px)
-      var(--tct-textarea-focus-border-right-width, 1px)
-      var(--tct-textarea-focus-border-bottom-width, 1px)
-      var(--tct-textarea-focus-border-left-width, 1px);
+  --comp-textarea-border-width: var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) var(--tct-textarea-border-right-width, var(--t-textarea-border-right-width, 1px)) var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) var(--tct-textarea-border-left-width, var(--t-textarea-border-left-width, 1px));
+  --comp-textarea-focus-border-width: var(--tct-textarea-focus-border-top-width, var(--t-textarea-focus-border-top-width, 1px)) var(--tct-textarea-focus-border-right-width, var(--t-textarea-focus-border-right-width, 1px)) var(--tct-textarea-focus-border-bottom-width, var(--t-textarea-focus-border-bottom-width, 1px)) var(--tct-textarea-focus-border-left-width, var(--t-textarea-focus-border-left-width, 1px));
   --comp-textarea-icon-clearance: 34px;
 }
+:host([disabled]) .input-container {
+  cursor: not-allowed;
+  opacity: var(--tct-textarea-disabled-opacity, var(--t-textarea-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));
+}
 
 .content-container {
   --comp-textarea-min-height: 44px;
   --comp-textarea-min-width: 150px;
   position: relative;
   display: inline-block;
-  min-height: var(--comp-textarea-min-height, var(--tct-textarea-min-height, 44px));
-  min-width: var(--comp-textarea-min-width, var(--tct-textarea-min-width, 150px));
+  min-height: var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));
+  min-width: var(--tct-textarea-min-width, var(--t-textarea-min-width, var(--comp-textarea-min-width)));
 }
-
 :host(:not([cols])) .content-container {
   width: 100%;
 }
@@ -148,66 +135,64 @@ textarea {
   appearance: none;
   display: block;
   box-sizing: border-box;
-  min-height: var(--comp-textarea-min-height, var(--tct-textarea-min-height));
-  padding: var(--tct-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))) var(--tct-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)));
-  background-color: var(--tct-textarea-bg, var(--t-input-bg, var(--tct-gray-14, var(--app-gray-14, #f2f2f2))));
-  color: var(--tct-textarea-font-color, var(--t-input-font-color, inherit));
+  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)))));
+  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;
-  border-color: var(--tct-textarea-border-color, var(--t-input-border, var(--tct-gray-11, var(--app-gray-11, #cccccc))));
+  border-color: var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--t-input-border, var(--tct-gray-11, var(--app-gray-11, #cccccc)))));
   border-radius: var(--comp-textarea-border-radius);
-  box-shadow: var(--tct-textarea-box-shadow, none);
+  box-shadow: var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none));
   scrollbar-width: thin;
   scrollbar-color: var(--t-a11y-gray-color) transparent;
-  transition: border-width var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), border-color var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), box-shadow var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
+  --comp-textarea-tween: var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));
+  transition: border-width var(--comp-textarea-tween), border-color var(--comp-textarea-tween), box-shadow var(--comp-textarea-tween);
 }
-
 textarea::-webkit-scrollbar {
   width: var(--app-scale-1x);
   height: var(--app-scale-1x);
   margin: var(--app-scale-1x);
 }
-
 textarea::-webkit-scrollbar-thumb {
   background: var(--t-a11y-gray-color);
   border-radius: 2px;
 }
-
 textarea::-webkit-scrollbar-track {
   background: transparent;
 }
-
 textarea:not([cols]) {
   width: 100%;
 }
-
 textarea:focus {
   border-width: var(--comp-textarea-focus-border-width, 1px);
-  border-color: var(--tct-textarea-focus-border-color, var(--t-input-focus, var(--tct-gray-9, var(--app-gray-9, #999999))));
-  box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-textarea-focus-box-shadow, 0 0 transparent);
+  border-color: var(--tct-textarea-focus-border-color, var(--t-textarea-focus-border-color, var(--t-input-focus, var(--tct-gray-9, var(--app-gray-9, #999999)))));
+  box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-textarea-focus-box-shadow, var(--t-textarea-focus-box-shadow, 0 0 transparent));
 }
-
 textarea::placeholder {
-  color: var(--tct-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))));
+  color: var(--tct-textarea-placeholder-font-color, var(--t-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));
+}
+textarea[disabled] {
+  cursor: not-allowed;
+}
+.has-error textarea {
+  padding-right: var(--comp-textarea-icon-clearance);
+}
+.has-error textarea:not(:focus) {
+  border-color: var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #c30000)));
 }
 
 q2-icon {
-  margin-top: calc(var(--tct-textarea-border-top-width, 1px) / 2);
-  margin-bottom: calc(var(--tct-textarea-border-bottom-width, 1px) / 2);
+  margin-top: calc(var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) / 2);
+  margin-bottom: calc(var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) / 2);
   pointer-events: none;
   position: absolute;
-  top: var(--tct-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)));
-  color: var(--tct-textarea-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))));
+  top: var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))));
+  color: var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))));
   right: 0;
   margin-right: var(--tct-scale-2x, var(--app-scale-2x, 10px));
-  --tct-icon-stroke-primary: var(
-      --tct-textarea-icon-stroke-primary,
-      var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))))
-  );
-  --t-icon-stroke-primary: var(
-      --tct-textarea-icon-stroke-primary,
-      var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))))
-  );
+  --tct-icon-stroke-primary: var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))));
+  --t-icon-stroke-primary: var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))));
 }
 
 .icon-error {
@@ -219,40 +204,23 @@ q2-icon {
 .messages-container {
   height: 0px;
   overflow: hidden;
-  background-color: var(--tct-message-bg, var(--tct-gray-14, var(--app-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));
-  box-shadow: var(--tct-textarea-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-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));
+  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-textarea-message-box-shadow, var(--t-textarea-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-textarea-messages-tween, var(--t-textarea-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-textarea-messages-font-color, inherit);
-}
-
-:host([disabled]) .input-container {
-  cursor: not-allowed;
-  opacity: var(--tct-textarea-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));
-}
-
-textarea[disabled] {
-  cursor: not-allowed;
-}
-
-.has-error textarea {
-  padding-right: var(--comp-textarea-icon-clearance);
+  color: var(--tct-textarea-messages-font-color, var(--t-textarea-messages-font-color, inherit));
 }
 
 .has-error label {
-  color: var(--tct-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit));
-}
-
-.has-error textarea:not(:focus) {
-  border-color: var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #c30000));
+  color: var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)));
 }
 
 .max-length {
-  color: var(--tct-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77)));
-  font-size: var(--tct-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px)));
+  color: var(--tct-textarea-max-length-color, var(--t-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77))));
+  font-size: var(--tct-textarea-max-length-font-size, var(--t-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));
   position: absolute;
   right: 0;
 }
@@ -260,36 +228,31 @@ textarea[disabled] {
 .btn-resize {
   --tct-textarea-resize-icon-padding: calc(
       calc(
-              var(--tct-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)) -
-                  var(--tct-textarea-resize-icon-size, 12px)
+              var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px))) - var(--tct-textarea-resize-icon-size, var(--t-textarea-resize-icon-size, 12px))
           ) / 2
   );
-  width: var(--tct-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px));
-  height: var(--tct-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px));
-  background: var(--tct-textarea-resize-btn-background, transparent);
-  stroke: var(--tct-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77)));
+  width: var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)));
+  height: var(--tct-textarea-resize-btn-height, var(--t-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px)));
+  background: var(--tct-textarea-resize-btn-background, var(--t-textarea-resize-btn-background, transparent));
+  stroke: var(--tct-textarea-resize-color, var(--t-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77))));
   border: 0;
   position: absolute;
-  right: calc(var(--tct-textarea-resize-icon-padding) * -1 + 2px);
-  bottom: calc(var(--tct-textarea-resize-icon-padding) * -1 + 2px);
+  right: calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);
+  bottom: calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);
   display: block;
-  padding: var(--tct-textarea-resize-icon-padding);
+  padding: var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding));
   font-size: 0;
 }
-
 .btn-resize:focus {
   outline: none;
   box-shadow: none;
 }
-
 :host([resize=both]) .btn-resize {
   cursor: se-resize;
 }
-
 :host([resize=vertical]) .btn-resize {
   cursor: s-resize;
 }
-
 :host([resize=horizontal]) .btn-resize {
   cursor: e-resize;
 }

package/dist/collection/components/tecton-tab-pane/index.js

@@ -1,4 +1,4 @@
-import { Component, Prop, State, Element, Watch, h } from '@stencil/core';
+import { Component, Element, h, Prop, State, Watch } from '@stencil/core';
 export class TectonTabPane {
   constructor() {
     ///////// Actions /////////

package/dist/collection/utils/index.js

@@ -17,6 +17,9 @@ export function isFirefox() {
   const userAgent = navigator.userAgent.toLowerCase();
   return userAgent.includes('firefox');
 }
+export function isTouchDevice() {
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+}
 export function isSafari() {
   const userAgent = navigator.userAgent.toLowerCase();
   return userAgent.includes('safari') && !userAgent.includes('chrome');
@@ -54,9 +57,16 @@ export function labelDOM(target) {
   const { label, hideLabel } = target;
   if (!label || hideLabel)
     return;
+  let helpText = '';
+  if (target.optional) {
+    helpText = h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'));
+  }
+  if (target.readonly) {
+    helpText = h("span", { class: "optional-tag" }, loc('tecton.element.input.readonly'));
+  }
   return (h("label", { htmlFor: target.inputId, class: target.readonly ? 'readonly-field' : '' },
     loc(target.label),
-    target.optional ? (h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'))) : ('')));
+    helpText));
 }
 export function handleAriaLabel(target) {
   const { ariaLabel } = target;

package/dist/esm/{icons-3ee662ea.js → icons-6a143c2f.js}

@@ -164,6 +164,16 @@ const icons = {
     markup: () => (h("g", null,
       h("path", { d: "M13 2C6.986 2 2.11 6.559 2.11 12.182c0 3.2 1.579 6.054 4.046 7.92V24l3.716-2.062c.991.278 2.04.427 3.128.427 6.014 0 10.89-4.559 10.89-10.183C23.89 6.56 19.013 2 13 2zm1.147 13.655l-2.816-2.926-5.424 2.999 5.946-6.31 2.816 2.926 5.424-3-5.946 6.31z", class: "filled" })))
   },
+  'brand-payrecs-color': {
+    markup: () => (h("g", { "fill-rule": "evenodd" },
+      h("path", { fill: "#194879", d: "M9.27-347v-6.29h3.17c1.99 0 3.27.01 3.43.02.97.06 1.8.25 2.55.59 1.21.55 2.08 1.53 2.43 2.74.27.96.25 2.09-.06 2.99-.03.1-.12.3-.19.43-.38.78-1 1.42-1.81 1.86-.07.04-.12.07-.12.08 0 0 .59.88 1.31 1.93.72 1.06 1.31 1.93 1.31 1.94s-1.02.01-2.25.01h-2.25l-1.07-1.58-1.07-1.58H13.5v3.16H9.27v-6.3zm6.01-.08c.36-.03.64-.1.86-.23.06-.03.17-.12.25-.21.13-.13.16-.17.23-.31.09-.19.12-.3.15-.53.04-.38-.04-.77-.22-1.05-.17-.26-.39-.42-.72-.52-.29-.09-.32-.09-1.36-.1l-.96-.01v2.96h.79c.43.02.87.01.98 0z", transform: "translate(4 360)" }),
+      h("path", { fill: "#508dca", d: "M-3.3-383v-6.29h3.14c1.86 0 3.25.01 3.41.02 2.48.14 4.21 1.18 4.92 2.97.37.93.42 2.14.13 3.15-.27.92-.86 1.75-1.64 2.29-.67.47-1.49.79-2.44.94-.59.1-.96.12-2.25.12H.92v3.1H-3.3v-6.3zm6.26-.1c.48-.09.81-.28 1.02-.6.17-.25.23-.5.21-.91-.01-.3-.03-.44-.13-.63-.22-.47-.63-.71-1.31-.77-.1-.01-.55-.02-1.01-.02H.92v2.96l.95-.01c.8.01.96 0 1.09-.02z", transform: "translate(4 396)" })))
+  },
+  'brand-payrecs-filled': {
+    markup: () => (h("g", { class: "filled" },
+      h("path", { d: "M9.27-347v-6.29h3.17c1.99 0 3.27.01 3.43.02.97.06 1.8.25 2.55.59 1.21.55 2.08 1.53 2.43 2.74.27.96.25 2.09-.06 2.99-.03.1-.12.3-.19.43-.38.78-1 1.42-1.81 1.86-.07.04-.12.07-.12.08 0 0 .59.88 1.31 1.93.72 1.06 1.31 1.93 1.31 1.94s-1.02.01-2.25.01h-2.25l-1.07-1.58-1.07-1.58H13.5v3.16H9.27v-6.3zm6.01-.08c.36-.03.64-.1.86-.23.06-.03.17-.12.25-.21.13-.13.16-.17.23-.31.09-.19.12-.3.15-.53.04-.38-.04-.77-.22-1.05-.17-.26-.39-.42-.72-.52-.29-.09-.32-.09-1.36-.1l-.96-.01v2.96h.79c.43.02.87.01.98 0z", transform: "translate(4 360)" }),
+      h("path", { d: "M-3.3-383v-6.29h3.14c1.86 0 3.25.01 3.41.02 2.48.14 4.21 1.18 4.92 2.97.37.93.42 2.14.13 3.15-.27.92-.86 1.75-1.64 2.29-.67.47-1.49.79-2.44.94-.59.1-.96.12-2.25.12H.92v3.1H-3.3v-6.3zm6.26-.1c.48-.09.81-.28 1.02-.6.17-.25.23-.5.21-.91-.01-.3-.03-.44-.13-.63-.22-.47-.63-.71-1.31-.77-.1-.01-.55-.02-1.01-.02H.92v2.96l.95-.01c.8.01.96 0 1.09-.02z", transform: "translate(4 396)" })))
+  },
   'brand-snapchat-color': {
     markup: () => (h("g", { fill: "none", "fill-rule": "evenodd" },
       h("g", null,

package/dist/esm/{index-ec6660af.js → index-0e13a57f.js}

@@ -463,6 +463,9 @@ function isFirefox() {
   const userAgent = navigator.userAgent.toLowerCase();
   return userAgent.includes('firefox');
 }
+function isTouchDevice() {
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+}
 function isSafari() {
   const userAgent = navigator.userAgent.toLowerCase();
   return userAgent.includes('safari') && !userAgent.includes('chrome');
@@ -490,9 +493,16 @@ function labelDOM(target) {
   const { label, hideLabel } = target;
   if (!label || hideLabel)
     return;
+  let helpText = '';
+  if (target.optional) {
+    helpText = h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'));
+  }
+  if (target.readonly) {
+    helpText = h("span", { class: "optional-tag" }, loc('tecton.element.input.readonly'));
+  }
   return (h("label", { htmlFor: target.inputId, class: target.readonly ? 'readonly-field' : '' },
     loc(target.label),
-    target.optional ? (h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'))) : ('')));
+    helpText));
 }
 function handleAriaLabel(target) {
   const { ariaLabel } = target;
@@ -564,4 +574,4 @@ function setPopProperties(target) {
   }
 }
 
-export { addSmoothScrollPolyfill as a, setMessageHeight as b, createGuid as c, labelDOM as d, isFirefox as e, handleAriaLabel as h, isEventFromElement as i, loc as l, messagesDOM as m, nextPaint as n, overrideFocus as o, setPopProperties as s };
+export { isTouchDevice as a, addSmoothScrollPolyfill as b, createGuid as c, setMessageHeight as d, labelDOM as e, isFirefox as f, handleAriaLabel as h, isEventFromElement as i, loc as l, messagesDOM as m, nextPaint as n, overrideFocus as o, setPopProperties as s };

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["q2-icon",[[1,"q2-icon",{"type":[513],"label":[513]}]]],["q2-calendar",[[1,"q2-calendar",{"value":[1537],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"optional":[516],"disabled":[516],"invalid":[1540],"typeable":[516],"placeholder":[513],"buttonLabel":[513,"button-label"],"disabledMsg":[513,"disabled-msg"],"calendarLabel":[513,"calendar-label"],"disclaimer":[513],"displayFormat":[513,"display-format"],"startDate":[513,"start-date"],"endDate":[513,"end-date"],"cutoffTime":[513,"cutoff-time"],"daysOfWeekChecksum":[514,"days-of-week-checksum"],"popDirection":[513,"pop-direction"],"assume":[513],"errors":[1040],"invalidDates":[16],"validDates":[16],"onsuccess":[16],"dropdownOpen":[32],"keyboardSelection":[32],"typedValue":[32],"dateList":[32],"hintMessage":[32],"hintMessageType":[32]},[[0,"change","defaultChangeHandler"],[0,"error","defaultErrorHandler"],[0,"success","defaultSuccessHandler"],[0,"focus","delegateFocus"]]]]],["q2-dropdown",[[1,"q2-dropdown",{"type":[513],"icon":[513],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"disabled":[516],"popDirection":[513,"pop-direction"],"name":[513],"context":[513],"contextValue":[513,"context-value"],"resolvedType":[513,"resolved-type"],"dropdownOpen":[32]},[[0,"focus","delegateFocus"]]]]],["q2-select",[[1,"q2-select",{"label":[513],"hideLabel":[516,"hide-label"],"value":[1025],"ariaLabel":[513,"aria-label"],"selectedOptions":[1032,"selected-options"],"disabled":[516],"invalid":[516],"errors":[16],"multiple":[516],"minRows":[2,"min-rows"],"popDirection":[513,"pop-direction"],"searchable":[516],"multilineOptions":[516,"multiline-options"],"optional":[516],"dropdownOpen":[32],"onlyShowingSelected":[32],"activeOptionId":[32],"searchText":[32],"hasCustomDisplay":[32],"inputFocused":[32],"statusMessage":[32]},[[0,"change","onHostElementChange"],[0,"input","onHostElementInput"],[0,"focus","delegateFocus"],[0,"click","clickHandler"],[0,"keydown","keydownHandler"]]]]],["q2-editable-field",[[1,"q2-editable-field",{"value":[1537],"editing":[1540],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"type":[513],"formatModifier":[513,"format-modifier"],"truncated":[513],"maxlength":[514],"persistentLabel":[516,"persistent-label"],"hints":[16],"errors":[16]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"]]]]],["q2-carousel",[[4,"q2-carousel",{"autoPlay":[516,"auto-play"],"fullWidthPanes":[516,"full-width-panes"],"hidePagination":[516,"hide-pagination"],"showNavigationArrows":[516,"show-navigation-arrows"],"ariaLabel":[513,"aria-label"],"label":[513],"index":[1538],"universalCarouselOptions":[32],"fullWidthDisplayOptions":[32],"activePaneIndex":[32],"applyFocus":[32],"applyPaginationFocus":[32],"autoPlayInProgress":[32],"compactMode":[32],"carouselWrapperWidth":[32]},[[0,"change","onHostElementChange"],[0,"clickCarouselPane","carouselPaneClicked"],[0,"focus","delegateFocus"]]]]],["q2-section",[[1,"q2-section",{"label":[513],"collapsible":[516],"noCollapseIcon":[516,"no-collapse-icon"],"expanded":[1540],"contentHeight":[32],"hasYieldedHeader":[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["q2-stepper",[[1,"q2-stepper",{"currentStep":[1538,"current-step"],"stepCount":[1026,"step-count"],"lastEnabledStep":[1026,"last-enabled-step"],"scrollEnabled":[32],"showScrollLeft":[32],"showScrollRight":[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["q2-tab-container",[[1,"q2-tab-container",{"value":[1537],"type":[513],"name":[513],"color":[513],"noPrint":[516,"no-print"],"hasLeft":[32],"hasRight":[32],"scrollEnabled":[32],"showScrollLeft":[32],"showScrollRight":[32],"tabs":[32]},[[0,"change","defaultChangeHandler"],[9,"resize","onResize"],[0,"focus","onFocus"]]]]],["q2-avatar",[[1,"q2-avatar",{"name":[513],"initials":[513],"src":[513],"icon":[1],"badSrc":[32]}]]],["q2-checkbox",[[1,"q2-checkbox",{"checked":[1540],"type":[513],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"indeterminate":[516],"disabled":[516],"value":[513],"name":[513],"hasError":[516,"has-error"],"groupDisabled":[516,"group-disabled"],"alignment":[513]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["q2-checkbox-group",[[1,"q2-checkbox-group",{"label":[513],"value":[1040],"disabled":[516],"optional":[516],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"]]]]],["q2-option",[[1,"q2-option",{"role":[513],"tabindex":[513],"display":[513],"value":[513],"disabled":[516],"optionId":[513,"option-id"],"disabledGroup":[516,"disabled-group"],"selected":[516],"hidden":[516],"multiline":[516],"active":[516],"_multiSelectHidden":[516,"_multiselecthidden"]}]]],["q2-radio-group",[[1,"q2-radio-group",{"label":[513],"value":[1025],"disabled":[516],"name":[513],"optional":[516],"tilelayout":[516],"tileAlignment":[513,"tile-alignment"],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"]]]]],["q2-textarea",[[1,"q2-textarea",{"value":[1025],"label":[513],"hideLabel":[516,"hide-label"],"hideMessages":[516,"hide-messages"],"optional":[516],"placeholder":[513],"disabled":[516],"readonly":[516],"spellcheck":[516],"maxlength":[1538],"rows":[514],"cols":[514],"resize":[513],"errors":[16],"hints":[16],"hasFocus":[32],"downParams":[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]],["q2-carousel-pane",[[4,"q2-carousel-pane",{"index":[2],"siblingCount":[2,"sibling-count"],"isActivePane":[516,"is-active-pane"],"label":[513]}]]],["q2-loading-element",[[0,"q2-loading-element",{"shape":[513],"width":[513],"height":[513],"borderRadius":[513,"border-radius"]}]]],["q2-loc",[[1,"q2-loc",{"value":[513],"substitutions":[16]}]]],["q2-optgroup",[[1,"q2-optgroup",{"disabled":[516],"label":[513],"hidden":[32]}]]],["q2-radio",[[4,"q2-radio",{"label":[513],"hideLabel":[516,"hide-label"],"value":[513],"disabled":[516],"checked":[516],"name":[513],"ariaLabel":[513,"aria-label"],"groupDisabled":[4,"group-disabled"],"groupTileLayout":[4,"group-tile-layout"]},[[0,"click","onHostClick"],[0,"focus","delegateFocus"]]]]],["q2-stepper-pane",[[1,"q2-stepper-pane",{"label":[513],"description":[513],"isActive":[516,"is-active"]}]]],["q2-tab-pane",[[1,"q2-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2]}]]],["tecton-tab-pane",[[1,"tecton-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2],"provided":[516],"url":[513],"moduleId":[513,"module-id"],"minHeight":[513,"min-height"],"authPayload":[16],"showForm":[4,"show-form"],"_showForm":[32]}]]],["q2-dropdown-item",[[1,"q2-dropdown-item",{"disabled":[516],"removable":[516],"separator":[516],"label":[513],"ariaLabel":[513,"aria-label"],"value":[513]},[[0,"focus","onHostElementFocus"]]]]],["q2-message",[[1,"q2-message",{"type":[513],"appearance":[513],"description":[516],"presentToggle":[32],"present":[64]},[[0,"focus","delegateFocus"]]]]],["q2-input",[[1,"q2-input",{"value":[1025],"label":[513],"hideLabel":[516,"hide-label"],"type":[513],"placeholder":[513],"disabled":[516],"autocomplete":[513],"autocorrect":[513],"autocapitalize":[513],"hideMessages":[516,"hide-messages"],"iconLeft":[513,"icon-left"],"iconRight":[513,"icon-right"],"readonly":[516],"clearable":[516],"optional":[516],"formatModifier":[513,"format-modifier"],"maxlength":[1538],"pseudo":[516],"showVisibilityToggle":[516,"show-visibility-toggle"],"textHidden":[1540,"text-hidden"],"ariaControls":[1,"aria-controls"],"role":[1],"ariaOwns":[1,"aria-owns"],"ariaLabel":[513,"aria-label"],"ariaHaspopup":[1,"aria-haspopup"],"ariaExpanded":[4,"aria-expanded"],"ariaActivedescendant":[8,"aria-activedescendant"],"errors":[16],"hints":[16],"formattedValueObject":[32],"hasFocus":[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]],["click-elsewhere",[[0,"click-elsewhere"]]],["q2-btn_2",[[1,"q2-btn",{"ariaExpanded":[4,"aria-expanded"],"ariaHasPopup":[8,"aria-has-popup"],"ariaControls":[1,"aria-controls"],"ariaSelected":[4,"aria-selected"],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"tabIndex":[2,"tab-index"],"intent":[513],"disabled":[516],"type":[513],"loading":[516],"badge":[516],"active":[516],"fab":[516],"iconPosition":[32]},[[2,"click","disable"],[0,"focus","delegateFocus"]]],[1,"q2-loading",{"type":[513],"shape":[513],"modifiers":[513],"counts":[513],"label":[513],"ariaLabel":[513,"aria-label"],"inline":[516]}]]]], options);
+  return bootstrapLazy([["q2-icon",[[1,"q2-icon",{"type":[513],"label":[513]}]]],["q2-calendar",[[1,"q2-calendar",{"value":[1537],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"optional":[516],"disabled":[516],"readonly":[516],"invalid":[1540],"typeable":[516],"placeholder":[513],"buttonLabel":[513,"button-label"],"disabledMsg":[513,"disabled-msg"],"calendarLabel":[513,"calendar-label"],"disclaimer":[513],"displayFormat":[513,"display-format"],"startDate":[513,"start-date"],"endDate":[513,"end-date"],"cutoffTime":[513,"cutoff-time"],"daysOfWeekChecksum":[514,"days-of-week-checksum"],"popDirection":[513,"pop-direction"],"assume":[513],"errors":[1040],"invalidDates":[16],"validDates":[16],"onsuccess":[16],"dropdownOpen":[32],"keyboardSelection":[32],"typedValue":[32],"dateList":[32],"hintMessage":[32],"hintMessageType":[32]},[[0,"change","defaultChangeHandler"],[0,"error","defaultErrorHandler"],[0,"success","defaultSuccessHandler"],[0,"focus","delegateFocus"]]]]],["q2-dropdown",[[1,"q2-dropdown",{"type":[513],"icon":[513],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"disabled":[516],"popDirection":[513,"pop-direction"],"name":[513],"context":[513],"contextValue":[513,"context-value"],"resolvedType":[513,"resolved-type"],"dropdownOpen":[32]},[[0,"focus","delegateFocus"]]]]],["q2-select",[[1,"q2-select",{"label":[513],"hideLabel":[516,"hide-label"],"value":[1025],"ariaLabel":[513,"aria-label"],"selectedOptions":[1032,"selected-options"],"disabled":[516],"readonly":[516],"invalid":[516],"errors":[16],"multiple":[516],"minRows":[2,"min-rows"],"popDirection":[513,"pop-direction"],"searchable":[516],"multilineOptions":[516,"multiline-options"],"optional":[516],"dropdownOpen":[32],"onlyShowingSelected":[32],"activeOptionId":[32],"searchText":[32],"hasCustomDisplay":[32],"inputFocused":[32],"statusMessage":[32]},[[0,"change","onHostElementChange"],[0,"input","onHostElementInput"],[0,"focus","delegateFocus"],[0,"click","clickHandler"],[0,"keydown","keydownHandler"]]]]],["q2-editable-field",[[1,"q2-editable-field",{"value":[1537],"editing":[1540],"label":[1537],"hideLabel":[1540,"hide-label"],"ariaLabel":[1537,"aria-label"],"type":[513],"formatModifier":[513,"format-modifier"],"truncated":[513],"maxlength":[514],"persistentLabel":[516,"persistent-label"],"hints":[16],"errors":[16]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"]]]]],["q2-pagination",[[1,"q2-pagination",{"recordType":[1,"record-type"],"perPage":[2,"per-page"],"total":[514],"page":[1538],"pages":[1538],"recordsOnly":[1540,"records-only"],"pagesOnly":[1540,"pages-only"],"isSmall":[32]},[[0,"focus","onHostElementFocus"]]]]],["q2-carousel",[[4,"q2-carousel",{"autoPlay":[516,"auto-play"],"fullWidthPanes":[516,"full-width-panes"],"hidePagination":[516,"hide-pagination"],"showNavigationArrows":[516,"show-navigation-arrows"],"ariaLabel":[513,"aria-label"],"label":[513],"index":[1538],"universalCarouselOptions":[32],"fullWidthDisplayOptions":[32],"activePaneIndex":[32],"applyFocus":[32],"applyPaginationFocus":[32],"autoPlayInProgress":[32],"compactMode":[32],"carouselWrapperWidth":[32]},[[0,"change","onHostElementChange"],[0,"clickCarouselPane","carouselPaneClicked"],[0,"focus","delegateFocus"]]]]],["q2-section",[[1,"q2-section",{"label":[513],"collapsible":[516],"noCollapseIcon":[516,"no-collapse-icon"],"expanded":[1540],"contentHeight":[32],"hasYieldedHeader":[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["q2-stepper",[[1,"q2-stepper",{"currentStep":[1538,"current-step"],"stepCount":[1026,"step-count"],"lastEnabledStep":[1026,"last-enabled-step"],"scrollEnabled":[32],"showScrollLeft":[32],"showScrollRight":[32]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["q2-tab-container",[[1,"q2-tab-container",{"value":[1537],"type":[513],"name":[513],"color":[513],"noPrint":[516,"no-print"],"hasLeft":[32],"hasRight":[32],"scrollEnabled":[32],"showScrollLeft":[32],"showScrollRight":[32],"tabs":[32]},[[0,"change","defaultChangeHandler"],[9,"resize","onResize"],[0,"focus","onFocus"]]]]],["q2-card",[[1,"q2-card",{"title":[513],"description":[513],"avatarName":[513,"avatar-name"],"avatarInitials":[513,"avatar-initials"],"avatarIcon":[513,"avatar-icon"],"avatarSrc":[513,"avatar-src"],"isSmall":[516,"is-small"],"isTouch":[516,"is-touch"],"url":[513],"target":[513],"isAutoTouch":[32],"isAutoSmall":[32]},[[0,"focus","onHostElementFocus"]]]]],["q2-checkbox",[[1,"q2-checkbox",{"checked":[1540],"type":[513],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"indeterminate":[516],"disabled":[516],"readonly":[516],"value":[513],"name":[513],"hasError":[516,"has-error"],"groupDisabled":[516,"group-disabled"],"alignment":[513]},[[0,"change","defaultChangeHandler"],[0,"focus","delegateFocus"]]]]],["q2-checkbox-group",[[1,"q2-checkbox-group",{"label":[513],"value":[1040],"disabled":[516],"readonly":[516],"optional":[516],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"]]]]],["q2-option",[[1,"q2-option",{"role":[513],"tabindex":[513],"display":[513],"value":[513],"disabled":[516],"optionId":[513,"option-id"],"disabledGroup":[516,"disabled-group"],"selected":[516],"hidden":[516],"multiline":[516],"active":[516],"_multiSelectHidden":[516,"_multiselecthidden"]}]]],["q2-radio-group",[[1,"q2-radio-group",{"label":[513],"value":[1025],"disabled":[516],"name":[513],"optional":[516],"readonly":[516],"tilelayout":[516],"tileAlignment":[513,"tile-alignment"],"hasError":[516,"has-error"]},[[0,"change","onHostElementChange"],[0,"focus","delegateFocus"],[0,"keydown","keydownHandler"]]]]],["q2-textarea",[[1,"q2-textarea",{"value":[1025],"label":[513],"hideLabel":[516,"hide-label"],"hideMessages":[516,"hide-messages"],"optional":[516],"placeholder":[513],"disabled":[516],"readonly":[516],"spellcheck":[516],"maxlength":[1538],"rows":[514],"cols":[514],"resize":[513],"errors":[16],"hints":[16],"hasFocus":[32],"downParams":[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]],["q2-carousel-pane",[[4,"q2-carousel-pane",{"index":[2],"siblingCount":[2,"sibling-count"],"isActivePane":[516,"is-active-pane"],"label":[513]}]]],["q2-loading-element",[[0,"q2-loading-element",{"shape":[513],"width":[513],"height":[513],"borderRadius":[513,"border-radius"]}]]],["q2-loc",[[1,"q2-loc",{"value":[513],"substitutions":[16]}]]],["q2-optgroup",[[1,"q2-optgroup",{"disabled":[516],"label":[513],"hidden":[32]}]]],["q2-radio",[[1,"q2-radio",{"label":[513],"hideLabel":[516,"hide-label"],"value":[513],"disabled":[516],"checked":[516],"name":[513],"ariaLabel":[513,"aria-label"],"groupDisabled":[4,"group-disabled"],"groupReadonly":[4,"group-readonly"],"groupTileLayout":[4,"group-tile-layout"]},[[0,"click","onHostClick"],[0,"focus","delegateFocus"]]]]],["q2-stepper-pane",[[1,"q2-stepper-pane",{"label":[513],"description":[513],"isActive":[516,"is-active"]}]]],["q2-tab-pane",[[1,"q2-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2]}]]],["tecton-tab-pane",[[1,"tecton-tab-pane",{"value":[513],"label":[513],"name":[513],"selected":[516],"index":[2],"guid":[2],"provided":[516],"url":[513],"moduleId":[513,"module-id"],"minHeight":[513,"min-height"],"authPayload":[16],"showForm":[4,"show-form"],"_showForm":[32]}]]],["q2-dropdown-item",[[1,"q2-dropdown-item",{"disabled":[516],"removable":[516],"separator":[516],"label":[513],"ariaLabel":[513,"aria-label"],"value":[513]},[[0,"focus","onHostElementFocus"]]]]],["q2-avatar",[[1,"q2-avatar",{"name":[513],"initials":[513],"src":[513],"icon":[1],"badSrc":[32]}]]],["q2-message",[[1,"q2-message",{"type":[513],"appearance":[513],"description":[516],"presentToggle":[32],"present":[64]},[[0,"focus","delegateFocus"]]]]],["click-elsewhere",[[0,"click-elsewhere"]]],["q2-btn_2",[[1,"q2-btn",{"ariaExpanded":[4,"aria-expanded"],"ariaHasPopup":[8,"aria-has-popup"],"ariaControls":[1,"aria-controls"],"ariaSelected":[4,"aria-selected"],"label":[513],"hideLabel":[516,"hide-label"],"ariaLabel":[513,"aria-label"],"tabIndex":[2,"tab-index"],"intent":[513],"disabled":[516],"type":[513],"loading":[516],"badge":[516],"active":[516],"fab":[516],"iconPosition":[32]},[[2,"click","disable"],[0,"focus","delegateFocus"]]],[1,"q2-loading",{"type":[513],"shape":[513],"modifiers":[513],"counts":[513],"label":[513],"ariaLabel":[513,"aria-label"],"inline":[516]}]]],["q2-input",[[1,"q2-input",{"value":[1025],"label":[513],"hideLabel":[516,"hide-label"],"type":[513],"placeholder":[513],"disabled":[516],"autocomplete":[513],"autocorrect":[513],"autocapitalize":[513],"hideMessages":[516,"hide-messages"],"iconLeft":[513,"icon-left"],"iconRight":[513,"icon-right"],"readonly":[516],"clearable":[516],"optional":[516],"min":[514],"max":[514],"formatModifier":[513,"format-modifier"],"maxlength":[1538],"pseudo":[516],"showVisibilityToggle":[516,"show-visibility-toggle"],"textHidden":[1540,"text-hidden"],"ariaControls":[1,"aria-controls"],"role":[1],"ariaOwns":[1,"aria-owns"],"ariaLabel":[513,"aria-label"],"ariaHaspopup":[1,"aria-haspopup"],"ariaExpanded":[4,"aria-expanded"],"ariaActivedescendant":[8,"aria-activedescendant"],"current":[1],"errors":[16],"hints":[16],"formattedValueObject":[32],"hasFocus":[32]},[[0,"focus","onHostElementFocus"],[0,"change","onHostElementChange"]]]]]], options);
   });
 };
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-be8376c0.js';
-import { i as icons } from './icons-3ee662ea.js';
+import { i as icons } from './icons-6a143c2f.js';
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.avatar-img{object-fit:cover;height:var(--tct-avatar-img-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-img-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-img-br, 50%);background-color:var(--tct-avatar-bg, #9e9e9e)}.avatar-initials{height:var(--tct-avatar-height, 44px);width:var(--tct-avatar-width, 44px);background-color:var(--tct-avatar-bg, var(--t-gray-8, #9e9e9e));border-radius:var(--tct-avatar-br, 50%)}.size-1{--tct-avatar-font-size:var(--tct-avatar-size-1, 60px)}.size-2{--tct-avatar-font-size:var(--tct-avatar-size-2, 50px)}.size-3{--tct-avatar-font-size:var(--tct-avatar-size-3, 40px)}.size-4{--tct-avatar-font-size:var(--tct-avatar-size-4, 30px)}text{fill:var(--tct-avatar-color, #ffffff);font-weight:var(--tct-avatar-font-weight, 200);font-size:var(--tct-avatar-font-size, 40px)}.fallback{height:var(--tct-avatar-fallback-height, var(--tct-avatar-height, 44px));width:var(--tct-avatar-fallback-width, var(--tct-avatar-width, 44px));border-radius:var(--tct-avatar-fallback-br, var(--tct-avatar-img-br, 50%));background-color:var(--tct-avatar-fallback-bg, var(--tct-avatar-bg, #9e9e9e));display:flex;align-items:center;justify-content:center}q2-icon{--t-icon-size:var(--tct-avatar-fallback-icon-size, 65%);--t-icon-fill:var(--tct-avatar-fallback-fill, transparent);--t-icon-stroke-primary:var(--tct-avatar-fallback-stroke-primary, currentcolor);--t-icon-stroke-secondary:var(--tct-avatar-fallback-stroke-secondary, currentcolor);color:var(--tct-avatar-fallback-color, var(--tct-avatar-color, var(--t-base, #ffffff)));width:var(--t-icon-size);height:var(--t-icon-size)}";
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-be8376c0.js';
-import { h as handleAriaLabel, o as overrideFocus, i as isEventFromElement, l as loc } from './index-ec6660af.js';
+import { h as handleAriaLabel, o as overrideFocus, i as isEventFromElement, l as loc } from './index-0e13a57f.js';
 import { s as shapes } from './shapes-81c11dfe.js';
 
 const stylesCss$1 = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([hidden]){display:none}:host([block]){display:block;width:100%}:host{--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),\n      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),\n      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));--comp-btn-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)));--comp-btn-secondary-box-shadow:var(--tct-btn-secondary-box-shadow, var(--t-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-secondary-hover-box-shadow:var(--tct-btn-secondary-hover-box-shadow, var(--t-btn-secondary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow)));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-neutral-bg:var(--tct-btn-neutral-bg, transparent);--comp-btn-neutral-font-color:var(--tct-btn-neutral-font-color, var(--t-btn-neutral-font-color, var(--t-button-default-font-color, #2e2e2e)));--comp-btn-neutral-box-shadow:var(--tct-btn-neutral-box-shadow, var(--t-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow)));--comp-btn-neutral-hover-box-shadow:var(--tct-btn-neutral-hover-box-shadow, var(--t-btn-neutral-hover-box-shadow, var(--comp-btn-neutral-fallback-hover-box-shadow)))}button{margin:var(--tct-scale-0, var(--app-scale-0, 0));padding:var(--tct-scale-0, var(--app-scale-0, 0));display:inline-block;width:100%;border:0;background:transparent;box-shadow:none;border-radius:0;font-weight:400;color:inherit;cursor:pointer;transition:var(--comp-btn-tween);transition-property:background, color, box-shadow, fill, border-color, border-width;outline:0}button:disabled{opacity:var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}:host([size=\"1\"]) button{padding:var(--tct-scale-1, var(--app-scale-1, 5px))}:host([color]:not([size])) button,:host([intent]:not([size])) button{padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2, 10px))))}:host([size=\"2\"]) button{padding:var(--tct-scale-2, var(--app-scale-2, 10px))}:host([size=\"3\"]) button{padding:var(--tct-scale-3, var(--app-scale-3, 15px))}:host([size=\"4x\"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size=\"4\"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([color]) button,:host([intent]) button{border-style:solid;font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit))}:host([color=primary]) button,:host([intent=workflow-primary]) button{background:var(--comp-btn-primary-bg);color:var(--comp-btn-primary-font-color);border-color:var(--tct-btn-primary-border-color, var(--t-btn-primary-border-color, transparent));border-width:var(--tct-btn-primary-border-width, var(--t-btn-primary-border-width, 0));border-radius:var(--tct-btn-primary-border-radius, var(--t-btn-primary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));box-shadow:var(--comp-btn-primary-box-shadow);font-weight:var(--tct-btn-primary-font-weight, var(--t-btn-primary-font-weight, 600));text-transform:var(--tct-btn-primary-text-transform, var(--t-btn-primary-text-transform, none));letter-spacing:var(--tct-btn-primary-letter-spacing, var(--t-btn-primary-letter-spacing, normal))}:host([color=primary]) button:enabled:hover,:host([color=primary]) button:enabled:focus,:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:active{background:var(--tct-btn-primary-hover-bg, var(--t-btn-primary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));color:var(--tct-btn-primary-hover-font-color, var(--t-btn-primary-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-primary-hover-border-color, var(--t-btn-primary-hover-border-color, var(--tct-btn-primary-border-color, var(--t-btn-primary-border-color, transparent))))}:host([color=primary]) button:hover:enabled,:host([color=primary]) button:active:enabled,:host([intent=workflow-primary]) button:hover:enabled,:host([intent=workflow-primary]) button:active:enabled{box-shadow:var(--comp-btn-primary-hover-box-shadow)}:host([color=primary]) button:focus,:host([intent=workflow-primary]) button:focus{box-shadow:var(--tct-global-focus, var(--const-global-focus, var(--comp-btn-primary-hover-box-shadow, 0 0 0 2px #33b4ff)))}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{background:var(--tct-btn-primary-disabled-bg, var(--t-btn-primary-disabled-bg, var(--comp-btn-primary-bg)));color:var(--tct-btn-primary-disabled-font-color, var(--t-btn-primary-disabled-font-color, var(--comp-btn-primary-font-color)));box-shadow:var(--tct-btn-primary-disabled-box-shadow, var(--t-btn-primary-disabled-box-shadow, var(--comp-btn-primary-box-shadow)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{background:var(--comp-btn-secondary-bg);color:var(--comp-btn-secondary-font-color, var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--tct-white, var(--app-white, #ffffff)))));border-color:var(--tct-btn-secondary-border-color, var(--t-btn-secondary-border-color, transparent));border-width:var(--tct-btn-secondary-border-width, var(--t-btn-secondary-border-width, 0));border-radius:var(--tct-btn-secondary-border-radius, var(--t-btn-secondary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));box-shadow:var(--comp-btn-secondary-box-shadow);font-weight:var(--tct-btn-secondary-font-weight, var(--t-btn-secondary-font-weight, 600));text-transform:var(--tct-btn-secondary-text-transform, var(--t-btn-secondary-text-transform, none));letter-spacing:var(--tct-btn-secondary-letter-spacing, var(--t-btn-secondary-letter-spacing, normal))}:host([color=secondary]) button:enabled:hover,:host([color=secondary]) button:enabled:focus,:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:active{background:var(--tct-btn-secondary-hover-bg, var(--t-btn-secondary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));color:var(--tct-btn-secondary-hover-font-color, var(--t-btn-secondary-hover-font-color, var(--t-button-default-hover-font-color, var(--tct-white, var(--app-white, #ffffff)))));border-color:var(--tct-btn-secondary-hover-border-color, var(--t-btn-secondary-hover-border-color, var(--tct-btn-secondary-border-color, var(--t-btn-secondary-border-color, transparent))))}:host([color=secondary]) button:hover:enabled,:host([color=secondary]) button:active:enabled,:host([intent=workflow-secondary]) button:hover:enabled,:host([intent=workflow-secondary]) button:active:enabled{box-shadow:var(--comp-btn-secondary-hover-box-shadow)}:host([color=secondary]) button:focus,:host([intent=workflow-secondary]) button:focus{box-shadow:var(--tct-global-focus, var(--const-global-focus, var(--comp-btn-secondary-hover-box-shadow)))}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{background:var(--tct-btn-secondary-disabled-bg, var(--t-btn-secondary-disabled-bg, var(--comp-btn-secondary-bg)));color:var(--tct-btn-secondary-disabled-font-color, var(--t-btn-secondary-disabled-font-color, var(--comp-btn-secondary-font-color)));box-shadow:var(--tct-btn-secondary-disabled-box-shadow, var(--t-btn-secondary-disabled-box-shadow, var(--comp-btn-secondary-box-shadow)))}:host([intent=neutral]) button{background:var(--comp-btn-neutral-bg, var(--tct-btn-neutral-bg, var(--t-btn-neutral-bg, transparent)));color:var(--comp-btn-neutral-font-color, var(--tct-btn-neutral-font-color, var(--t-btn-neutral-font-color, var(--tct-gray-1, var(--t-gray-1, var(--tct-black, var(--app-black, #0d0d0d)))))));border-color:var(--tct-btn-neutral-border-color, var(--t-btn-neutral-border-color, transparent));border-width:var(--tct-btn-neutral-border-width, var(--t-btn-neutral-border-width, 0));border-radius:var(--tct-btn-neutral-border-radius, var(--t-btn-neutral-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));box-shadow:var(--comp-btn-neutral-box-shadow);font-weight:var(--tct-btn-neutral-font-weight, var(--t-btn-neutral-font-weight, 600));text-transform:var(--tct-btn-neutral-text-transform, var(--t-btn-neutral-text-transform, none));letter-spacing:var(--tct-btn-neutral-letter-spacing, var(--t-btn-neutral-letter-spacing, normal))}:host([intent=neutral]) button:enabled:hover,:host([intent=neutral]) button:enabled:focus,:host([intent=neutral]) button:enabled:active{background:var(--tct-btn-neutral-hover-bg, var(--t-btn-neutral-hover-bg, transparent));color:var(--tct-btn-neutral-hover-font-color, var(--t-btn-neutral-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));border-color:var(--tct-btn-neutral-hover-border-color, var(--t-btn-neutral-hover-border-color, var(--tct-btn-neutral-border-color, var(--t-btn-neutral-border-color, transparent))))}:host([intent=neutral]) button:hover:enabled,:host([intent=neutral]) button:active:enabled{box-shadow:var(--comp-btn-neutral-hover-box-shadow)}:host([intent=neutral]) button:focus{box-shadow:var(--tct-global-focus, var(--const-global-focus, var(--comp-btn-neutral-hover-box-shadow)))}:host([intent=neutral]) button:disabled{background:var(--tct-btn-neutral-disabled-bg, var(--t-btn-neutral-disabled-bg, var(--comp-btn-neutral-bg)));color:var(--tct-btn-neutral-disabled-font-color, var(--t-btn-neutral-disabled-font-color, var(--comp-btn-neutral-font-color)));box-shadow:var(--tct-btn-neutral-disabled-box-shadow, var(--comp-btn-neutral-box-shadow))}:host button.icon-only{width:var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));height:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));border-radius:var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, 0))}:host button.icon-only:hover,:host button.icon-only:focus{background-color:var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))}:host(:not([intent])[active]) button.icon-only{background-color:var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))}:host(:not([intent])) button.icon-only:hover *,:host(:not([intent])) button.icon-only:focus *,:host(:not([intent])[active]) button.icon-only *{color:var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))))}:host([badge]) button{padding:var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));font-size:var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct---btn-font-size, var(--t---btn-font-size, inherit))));border-radius:var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));background-color:var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent));color:var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))}:host([badge]) button ::slotted(q2-icon){--tct-icon-size:1em}:host([badge]:hover) button:enabled{background-color:var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));color:var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))))}:host(.selected[badge]) button,:host([active][badge]) button{background-color:var(--tct-btn-badge-active-bg, var(--t-btn-badge-active-bg, var(--comp-btn-primary-bg)));color:var(--tct-btn-badge-active-font-color, var(--t-btn-badge-active-font-color, var(--comp-btn-primary-font-color)))}div{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1, 5px)}:host([loading]) .icon-right div{flex-direction:row-reverse}q2-loading{--tct-loading-primary-color:currentColor;--tct-loading-secondary-color:currentColor;--tct-loading-spinner-size:24px}:host([loading]) ::slotted(q2-icon){display:none}:host([loading]) button{pointer-events:none}";

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
-import { l as loc, s as setPopProperties, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement } from './index-ec6660af.js';
+import { l as loc, s as setPopProperties, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement } from './index-0e13a57f.js';
 
 function toInteger(dirtyNumber) {
   if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
@@ -3158,7 +3158,7 @@ const Q2Calendar = class {
       }
     };
     this.openCalendar = () => {
-      if (!this.dropdownOpen) {
+      if (!this.readonly && !this.dropdownOpen) {
         this.selectedMonthYear = setupMonthYear(this.dateValue);
         this.dateList = this.buildDateList(this.selectedMonthYear);
         this.dropdownOpen = true;
@@ -3167,6 +3167,8 @@ const Q2Calendar = class {
       }
     };
     this.toggleCalendar = () => {
+      if (this.readonly)
+        return;
       this.dropdownOpen = !this.dropdownOpen;
       this.scheduledAfterRender.push(this.resizeIframe);
       if (this.dropdownOpen) {
@@ -3665,7 +3667,7 @@ const Q2Calendar = class {
     });
   }
   calendarField() {
-    return (h("q2-input", { ref: el => (this.inputField = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: this.dropdownOpen, errors: (this.localizedErrors.length > 0 && this.localizedErrors) ||
+    return (h("q2-input", { ref: el => (this.inputField = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: this.dropdownOpen, errors: (this.localizedErrors.length > 0 && this.localizedErrors) ||
         (this.invalid && ['tecton.element.calendar.invalid']) ||
         [], onClick: this.onInputClick, onChange: this.onInputChange, onInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, "icon-right": "calendar", "format-modifier": this.isTypeable ? this.formatModifier : '', pseudo: !this.isTypeable, type: "date", "hide-messages": true, "test-id": "inputAndCalendarToggle" }));
   }