q2-tecton-elements 1.10.8 → 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" }),
@@ -46,6 +51,7 @@ export class Q2Radio {
           h("slot", null))))));
   }
   static get is() { return "q2-radio"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["styles.scss"]
   }; }
@@ -192,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/styles.css

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

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

@@ -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;
@@ -63,16 +70,51 @@ export class Q2RadioGroup {
       this.hostElement.querySelector('q2-radio');
     radio === null || radio === void 0 ? void 0 : radio.dispatchEvent(new FocusEvent('focus'));
   }
+  keydownHandler(event) {
+    const currentValue = event.target.getAttribute('value') || this.value;
+    let index = this.radioElements.findIndex(el => el === event.target || el.getAttribute('value') === currentValue);
+    let sign = 0;
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        sign = -1;
+        break;
+      case 'ArrowRight':
+      case 'ArrowDown':
+        sign = 1;
+        break;
+    }
+    if (index === -1 || sign === 0) {
+      return;
+    }
+    index += sign;
+    index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);
+    event.preventDefault();
+    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())));
   }
@@ -184,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,
@@ -264,6 +323,9 @@ export class Q2RadioGroup {
     }, {
       "propName": "disabled",
       "methodName": "disabledUpdated"
+    }, {
+      "propName": "readonly",
+      "methodName": "readonlyUpdated"
     }, {
       "propName": "tilelayout",
       "methodName": "tileLayoutUpdated"
@@ -280,5 +342,11 @@ export class Q2RadioGroup {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "keydown",
+      "method": "keydownHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

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

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

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

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

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

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

@@ -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/components/q2-tab-container/index.js

@@ -97,6 +97,8 @@ export class Q2TabContainer {
       return focusedTab;
     };
     this.checkScrollState = () => {
+      if (!this.listElement)
+        return;
       const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
       this.scrollEnabled = scrollWidth > clientWidth;
       this.showScrollLeft = !!scrollLeft;
@@ -164,7 +166,7 @@ export class Q2TabContainer {
     overrideFocus(this.hostElement);
     const index = this.tabs.findIndex(el => el.value === this.value);
     this.scheduledAfterRender.push(() => {
-      const tab = this.moveFocus(Math.max(index, 0), false);
+      const tab = this.moveFocus(Math.max(index, 0));
       this.value = tab.dataset.value;
       tab.blur();
     });