q2-tecton-elements 1.12.1 → 1.13.1

package/dist/collection/components/q2-input/formatting/postal.js

@@ -195,7 +195,7 @@ const postalCodeFormats = {
   WF: '986##',
   ZM: '#####',
   US: '#####',
-  'US+4': '#####-####'
+  'US+4': '#####-####',
 };
 export default function formatPostalCode(value, modifier = 'US') {
   const mask = postalCodeFormats[modifier];

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

@@ -1,5 +1,5 @@
 import { Component, Prop, Element, State, Event, h, Watch, Listen } from '@stencil/core';
-import { createGuid, labelDOM, loc, messagesDOM, setMessageHeight, handleAriaLabel, overrideFocus, isEventFromElement } from 'src/utils';
+import { createGuid, labelDOM, loc, messagesDOM, setMessageHeight, handleAriaLabel, overrideFocus, isEventFromElement, } from 'src/utils';
 import formatCurrency from './formatting/currency';
 import formatPhoneNumber from './formatting/phone';
 import formatSSN from './formatting/ssn';
@@ -59,7 +59,7 @@ export class Q2Input {
       const eventDetail = {
         value: '',
         formattedValue: '',
-        minFormattedLength: this.formattedValueObject.minFormattedLength
+        minFormattedLength: this.formattedValueObject.minFormattedLength,
       };
       this.input.emit(eventDetail);
       this.change.emit(eventDetail);
@@ -98,17 +98,17 @@ export class Q2Input {
       percentage: formatPercentage,
       postal: formatPostalCode,
       date: formatDate,
-      'credit-card': formatCreditCard.format
+      'credit-card': formatCreditCard.format,
     };
     if (formattingFunctions[this.type]) {
       return formattingFunctions[this.type](value, this.formatModifier, valueChangedFromProperty);
     }
     return {
-      value: value,
+      value,
       formattedValue: value,
       fullyFormattedValue: value,
       formattingCharacterCount: 0,
-      unformattedValue: value
+      unformattedValue: value,
     };
   }
   get canClear() {
@@ -145,7 +145,7 @@ export class Q2Input {
       'percentage',
       'postal',
       'date',
-      'credit-card'
+      'credit-card',
     ];
     return maskedTypes.includes(this.type);
   }
@@ -180,7 +180,7 @@ export class Q2Input {
       percentage: 'tel',
       postal: 'tel',
       date: 'tel',
-      'credit-card': 'tel'
+      'credit-card': 'tel',
     };
     if (['password', 'text'].includes(this.type) && this.textHidden) {
       return 'password';
@@ -260,15 +260,14 @@ export class Q2Input {
   handleDataInput(newFormattedValue) {
     if (this.maxlength === undefined ||
       newFormattedValue.unformattedValue.length <= this.maxlength ||
-      newFormattedValue.unformattedValue.length <=
-        this.formattedValueObject.unformattedValue.length) {
+      newFormattedValue.unformattedValue.length <= this.formattedValueObject.unformattedValue.length) {
       this.formattedValueObject = newFormattedValue;
     }
     else if (this.maxlength) {
       newFormattedValue = this.getFormattedValue(newFormattedValue.unformattedValue.substring(0, this.maxlength), false);
       this.formattedValueObject = newFormattedValue;
     }
-    //ORDER IMPORTANT:  calculate cursor position -> set value -> set cursor position
+    // ORDER IMPORTANT:  calculate cursor position -> set value -> set cursor position
     const cursorPosition = this.calculateCursorPositionOnInput();
     this.inputField.value = this.formattedValueObject.formattedValue;
     this.input.emit(Object.assign({ value: this.formattedValueObject.value, formattedValue: this.formattedValueObject.fullyFormattedValue, minFormattedLength: this.formattedValueObject.minFormattedLength }, (this.formattedValueObject.type && { type: this.formattedValueObject.type })));
@@ -281,6 +280,7 @@ export class Q2Input {
       this.inputDOM(),
       messagesDOM(this)));
   }
+  /* tslint:disable:cyclomatic-complexity */
   inputDOM() {
     return (h("div", { class: "input-container" },
       h("div", { class: "input-icons-container-left" },
@@ -297,6 +297,7 @@ export class Q2Input {
         this.iconRight && !this.formattedValueObject.suffix && (h("q2-icon", { type: this.iconRight, class: "icon-right" })),
         this.hasError && this.type !== 'currency' && (h("q2-icon", { type: "error", class: "icon-error" })))));
   }
+  /* tslint:enable:cyclomatic-complexity */
   pseudoInputDOM() {
     const showPlaceholder = !this.value && !!this.placeholder;
     let ariaLabelSuffix = '';
@@ -307,19 +308,19 @@ export class Q2Input {
       ariaLabelSuffix = loc('tecton.element.input.readonly');
     }
     return (h("div", { class: "pseudo-input" },
-      h("button", { class: "input-field", type: "button", id: this.inputId, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": `${this.value}, ${(this.label && loc(this.label)) ||
-          ''}${ariaLabelSuffix}`, role: (this.role && `${this.role}`) || undefined, disabled: !!this.disabled, "test-id": "q2InputInnerClearButton" },
+      h("button", { class: "input-field", type: "button", id: this.inputId, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": `${this.value}, ${(this.label && loc(this.label)) || ''}${ariaLabelSuffix}`, role: (this.role && `${this.role}`) || undefined, disabled: !!this.disabled, "test-id": "q2InputInnerClearButton" },
         h("span", { class: showPlaceholder ? 'placeholder-text' : '' }, showPlaceholder ? this.placeholder : this.value))));
   }
   calculateCursorPositionOnInput() {
     const input = this.inputField;
     const formattedLength = this.formattedValueObject.formattedValue.length;
     const currentValueLength = input.value.length;
+    const defaultPosition = this.type === 'currency' ? formattedLength : 0;
     return {
-      startingPosition: (input && input.selectionStart) || formattedLength,
+      startingPosition: (input && input.selectionStart) || defaultPosition,
       valueLength: formattedLength,
       previousValueLength: input && currentValueLength,
-      hasSelection: false
+      hasSelection: false,
     };
   }
   calculateCursorPositionOnFocus() {
@@ -330,16 +331,14 @@ export class Q2Input {
       startingPosition,
       valueLength,
       previousValueLength: valueLength,
-      hasSelection: getSelection().toString().length > 0
+      hasSelection: getSelection().toString().length > 0,
     };
   }
   setCursorPosition(cursorData) {
     if (this.canSetSelection && !cursorData.hasSelection) {
       const input = this.inputField;
       const { valueLength, previousValueLength, startingPosition } = cursorData;
-      if (startingPosition === valueLength &&
-        valueLength >= previousValueLength &&
-        this.type === 'currency') {
+      if (startingPosition === valueLength && valueLength >= previousValueLength && this.type === 'currency') {
         input.setSelectionRange(valueLength, valueLength);
       }
       else {
@@ -822,11 +821,11 @@ export class Q2Input {
       "reflect": false
     },
     "ariaExpanded": {
-      "type": "boolean",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,

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

@@ -254,8 +254,13 @@ q2-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: calc( var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) - var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px)) );
-  height: calc( var(--tct-input-height, var(--t-input-height, 44px)) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) - var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px)) );
+  min-height: calc(
+        var(--comp-input-min-height) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) -
+            var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px))
+    );
+  height: calc(
+        var(--tct-input-height, var(--t-input-height, 44px)) - var(--tct-input-focus-border-top-width, var(--t-input-focus-border-top-width, 1px)) - var(--tct-input-focus-border-bottom-width, var(--t-input-focus-border-bottom-width, 1px))
+    );
   font-size: var(--tct-input-prefix-font-size, var(--t-input-prefix-font-size, inherit));
   color: var(--tct-input-prefix-font-color, var(--t-input-prefix-font-color, inherit));
   background-color: var(--tct-input-prefix-bg, var(--t-input-prefix-bg, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))));
@@ -263,15 +268,23 @@ q2-icon {
 }
 
 .input-prefix {
-  border-top-left-radius: calc( var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px)) );
-  border-bottom-left-radius: calc( var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px)) );
+  border-top-left-radius: calc(
+        var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))
+    );
+  border-bottom-left-radius: calc(
+        var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))
+    );
   pointer-events: none;
   /* used to allow iOS voiceover to display keyboard in input TCT-1194 */
 }
 
 .input-suffix {
-  border-top-right-radius: calc( var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px)) );
-  border-bottom-right-radius: calc( var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px)) );
+  border-top-right-radius: calc(
+        var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))
+    );
+  border-bottom-right-radius: calc(
+        var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))
+    );
 }
 
 .icon-error {

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

@@ -21,9 +21,9 @@ export class Q2Loading {
     const loaderMap = {
       default: this.spinner,
       spinner: this.spinner,
-      skeleton: this.skeletonLoader
+      skeleton: this.skeletonLoader,
     };
-    return loaderMap[this.type] || loaderMap['default'];
+    return loaderMap[this.type] || loaderMap.default;
   }
   get modifiersSet() {
     if (this.type !== 'skeleton' || !this.modifiers) {
@@ -44,9 +44,9 @@ export class Q2Loading {
   get spinnerShape() {
     const spinnerMap = {
       default: this.halfCircleSpinner,
-      'half-circle': this.halfCircleSpinner
+      'half-circle': this.halfCircleSpinner,
     };
-    return spinnerMap[this.type] || spinnerMap['default'];
+    return spinnerMap[this.type] || spinnerMap.default;
   }
   get localizedLabel() {
     return loc(this.label || 'tecton.element.loading.ariaLabel');

package/dist/collection/components/q2-loading/skeleton/q2-loading-element/index.js

@@ -6,7 +6,7 @@ export class Q2Loading {
       ? atoms[this.shape]({
         width: this.width,
         height: this.height,
-        borderRadius: this.borderRadius
+        borderRadius: this.borderRadius,
       })
       : '';
   }

package/dist/collection/components/q2-loading/skeleton/shapes.js

@@ -1,22 +1,20 @@
 import { h } from '@stencil/core';
 export const atoms = {
   circle: ({ width, additionalClasses }) => (h("div", { class: `skeleton-shape circle ${additionalClasses || ''}`, style: { width, height: width } })),
-  rectangle: ({ width, height, borderRadius, additionalClasses }) => (h("div", { class: `skeleton-shape rectangle ${additionalClasses || ''}`, style: { width, height, borderRadius } }))
+  rectangle: ({ width, height, borderRadius, additionalClasses }) => (h("div", { class: `skeleton-shape rectangle ${additionalClasses || ''}`, style: { width, height, borderRadius } })),
 };
 export const molecules = {
   field: () => (h("div", { class: "skeleton-shape field" },
     h("div", { class: "skeleton-field-label" }, atoms.rectangle({ height: '1rem', width: '50%' })),
     atoms.rectangle({
       height: 'var(--tct-input-height, 42px)',
-      borderRadius: '3px'
+      borderRadius: '3px',
     }))),
   text: (counts, modifiers) => {
     var _a;
     const rows = (_a = counts === null || counts === void 0 ? void 0 : counts[0]) !== null && _a !== void 0 ? _a : 1;
     const hasHeader = modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('header');
-    const alignment = ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('center')) && 'center') ||
-      ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('right')) && 'right') ||
-      'left';
+    const alignment = ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('center')) && 'center') || ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('right')) && 'right') || 'left';
     const smallHeaderClass = (modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('smallheader')) ? ' smaller' : '';
     const additionalClasses = hasHeader ? `header ${alignment}${smallHeaderClass}` : '';
     return (h("div", { class: "skeleton-shape text" },
@@ -25,7 +23,7 @@ export const molecules = {
         Array(rows)
           .fill(undefined)
           .map(() => atoms.rectangle({ height: '1rem' }))));
-  }
+  },
 };
 export const shapes = {
   circle: () => {
@@ -57,7 +55,7 @@ export const shapes = {
               .map(() => atoms.rectangle({ height: '1.5rem' }))),
           bordered && (h("div", { class: "skeleton-table-row-border" }, atoms.rectangle({
             height: '1px',
-            additionalClasses: 'no-margin'
+            additionalClasses: 'no-margin',
           })))))))));
   },
   field: molecules.field,
@@ -66,17 +64,12 @@ export const shapes = {
     const columns = (_a = ((counts === null || counts === void 0 ? void 0 : counts[1]) && (counts === null || counts === void 0 ? void 0 : counts[0]))) !== null && _a !== void 0 ? _a : 1;
     const rows = (_c = (_b = counts === null || counts === void 0 ? void 0 : counts[1]) !== null && _b !== void 0 ? _b : counts === null || counts === void 0 ? void 0 : counts[0]) !== null && _c !== void 0 ? _c : 1;
     const totalItems = columns * rows;
-    return (h("div", { class: `skeleton-shape form flex columns-${columns}` }, !!totalItems &&
-      Array(totalItems)
-        .fill(undefined)
-        .map(molecules.field)));
+    return (h("div", { class: `skeleton-shape form flex columns-${columns}` }, !!totalItems && Array(totalItems).fill(undefined).map(molecules.field)));
   },
   text: molecules.text,
   'detailed-item': (counts, modifiers) => {
     const isSquare = modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('square');
-    const alignment = ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('center')) && 'center') ||
-      ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('right')) && 'right') ||
-      'left';
+    const alignment = ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('center')) && 'center') || ((modifiers === null || modifiers === void 0 ? void 0 : modifiers.has('right')) && 'right') || 'left';
     return (h("div", { class: `skeleton-shape detailed-item flex ${alignment}` },
       h("div", { class: `detailed-item-image flex-${alignment}` }, isSquare
         ? atoms.rectangle({ width: '1.5em', height: '1.5em', borderRadius: '3px' })
@@ -91,6 +84,6 @@ export const shapes = {
       Array(cells)
         .fill(undefined)
         .map(() => atoms.rectangle({ height: '1rem' }))));
-  }
+  },
 };
 export default shapes;

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

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

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

@@ -137,8 +137,8 @@ function generateIcon(type) {
     warning: 'warning',
     danger: 'error',
     error: 'error',
-    info: 'info'
+    info: 'info',
   };
-  const icon = iconMap[type] || iconMap['info'];
-  return h("q2-icon", { type: icon, class: "message-icon" });
+  const icon = iconMap[type] || iconMap.info;
+  return (h("q2-icon", { type: icon, class: "message-icon" }));
 }

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

@@ -14,7 +14,7 @@ export class Q2Optgroup {
     const observer = new MutationObserver(this.setHidden);
     observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });
     this.mutationObserver = observer;
-    //set initially
+    // set initially
     this.setHidden();
     this.disabledWatcher(this.disabled);
   }

package/dist/collection/components/q2-option-list/index.js

@@ -1,4 +1,4 @@
-import { Component, Prop, h, Event, State, Element, Host, Method, Watch, Listen } from '@stencil/core';
+import { Component, Prop, h, Event, State, Element, Host, Method, Watch, Listen, } from '@stencil/core';
 import { isEventFromElement, overrideFocus } from 'src/utils';
 export class Q2OptionList {
   constructor() {
@@ -7,6 +7,7 @@ export class Q2OptionList {
     this.selectedOptions = [];
     this.scheduledAfterRender = [];
     /// Event Handlers ///
+    /* tslint:disable:cyclomatic-complexity */
     this.keydownHandler = (event, ignoreSelectionEvents) => {
       event.stopPropagation();
       const { activeIndex, customSearch, allOptions } = this;
@@ -97,6 +98,7 @@ export class Q2OptionList {
           break;
       }
     };
+    /* tslint:enable:cyclomatic-complexity */
     this.focusoutHandler = (event) => {
       const { relatedTarget } = event;
       const isInDropdown = this.allOptions.includes(relatedTarget);
@@ -230,7 +232,7 @@ export class Q2OptionList {
     const option = this.allOptions.find(({ value }) => value === selectedValue);
     const valueObject = {
       value: selectedValue,
-      display: option.display || option.innerText.trim()
+      display: option.display || option.innerText.trim(),
     };
     const { multiple, noSelect } = this;
     let values;

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

@@ -86,19 +86,19 @@ export class Q2Pagination {
   }
   ////////// OBSERVERS //////////
   render() {
-    const { pagesOnly, isFullViewHidden, recordTypeWithDefault: recordType, totalPages, totalWithDefault: total, pageWithDefault: page, currentRange } = this;
+    const { pagesOnly, isFullViewHidden, recordTypeWithDefault: recordType, totalPages, totalWithDefault: total, pageWithDefault: page, currentRange, } = this;
     const onFirstPage = page === 1;
     const onLastPage = page === totalPages;
     return (h("nav", { class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') },
       h("div", { class: "description", "test-id": "description" }, pagesOnly
         ? loc('tecton.element.pagination.pages', {
           current: page,
-          total: totalPages
+          total: totalPages,
         })
         : loc('tecton.element.pagination.description', {
           range: currentRange,
           recordType: recordType.toLowerCase(),
-          total: total.toLocaleString()
+          total: total.toLocaleString(),
         })),
       h("div", { class: "btn-group" },
         h("q2-btn", { label: "tecton.element.pagination.goToFirstPage", disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true },
@@ -108,9 +108,7 @@ export class Q2Pagination {
       h("div", { class: "controls", hidden: isFullViewHidden, "test-id": "controls" },
         h("span", { "aria-hidden": "true" }, loc('tecton.element.pagination.page')),
         h("div", { class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) },
-          h("q2-input", { type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [
-              totalPages.toLocaleString()
-            ])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })),
+          h("q2-input", { type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })),
         h("span", { "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))),
       h("div", { class: "btn-group" },
         h("q2-btn", { label: loc('tecton.element.pagination.goToPage', [page + 1]), disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true },

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

@@ -1,10 +1,10 @@
-import { Component, State, Prop, h, Listen, Element, Fragment, Event } from '@stencil/core';
+import { Component, State, Prop, h, Listen, Element, Fragment, Event, } from '@stencil/core';
 import { isEventFromElement, loc, overrideFocus } from 'src/utils';
 export class Q2Pill {
   constructor() {
     this.selectedOptions = [];
     this.scheduledAfterRender = [];
-    /// Helpers
+    /// Helpers ///
     this.determineHasOptions = () => {
       const hasOptions = !!this.hostElement.querySelectorAll('q2-option').length;
       this.hasOptions = hasOptions;
@@ -30,9 +30,9 @@ export class Q2Pill {
         const values = isActive ? [{ value, display: label }] : [];
         this.selectedOptions = values;
         this.change.emit({
-          value: value,
+          value,
           values,
-          active: isActive
+          active: isActive,
         });
       }
     };
@@ -50,7 +50,7 @@ export class Q2Pill {
         this.selectedOptions = values;
         this.active = isActive;
       }
-      this.change.emit({ value: value, values, active: isActive });
+      this.change.emit({ value, values, active: isActive });
     };
     this.handleFocusout = (event) => {
       const relatedTarget = event.relatedTarget;
@@ -115,7 +115,7 @@ export class Q2Pill {
   }
   render() {
     const { hasOptions, active, open } = this;
-    let wrapperClassNames = ['btn-wrapper'];
+    const wrapperClassNames = ['btn-wrapper'];
     if (hasOptions || active)
       wrapperClassNames.push('has-icon');
     if (hasOptions)
@@ -125,10 +125,10 @@ export class Q2Pill {
         h("div", { class: "btn-height-wrapper", onClick: this.handleWrapperClick, tabIndex: -1 },
           h("button", { class: "btn-primary", type: "button", "test-id": "btn-control", ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, disabled: this.disabled, onFocusout: this.handleFocusout, "aria-selected": !hasOptions && active ? 'true' : 'false', "aria-roledescription": !hasOptions && 'filter', "aria-controls": hasOptions && 'option-list', "aria-haspopup": hasOptions && 'true', "aria-expanded": hasOptions && open ? 'true' : 'false' },
             this.buttonContent,
-            !hasOptions && active && (h("span", { class: "sr" },
+            !hasOptions && active && h("span", { class: "sr" },
               "(",
               loc('tecton.element.pill.active'),
-              ")")))),
+              ")"))),
         this.generateIcon()),
       this.hasOptions && (h("q2-option-list", { id: "option-list", ref: el => (this.optionList = el), open: this.open, onChange: this.handleChange, multiple: this.multiple, onFocusout: this.handleFocusout, selectedOptions: this.selectedOptions },
         h("slot", null)))));

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

@@ -167,7 +167,9 @@ q2-option-list {
   background: var(--comp-hover-btn-background);
 }
 :host(:not(:empty)) .btn-primary, .has-icon .btn-primary {
-  padding-right: calc( var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-size-1x, 5px))) + var(--comp-close-size) );
+  padding-right: calc(
+            var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-size-1x, 5px))) + var(--comp-close-size)
+        );
 }
 .has-options .btn-primary {
   text-overflow: ellipsis;

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

@@ -1,4 +1,4 @@
-import { Component, Prop, Element, h, Listen, Event, Watch, Fragment } 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() {
@@ -68,8 +68,7 @@ export class Q2RadioGroup {
   delegateFocus(event) {
     if (!isEventFromElement(event, this.hostElement))
       return;
-    const radio = this.hostElement.querySelector('q2-radio[checked]') ||
-      this.hostElement.querySelector('q2-radio');
+    const radio = this.hostElement.querySelector('q2-radio[checked]') || this.hostElement.querySelector('q2-radio');
     radio === null || radio === void 0 ? void 0 : radio.dispatchEvent(new FocusEvent('focus'));
   }
   keydownHandler(event) {
@@ -123,9 +122,7 @@ export class Q2RadioGroup {
   inputDom() {
     if (this.tilelayout) {
       const { tileAlignment } = this;
-      const alignment = ['left', 'center', 'right'].includes(tileAlignment)
-        ? tileAlignment
-        : 'center';
+      const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';
       return (h("div", { class: `flexed ${alignment}` },
         h("slot", null)));
     }

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

@@ -1,4 +1,4 @@
-import { Component, Prop, Element, Listen, State, Watch, h, Event } from '@stencil/core';
+import { Component, Prop, Element, Listen, State, Watch, h, Event, } from '@stencil/core';
 import { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';
 export class Q2Section {
   constructor() {
@@ -11,7 +11,7 @@ export class Q2Section {
     this.onHeaderClick = () => {
       this.collapsible &&
         this.change.emit({
-          expanded: !this.expanded
+          expanded: !this.expanded,
         });
     };
     this.onAnimationStart = () => {
@@ -79,9 +79,7 @@ export class Q2Section {
     };
   }
   resizeIframe() {
-    return (window.TectonElements &&
-      window.TectonElements.resizeIframe &&
-      window.TectonElements.resizeIframe());
+    return window.TectonElements && window.TectonElements.resizeIframe && window.TectonElements.resizeIframe();
   }
   componentWillLoad() {
     this.onHeaderSlotChange();
@@ -155,10 +153,10 @@ export class Q2Section {
     return (h("section", { class: this.wrapperClasses },
       h("div", { class: "q2-section-header" },
         h("div", { class: "q2-section-header-content", id: this.titleId, onClick: this.onHeaderClick },
-          !this.hasYieldedHeader && !!this.label ? (h("h2", { class: "title" }, loc(this.label))) : (''),
+          !this.hasYieldedHeader && !!this.label ? h("h2", { class: "title" }, loc(this.label)) : '',
           h("div", { class: "q2-section-header-slot-wrapper" },
             h("slot", { name: "q2-section-header" }))),
-        this.collapsible && !this.noCollapseIcon ? (h("q2-btn", { class: `q2-section-content-toggle ${this.expanded ? 'expanded' : 'collapsed'}`, label: this.label, ariaExpanded: !!this.expanded, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick },
+        this.collapsible && !this.noCollapseIcon ? (h("q2-btn", { class: `q2-section-content-toggle ${this.expanded ? 'expanded' : 'collapsed'}`, label: this.label, ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick },
           h("q2-icon", { type: "chevron-up", class: "toggle-icon" }))) : ('')),
       h("div", { class: "q2-section-content-wrapper", id: this.contentId, "aria-labelledby": this.titleId, role: "region", onAnimationStart: this.onAnimationStart, onAnimationEnd: this.onAnimationEnd },
         h("div", { class: "q2-section-content", tabindex: "-1" },