q2-tecton-elements 1.11.0-alpha.0 → 1.11.0

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

@@ -0,0 +1,120 @@
+* {
+  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 {
+  text-align: right;
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.container {
+  display: inline-flex;
+  column-gap: var(--tct-pagination-column-gap, var(--t-pagination-column-gap, var(--app-scale-2x, 10px)));
+  align-items: center;
+  height: var(--tct-pagination-height, var(--t-pagination-height, 44px));
+}
+
+.btn-group {
+  display: flex;
+  gap: var(--tct-pagination-btn-gap, var(--t-pagination-btn-gap, 0));
+}
+
+.description,
+.controls {
+  white-space: nowrap;
+}
+
+.controls {
+  display: grid;
+  grid-template-columns: auto 50px auto;
+  align-items: center;
+  gap: var(--tct-pagination-controls-gap, var(--t-pagination-controls-gap, var(--app-scale-1x, 5px)));
+}
+.controls[hidden] {
+  display: none;
+}
+
+.input-wrapper {
+  height: var(--tct-pagination-height, var(--t-pagination-height, 44px));
+  display: flex;
+  align-items: center;
+}
+
+q2-icon {
+  --tct-icon-size: var(--tct-pagination-icon-size, var(--t-pagination-icon-size, 12px));
+  color: var(--tct-pagination-icon-color, var(--t-pagination-icon-color, var(--t-text, #4d4d4d)));
+}
+
+q2-input {
+  --tct-input-margin-top: 0;
+  --tct-input-margin-bottom: 0;
+  --tct-input-height: var(--tct-pagination-input-height, var(--t-pagination-input-height, 30px));
+  --tct-input-min-height: var(--tct-input-height);
+  --tct-input-align: center;
+}

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

@@ -5,10 +5,15 @@ export class Q2Radio {
     this.disabled = false;
     this.checked = false;
     this.groupDisabled = false;
+    this.groupReadonly = false;
     this.groupTileLayout = false;
     this.id = `radio-${createGuid()}`;
     this.inputChange = (event) => {
       event.stopPropagation();
+      if (this.groupReadonly) {
+        event.preventDefault();
+        return false;
+      }
       this.change.emit({ value: this.value });
     };
   }
@@ -36,7 +41,7 @@ export class Q2Radio {
   }
   render() {
     return (h("div", { class: this.groupTileLayout ? 'radio-tile' : 'radio-container' },
-      h("input", { ref: el => (this.inputField = el), class: "sr", id: this.id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, "test-id": "q2RadioInnerRadioBox" }),
+      h("input", { ref: el => (this.inputField = el), class: "sr", id: this.id, type: "radio", name: this.name, value: this.value, disabled: this.disabled || this.groupDisabled, checked: this.checked, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, onChange: this.inputChange, onClick: this.inputChange, "test-id": "q2RadioInnerRadioBox" }),
       h("label", { htmlFor: this.id, "test-id": "radioButton" },
         !this.groupTileLayout && (h("svg", { viewBox: "0 0 18 18" },
           h("circle", { stroke: "none", fill: "none", cx: "9", cy: "9", r: "8" }),
@@ -193,6 +198,24 @@ export class Q2Radio {
       "reflect": false,
       "defaultValue": "false"
     },
+    "groupReadonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "group-readonly",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "groupTileLayout": {
       "type": "boolean",
       "mutable": false,

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

@@ -1,4 +1,4 @@
-import { Component, Prop, Element, h, Listen, Event, Watch } from '@stencil/core';
+import { Component, Prop, Element, h, Listen, Event, Watch, Fragment } from '@stencil/core';
 import { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';
 export class Q2RadioGroup {
   constructor() {
@@ -10,10 +10,13 @@ export class Q2RadioGroup {
       this.valueUpdated();
       this.nameUpdated();
       this.disabledUpdated();
+      this.readonlyUpdated();
       this.tileLayoutUpdated();
     };
     this.onInnerRadioChange = (event) => {
       event.stopImmediatePropagation();
+      if (this.readonly)
+        return;
       this.change.emit({ value: event.detail.value });
     };
   }
@@ -44,6 +47,10 @@ export class Q2RadioGroup {
       radio.groupDisabled = this.disabled;
     });
   }
+  readonlyUpdated() {
+    const readonly = this.readonly;
+    this.radioElements.forEach(radio => (radio.groupReadonly = readonly));
+  }
   tileLayoutUpdated() {
     this.radioElements.forEach(radio => {
       radio.groupTileLayout = this.tilelayout;
@@ -67,11 +74,15 @@ export class Q2RadioGroup {
     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;
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        sign = -1;
+        break;
+      case 'ArrowRight':
+      case 'ArrowDown':
+        sign = 1;
+        break;
     }
     if (index === -1 || sign === 0) {
       return;
@@ -79,19 +90,31 @@ export class Q2RadioGroup {
     index += sign;
     index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);
     event.preventDefault();
-    this.value = this.radioElements[index].value;
+    if (!this.readonly) {
+      this.value = this.radioElements[index].value;
+    }
     this.radioElements[index].dispatchEvent(new FocusEvent('focus'));
   }
+  labelDOM() {
+    const { label, optional, readonly } = this;
+    let helpText = '';
+    if (readonly) {
+      helpText = h("span", { class: "optional-tag" }, loc('tecton.element.input.readonly'));
+    }
+    else if (optional) {
+      helpText = h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'));
+    }
+    return (h(Fragment, null,
+      label && loc(label),
+      !!helpText && h("span", { class: "optional-tag" }, helpText)));
+  }
   render() {
+    const showLabel = this.label || this.optional || this.readonly;
     return (h("div", null,
-      this.label || this.optional ? (h("div", { class: "group-legend" },
-        this.label && loc(this.label),
-        this.optional ? (h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'))) : (''))) : (''),
-      h("fieldset", { class: `q2-radio-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerRadioChange, "aria-required": `${!this.optional}` },
-        this.label || this.optional ? (h("legend", { class: "sr-only" },
-          this.label && loc(this.label),
-          this.optional ? (h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'))) : (''))) : (''),
-        this.hasError ? (h("div", { class: `error-icon-container ${this.label || this.optional ? '' : 'no-label'}` },
+      showLabel && h("div", { class: "group-legend" }, this.labelDOM()),
+      h("fieldset", { class: `q2-radio-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerRadioChange, "aria-required": `${!this.optional}`, "aria-readonly": `${this.readonly}` },
+        showLabel && h("legend", { class: "sr-only" }, this.labelDOM()),
+        this.hasError ? (h("div", { class: `error-icon-container ${!showLabel && 'no-label'}` },
           h("q2-icon", { class: "h(4) w(4) mrg-b(2)", type: "error" }))) : (''),
         this.inputDom())));
   }
@@ -203,6 +226,23 @@ export class Q2RadioGroup {
       "attribute": "optional",
       "reflect": true
     },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": true
+    },
     "tilelayout": {
       "type": "boolean",
       "mutable": false,
@@ -283,6 +323,9 @@ export class Q2RadioGroup {
     }, {
       "propName": "disabled",
       "methodName": "disabledUpdated"
+    }, {
+      "propName": "readonly",
+      "methodName": "readonlyUpdated"
     }, {
       "propName": "tilelayout",
       "methodName": "tileLayoutUpdated"

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

@@ -4,6 +4,7 @@ export class Q2Select {
   constructor() {
     this.selectedOptions = [];
     this.disabled = false;
+    this.readonly = false;
     this.multiple = false;
     this.minRows = 3;
     this.searchable = false;
@@ -97,9 +98,10 @@ export class Q2Select {
       event.stopPropagation();
       const { activeIndex, searchable, optionElements, multiSelectHeader } = this;
       const { key, shiftKey } = event;
-      if (multiSelectHeader &&
-        multiSelectHeader.contains(event.target) &&
-        [' ', 'Enter'].includes(key))
+      if (this.readonly ||
+        (multiSelectHeader &&
+          multiSelectHeader.contains(event.target) &&
+          [' ', 'Enter'].includes(key)))
         return;
       switch (key) {
         case ' ':
@@ -415,12 +417,16 @@ export class Q2Select {
     activeOption === null || activeOption === void 0 ? void 0 : activeOption.scrollIntoView({ block: 'nearest' });
   }
   openDropdownWithoutActiveElement() {
+    if (this.readonly)
+      return;
     this.activeIndex = undefined;
     this.setActiveOption();
     this.dropdownOpen = true;
     this.scheduledAfterRender.push(this.resizeIframe);
   }
   openDropdownWithActiveElement(activeIndex) {
+    if (this.readonly)
+      return;
     this.activeIndex = activeIndex;
     this.dropdownOpen = true;
     this.setActiveOption();
@@ -530,6 +536,8 @@ export class Q2Select {
     });
   }
   onHostElementChange(event) {
+    if (this.readonly)
+      return;
     if (event.target === this.hostElement && !this.hostElement.onchange) {
       if (this.multiple) {
         this.selectedOptions = event.detail.selectedOptions;
@@ -593,7 +601,7 @@ export class Q2Select {
           this.errors.length > 0 &&
           this.errors.map(error => loc(error))) ||
           (this.invalid && ['tecton.element.select.invalid']) ||
-          [], disabled: this.disabled, optional: this.optional, hideLabel: this.hideLabel, ariaExpanded: this.dropdownOpen, ariaOwns: "dropdown", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: !this.searchable, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler }),
+          [], disabled: this.disabled, optional: this.optional, readonly: this.readonly, hideLabel: this.hideLabel, ariaExpanded: this.dropdownOpen, ariaOwns: "dropdown", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: !this.searchable, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler }),
       h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick },
         h("slot", { name: "q2-select-display" })),
       this.optionsDropdown()));
@@ -726,6 +734,24 @@ export class Q2Select {
       "reflect": true,
       "defaultValue": "false"
     },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "invalid": {
       "type": "boolean",
       "mutable": false,

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

@@ -136,9 +136,9 @@ button {
 .custom-display-content {
   position: absolute;
   bottom: 0;
-  left: calc(var(--tct-scale-2, var(--app-scale-2, 10px)) + 1px);
+  left: calc(var-list(--tct-scale-2, --app-scale-2, 10px) + 1px);
   height: 44px;
-  width: calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3, 15px)));
+  width: calc(100% - 34px - var-list(--tct-scale-3, --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(--tct-scale-3, var(--app-scale-3, 15px)) + 1px);
+  left: calc(var-list(--tct-scale-3, --app-scale-3, 15px) + 1px);
 }
 
 .has-error .custom-display-content {
-  width: calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3, 15px)));
+  width: calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3, 15px));
 }
 
 .dropdown-open .q2-select-dropdown {

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(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));
+  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));
   border: 0;
   border-top: 1px solid var(--comp-bullet-bg);
   height: 0;
@@ -190,11 +190,11 @@ hr {
   color: var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d)));
   font-size: var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px)));
   height: 1.5em;
+  text-overflow: ellipsis;
+  overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 [aria-selected] .step-label {
   font-weight: var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600));
@@ -206,11 +206,11 @@ hr {
 .step-description {
   color: var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));
   font-size: var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));
+  text-overflow: ellipsis;
+  overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
   padding-bottom: 0.2em;
 }
 

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":[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-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"],[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"],"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)}";