q2-tecton-elements 1.12.0-alpha.0 → 1.12.2

package/dist/collection/collection-manifest.json

@@ -5,6 +5,7 @@
     "./components/q2-carousel/index.js",
     "./components/q2-checkbox/index.js",
     "./components/q2-dropdown/index.js",
+    "./components/q2-option-list/index.js",
     "./components/q2-dropdown-item/index.js",
     "./components/q2-editable-field/index.js",
     "./components/q2-loading/index.js",
@@ -14,6 +15,7 @@
     "./components/q2-textarea/index.js",
     "./components/click-elsewhere/index.js",
     "./components/q2-avatar/index.js",
+    "./components/q2-card/index.js",
     "./components/q2-carousel-pane/index.js",
     "./components/q2-checkbox-group/index.js",
     "./components/q2-icon/index.js",
@@ -22,12 +24,15 @@
     "./components/q2-message/index.js",
     "./components/q2-optgroup/index.js",
     "./components/q2-option/index.js",
+    "./components/q2-pagination/index.js",
+    "./components/q2-pill/index.js",
     "./components/q2-radio-group/index.js",
     "./components/q2-section/index.js",
     "./components/q2-stepper/index.js",
     "./components/q2-stepper-pane/index.js",
     "./components/q2-tab-container/index.js",
     "./components/q2-tab-pane/index.js",
+    "./components/q2-tag/index.js",
     "./components/tecton-tab-pane/index.js"
   ],
   "compiler": {

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

@@ -237,7 +237,7 @@ button:disabled {
 }
 :host([badge]) button {
   padding: var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));
-  font-size: var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct---btn-font-size, var(--t---btn-font-size, inherit))));
+  font-size: var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));
   border-radius: var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));
   background-color: var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent));
   color: var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit));

package/dist/collection/components/q2-calendar/helpers.js

@@ -214,6 +214,12 @@ export function handleMissingZeros(input) {
   }
   return input;
 }
+export function reorderDateString(input) {
+  const dateParts = (input || '').split('-');
+  if (dateParts.length !== 3)
+    return '';
+  return `${dateParts[1]}/${dateParts[2]}/${dateParts[0]}`;
+}
 export function firstDayOfWeekInMonth(month, year) {
   return new Date(year, month, 1, 1, 1, 1, 1).getDay();
 }

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

@@ -1,6 +1,6 @@
 import { Component, Prop, Element, State, Event, Listen, Watch, h } from '@stencil/core';
 import { addDays, isSameDay, format, isValid as isValidDate } from 'date-fns';
-import { stringToDate, setupMonthYear, getMonths, getDays, getDaysOfWeek, stringArrayToDate, convertMomentFormat, validateInput, handleMissingZeros, formatDateISO, formatDateLong, formatDateShort, removeTimezoneOffset } from './helpers';
+import { stringToDate, setupMonthYear, getMonths, getDays, getDaysOfWeek, stringArrayToDate, convertMomentFormat, validateInput, handleMissingZeros, formatDateISO, formatDateLong, formatDateShort, removeTimezoneOffset, reorderDateString } from './helpers';
 import { buildDates, getValidDaysOfWeek } from './validation';
 import { handleAriaLabel, loc, setPopProperties, overrideFocus, isEventFromElement } from 'src/utils';
 export class Q2Calendar {
@@ -26,7 +26,7 @@ export class Q2Calendar {
       }
     };
     this.openCalendar = () => {
-      if (!this.dropdownOpen) {
+      if (!this.readonly && !this.dropdownOpen) {
         this.selectedMonthYear = setupMonthYear(this.dateValue);
         this.dateList = this.buildDateList(this.selectedMonthYear);
         this.dropdownOpen = true;
@@ -35,6 +35,8 @@ export class Q2Calendar {
       }
     };
     this.toggleCalendar = () => {
+      if (this.readonly)
+        return;
       this.dropdownOpen = !this.dropdownOpen;
       this.scheduledAfterRender.push(this.resizeIframe);
       if (this.dropdownOpen) {
@@ -257,6 +259,9 @@ export class Q2Calendar {
   connectedCallback() {
     this.selectedMonthYear = setupMonthYear(this.dateValue);
     this.dateList = this.buildDateList(this.selectedMonthYear);
+    if (this.value && this.isTypeable && !this.typedValue) {
+      this.typedValue = reorderDateString(this.value);
+    }
     this.validateDate();
   }
   componentWillLoad() {
@@ -333,10 +338,11 @@ export class Q2Calendar {
     }
   }
   get dateValidators() {
+    const ct = new Date(this.cutoffTime || ''); // should fallback to InvalidDate
     return {
       startDate: stringToDate(this.startDate),
       endDate: stringToDate(this.endDate),
-      cutOffTime: stringToDate(this.cutoffTime)
+      cutOffTime: isValidDate(ct) ? ct : undefined
     };
   }
   get isTypeable() {
@@ -537,7 +543,7 @@ export class Q2Calendar {
     });
   }
   calendarField() {
-    return (h("q2-input", { ref: el => (this.inputField = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: this.dropdownOpen, errors: (this.localizedErrors.length > 0 && this.localizedErrors) ||
+    return (h("q2-input", { ref: el => (this.inputField = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: this.dropdownOpen, errors: (this.localizedErrors.length > 0 && this.localizedErrors) ||
         (this.invalid && ['tecton.element.calendar.invalid']) ||
         [], onClick: this.onInputClick, onChange: this.onInputChange, onInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, "icon-right": "calendar", "format-modifier": this.isTypeable ? this.formatModifier : '', pseudo: !this.isTypeable, type: "date", "hide-messages": true, "test-id": "inputAndCalendarToggle" }));
   }
@@ -691,6 +697,23 @@ export class Q2Calendar {
       "attribute": "disabled",
       "reflect": true
     },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": true
+    },
     "invalid": {
       "type": "boolean",
       "mutable": true,

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

@@ -149,7 +149,7 @@ q2-input {
 .calendar-label {
   font-size: var(--tct-calendar-label-font-size, var(--t-calendar-label-font-size, 16px));
   flex: 1 1;
-  flex-basis: calc(100% - var(--tct-btn-icon-width, 44px));
+  flex-basis: calc(100% - var-list(--tct-btn-icon-width, 44px));
   margin: 0;
   padding: var(--tct-calendar-label-vertical-padding, var(--t-calendar-label-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px)))) 0;
 }

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

@@ -0,0 +1,290 @@
+import { Component, Prop, Event, h, Fragment, Listen, Element, State } from '@stencil/core';
+import { isTouchDevice, overrideFocus, isEventFromElement } from 'src/utils';
+export class Q2Card {
+  constructor() {
+    this.isTouch = isTouchDevice();
+    this.isAutoTouch = false;
+    this.isAutoSmall = false;
+    this.handleClick = (event) => {
+      if (this.url)
+        return true;
+      event.preventDefault();
+      event.stopPropagation();
+      this.click.emit();
+    };
+  }
+  componentDidLoad() {
+    const { hostElement, clickableElement } = this;
+    hostElement.click = () => clickableElement.click();
+    overrideFocus(this.hostElement);
+    this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());
+    this.resizeObserver.observe(this.hostElement);
+  }
+  willDestroyElement() {
+    this.resizeObserver = null;
+  }
+  onHostElementFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.clickableElement.focus();
+  }
+  determineAutoTouch() {
+    if (this.hostElement.hasAttribute('is-touch'))
+      return;
+    this.isAutoTouch = isTouchDevice();
+  }
+  determineAutoSmall() {
+    var _a, _b;
+    if (this.hostElement.hasAttribute('is-small'))
+      return;
+    const { containerElement, avatarElement } = this;
+    const avatarWidth = (_a = avatarElement === null || avatarElement === void 0 ? void 0 : avatarElement.offsetWidth) !== null && _a !== void 0 ? _a : 0;
+    const containerWidth = (_b = containerElement === null || containerElement === void 0 ? void 0 : containerElement.offsetWidth) !== null && _b !== void 0 ? _b : 0;
+    const totalWidth = avatarWidth + containerWidth;
+    this.isAutoSmall = totalWidth < 350;
+  }
+  generateAvatar() {
+    const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;
+    if (avatarIcon) {
+      return (h("q2-icon", { type: avatarIcon, ref: e => (this.avatarElement = e), "test-id": "avatar" }));
+    }
+    else if (avatarName || avatarInitials || avatarSrc) {
+      return (h("q2-avatar", { name: avatarName, initials: avatarInitials, src: avatarSrc, ref: e => (this.avatarElement = e), "test-id": "avatar" }));
+    }
+  }
+  generateContent() {
+    return (h(Fragment, null,
+      this.generateAvatar(),
+      h("div", { class: "container", "test-id": "contentContainer", ref: e => (this.containerElement = e) },
+        this.title && h("h3", { "test-id": "title" }, this.title),
+        this.description && h("p", { "test-id": "description" }, this.description)),
+      this.isTouch && (h("q2-icon", { "test-id": "touchIndicator", type: "chevron-right", class: "touch-indicator" }))));
+  }
+  generateContainerClasses() {
+    const { isSmall, isAutoSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isTouch, isAutoTouch } = this;
+    let result = [];
+    const showSmall = isSmall || isAutoSmall;
+    const showTouch = isTouch || isAutoTouch;
+    const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;
+    if (showSmall)
+      result.push('is-small');
+    if (showTouch)
+      result.push('is-touch');
+    if (hasAvatar)
+      result.push('has-avatar');
+    return result.join(' ');
+  }
+  render() {
+    const { url } = this;
+    return !!url ? (h("a", { ref: e => (this.clickableElement = e), href: this.url, class: this.generateContainerClasses(), target: this.target, rel: "noopener noreferrer", "test-id": "clickableElement", onClick: this.handleClick }, this.generateContent())) : (h("button", { ref: e => (this.clickableElement = e), class: this.generateContainerClasses(), "test-id": "clickableElement", type: "button", onClick: this.handleClick }, this.generateContent()));
+  }
+  static get is() { return "q2-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "title": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "title",
+      "reflect": true
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": true
+    },
+    "avatarName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "avatar-name",
+      "reflect": true
+    },
+    "avatarInitials": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "avatar-initials",
+      "reflect": true
+    },
+    "avatarIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "avatar-icon",
+      "reflect": true
+    },
+    "avatarSrc": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "avatar-src",
+      "reflect": true
+    },
+    "isSmall": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-small",
+      "reflect": true
+    },
+    "isTouch": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-touch",
+      "reflect": true,
+      "defaultValue": "isTouchDevice()"
+    },
+    "url": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "url",
+      "reflect": true
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'_self' | '_blank' | '_parent' | '_top'",
+        "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "target",
+      "reflect": true
+    }
+  }; }
+  static get states() { return {
+    "isAutoTouch": {},
+    "isAutoSmall": {}
+  }; }
+  static get events() { return [{
+      "method": "click",
+      "name": "click",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() { return [{
+      "name": "focus",
+      "method": "onHostElementFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,161 @@
+* {
+  box-sizing: border-box;
+}
+
+*:active {
+  outline: none;
+}
+
+*:focus {
+  outline: none;
+  box-shadow: var(--const-global-focus);
+}
+
+:host {
+  box-shadow: none !important;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
+
+input,
+textarea,
+button {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+:host(.sr),
+:host(.sr) button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.sr,
+.sr button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.hidden {
+  display: none;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+:host {
+  display: block;
+}
+
+button,
+a {
+  width: 100%;
+  text-align: start;
+  cursor: pointer;
+  height: 100%;
+  display: grid;
+  gap: var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));
+  margin: 0;
+  border: none;
+  background: var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));
+  padding: var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)));
+  color: var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));
+  text-decoration: none;
+  border-radius: var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 3px)));
+  transition: box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
+  box-shadow: var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))));
+  --comp-avatar-size: var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));
+  --comp-chevron-size: 0;
+}
+@media (hover: hover) {
+  button:hover, button:active, button:focus,
+a:hover,
+a:active,
+a:focus {
+    color: var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));
+  }
+  button:hover,
+a:hover {
+    box-shadow: var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0 4px 12px rgba(0, 0, 0, 0.3))));
+  }
+  button:active,
+a:active {
+    box-shadow: var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));
+  }
+}
+button.is-small,
+a.is-small {
+  --comp-avatar-size: var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px));
+}
+button.is-touch,
+a.is-touch {
+  --comp-chevron-size: var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));
+  grid-template-columns: 1fr var(--comp-chevron-size);
+}
+button.has-avatar,
+a.has-avatar {
+  grid-template-columns: var(--comp-avatar-size) 1fr;
+  --tct-avatar-width: var(--comp-avatar-size);
+  --tct-avatar-height: var(--comp-avatar-size);
+  --tct-icon-size: var(--comp-avatar-size);
+}
+button.has-avatar.is-touch,
+a.has-avatar.is-touch {
+  grid-template-columns: var(--comp-avatar-size) 1fr var(--comp-chevron-size);
+}
+
+.container {
+  overflow: hidden;
+  display: grid;
+  gap: var(--tct-card-container-gap, var(--t-card-container-gap, var(--app-scale-1x, 5px)));
+  align-content: start;
+}
+
+h3,
+p {
+  margin: 0;
+  padding: 0;
+  line-height: var(--tct-card-font-height, var(--t-card-font-height, 20px));
+}
+
+h3 {
+  font-weight: var(--tct-card-font-weight, var(--t-card-font-weight, 600));
+  font-size: var(--tct-card-font-size, var(--t-card-font-size, 17px));
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+p {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.touch-indicator {
+  align-self: center;
+  --tct-icon-size: var(--comp-chevron-size);
+}

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

@@ -5,9 +5,10 @@ export class Q2Checkbox {
     this.checked = false;
     this.id = `checkbox-${createGuid()}`;
     ///// Actions ////////
-    this.onInputChange = (event) => {
+    this.onInputClick = (event) => {
       event.stopPropagation();
-      if (this.disabled)
+      event.preventDefault();
+      if (this.disabled || this.readonly)
         return;
       if (!(event.target instanceof HTMLInputElement))
         return;
@@ -19,8 +20,15 @@ export class Q2Checkbox {
     };
     this.onControlClick = (event) => {
       event.stopPropagation();
+      if (this.readonly)
+        return;
       this.inputElement.click();
     };
+    this.onKeyDown = (event) => {
+      if (this.readonly && event.code === 'Space') {
+        event.preventDefault();
+      }
+    };
   }
   ////////// LIFECYCLE HOOKS ////////
   componentWillLoad() {
@@ -31,7 +39,10 @@ export class Q2Checkbox {
   }
   //////// Host Element Events ////////
   defaultChangeHandler(event) {
-    if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {
+    if (!this.readonly &&
+      event.target === this.hostElement &&
+      !this.hostElement.onchange &&
+      !!event.detail) {
       this.checked = event.detail.checked;
     }
   }
@@ -47,7 +58,7 @@ export class Q2Checkbox {
   /////// View Methods ///////
   render() {
     return (h("div", { class: "checkbox-container" },
-      h("input", { ref: el => (this.inputElement = el), id: this.id, type: "checkbox", checked: this.indeterminate || this.checked || false, disabled: !!this.disabled || !!this.groupDisabled, class: "sr", value: this.value, name: this.name || this.id, "aria-label": this.label && this.hideLabel ? loc(this.label) : undefined, "test-id": "q2CheckboxInnerCheckBox", onChange: this.onInputChange }),
+      h("input", { ref: el => (this.inputElement = el), id: this.id, type: "checkbox", checked: this.indeterminate || this.checked || false, disabled: !!this.disabled || !!this.groupDisabled, class: "sr", value: this.value, name: this.name || this.id, "aria-label": this.label ? loc(this.label) : undefined, "test-id": "q2CheckboxInnerCheckBox", onKeyDown: this.onKeyDown, onClick: this.onInputClick }),
       h("label", { "test-id": "checkboxButton" },
         this.generateCheckboxSVG(),
         !this.hideLabel && (h("div", { class: "q2-checkbox-label-content" },
@@ -210,6 +221,23 @@ export class Q2Checkbox {
       "attribute": "disabled",
       "reflect": true
     },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": true
+    },
     "value": {
       "type": "string",
       "mutable": false,

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

@@ -66,6 +66,7 @@ button {
 
 :host {
   display: block;
+  position: relative;
   padding: var(--tct-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px))) 0;
 }
 
@@ -138,7 +139,7 @@ input:focus + label .checkbox-icon {
 
 .q2-checkbox-label-content {
   font-weight: var(--tct-checkbox-font-weight, 400);
-  width: calc(100% - var(--tct-checkbox-size, 20px) - var(--tct-scale-2, var(--app-scale-2, 10px)));
+  width: calc( 100% - var(--tct-checkbox-size, 20px) - var(--tct-scale-2, var(--app-scale-2, 10px)) );
   cursor: inherit;
 }