npm - q2-tecton-elements - Versions diffs - 1.15.1 → 1.16.0 - Mend

q2-tecton-elements 1.15.1 → 1.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (190) hide show

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

@@ -1,4 +1,4 @@
-import { Component, Prop, Element, State, Event, h, Watch, Listen } from '@stencil/core';
+import { Component, Prop, Element, State, Event, h, Watch, Listen, Fragment } from '@stencil/core';
 import { createGuid, labelDOM, loc, messagesDOM, setMessageHeight, handleAriaLabel, overrideFocus, isEventFromElement, } from 'src/utils';
 import formatCurrency from './formatting/currency';
 import formatPhoneNumber from './formatting/phone';
@@ -150,17 +150,32 @@ export class Q2Input {
     return maskedTypes.includes(this.type);
   }
   get wrapperClasses() {
-    const errorClass = this.hasError ? ' has-error' : '';
-    const valueClass = !!this.value ? ' has-value' : '';
-    const clearClass = this.clearable && !!this.value ? ' has-clear' : '';
-    const focusClass = this.hasFocus ? ' has-focus' : '';
-    const prefixClass = this.formattedValueObject.prefix ? ' has-prefix' : '';
-    const iconLeftClass = this.computedIconLeft ? ' has-icon-left' : '';
-    const iconSeparatorClass = this.showIconSeperator ? ' has-icon-separator' : '';
-    const suffixClass = this.formattedValueObject.suffix ? ' has-suffix' : '';
-    const iconRightClass = !this.formattedValueObject.suffix && this.iconRight ? ' has-icon-right' : '';
-    const alignmentClass = this.type === 'currency' ? ' right-aligned' : ' left-aligned';
-    return `field-container${errorClass}${valueClass}${clearClass}${focusClass}${prefixClass}${iconLeftClass}${iconSeparatorClass}${suffixClass}${iconRightClass}${alignmentClass}`;
+    const classNames = ['field-container'];
+    if (this.hasError)
+      classNames.push('has-error');
+    if (!!this.value)
+      classNames.push('has-value');
+    if (this.clearable && !!this.value)
+      classNames.push('has-clear');
+    if (this.hasFocus)
+      classNames.push('has-focus');
+    if (this.formattedValueObject.prefix)
+      classNames.push('has-prefix');
+    if (this.computedIconLeft)
+      classNames.push('has-icon-left');
+    if (this.showIconSeparator)
+      classNames.push('has-icon-separator');
+    if (this.formattedValueObject.suffix)
+      classNames.push('has-suffix');
+    if (!this.formattedValueObject.suffix && this.iconRight)
+      classNames.push('has-icon-right');
+    if (this.type === 'currency')
+      classNames.push('right-aligned');
+    else
+      classNames.push('left-aligned');
+    if (this.hasCustomDisplaySlot)
+      classNames.push('has-custom-display');
+    return classNames.join(' ');
   }
   get computedType() {
     const inputTypeMap = {
@@ -201,7 +216,7 @@ export class Q2Input {
     }
     return this.iconLeft;
   }
-  get showIconSeperator() {
+  get showIconSeparator() {
     return this.type === 'credit-card' || !!this.formattedValueObject.prefix;
   }
   get computedClassForIconLeft() {
@@ -277,27 +292,43 @@ export class Q2Input {
   render() {
     return (h("div", { class: this.wrapperClasses },
       labelDOM(this),
-      this.inputDOM(),
+      this.inputContainerDOM(),
       messagesDOM(this)));
   }
+  get hasCustomDisplaySlot() {
+    return !!this.hostElement.querySelector('[slot=custom-display]');
+  }
   /* tslint:disable:cyclomatic-complexity */
-  inputDOM() {
+  inputContainerDOM() {
     return (h("div", { class: "input-container" },
       h("div", { class: "input-icons-container-left" },
         this.formattedValueObject.prefix && (h("span", { class: "input-prefix" }, this.formattedValueObject.prefix)),
         this.computedIconLeft && (h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft })),
-        this.showIconSeperator && h("div", { class: "vertical-separator" }),
+        this.showIconSeparator && h("div", { class: "vertical-separator" }),
         this.hasError && this.type === 'currency' && (h("q2-icon", { type: "error", class: "icon-error" }))),
-      this.pseudo ? (this.pseudoInputDOM()) : (h("input", { class: "input-field", id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, max: this.max, min: this.min, step: this.step, "aria-current": this.current || undefined, "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.hideLabel && this.label ? loc(this.label) : undefined, autocomplete: this.autocomplete ? this.autocomplete : 'off', autocapitalize: this.autocapitalize === 'on' ? 'on' : 'off', autocorrect: this.autocorrect === 'on' ? 'on' : 'off', placeholder: (this.placeholder && loc(this.placeholder)) || undefined, role: (this.role && `${this.role}`) || undefined, "test-id": "inputField", readonly: !!this.readonly, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste })),
+      this.pseudo ? this.pseudoInputDOM() : this.standardInputDOM(),
       h("div", { class: "input-icons-container-right" },
         this.canClear && (h("q2-btn", { class: "btn-clear", ariaLabel: loc('tecton.element.input.clear', [this.label]), "test-id": "clearButton", onClick: this.onClearInput },
           h("q2-icon", { type: "close", class: "icon-clear" }))),
         ['password', 'text'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility }, this.visibilityToggleText)),
         this.formattedValueObject.suffix && (h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)),
+        this.badgeValue && (h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)),
         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 */
+  /* tslint:disable:cyclomatic-complexity */
+  standardInputDOM() {
+    const { hasCustomDisplaySlot } = this;
+    const inputClasses = ['input-field'];
+    if (hasCustomDisplaySlot)
+      inputClasses.push('sr');
+    return (h(Fragment, null,
+      hasCustomDisplaySlot && (h("div", { class: "custom-display-container" },
+        h("slot", { name: "custom-display" }))),
+      h("input", { class: inputClasses.join(' '), id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, max: this.max, min: this.min, step: this.step, "aria-current": this.current || undefined, "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.hideLabel && this.label ? loc(this.label) : undefined, autocomplete: this.autocomplete ? this.autocomplete : 'off', autocapitalize: this.autocapitalize === 'on' ? 'on' : 'off', autocorrect: this.autocorrect === 'on' ? 'on' : 'off', placeholder: (this.placeholder && loc(this.placeholder)) || undefined, role: (this.role && `${this.role}`) || undefined, "test-id": "inputField", readonly: !!this.readonly, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste })));
+  }
+  /* tslint:enable:cyclomatic-complexity */
   pseudoInputDOM() {
     const showPlaceholder = !this.value && !!this.placeholder;
     let ariaLabelSuffix = '';
@@ -307,9 +338,11 @@ export class Q2Input {
     if (this.readonly) {
       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("span", { class: showPlaceholder ? 'placeholder-text' : '' }, showPlaceholder ? this.placeholder : this.value))));
+    return (h("div", { class: "pseudo-input-container" },
+      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 === 'true' ? 'true' : 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("div", { class: "custom-display-container" },
+          h("slot", { name: "custom-display" },
+            h("span", { class: showPlaceholder ? 'placeholder-text' : '' }, showPlaceholder ? this.placeholder : this.value))))));
   }
   calculateCursorPositionOnInput() {
     const input = this.inputField;
@@ -377,7 +410,7 @@ export class Q2Input {
     },
     "label": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -394,7 +427,7 @@ export class Q2Input {
     },
     "hideLabel": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -752,6 +785,40 @@ export class Q2Input {
       "attribute": "text-hidden",
       "reflect": true
     },
+    "badgeValue": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "badge-value",
+      "reflect": true
+    },
+    "badgeTheme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'primary' | 'secondary' | 'tertiary'",
+        "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "badge-theme",
+      "reflect": true
+    },
     "ariaControls": {
       "type": "string",
       "mutable": false,
@@ -805,7 +872,7 @@ export class Q2Input {
     },
     "ariaLabel": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",

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

@@ -8,7 +8,7 @@
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 :host {
@@ -89,7 +89,7 @@ label {
   padding-left: var(--tct-input-label-padding-left, var(--t-input-label-padding-left, 0));
   padding-right: var(--tct-input-label-padding-right, var(--t-input-label-padding-right, 0));
   margin-top: var(--tct-input-label-margin-top, var(--t-input-label-margin-top, 0));
-  margin-bottom: var(--tct-input-label-margin-bottom, var(--t-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1, 5px))));
+  margin-bottom: var(--tct-input-label-margin-bottom, var(--t-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1x, 5px))));
   color: var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit));
   font-size: var(--tct-input-label-font-size, var(--t-input-label-font-size, inherit));
   font-weight: var(--tct-input-label-font-weight, var(--t-input-label-font-weight, 600));
@@ -99,14 +99,14 @@ label {
 }
 .optional-tag {
-  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))));
+  margin-left: var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 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));
 }
 .input-container {
-  background-color: var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))));
+  background-color: var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)));
   display: flex;
   align-items: center;
   --comp-input-horizontal-gap: var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 8px));
@@ -114,21 +114,17 @@ label {
   --comp-input-border-top-right-radius: var(--tct-input-border-top-right-radius, var(--t-input-border-top-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));
   --comp-input-border-bottom-right-radius: var(--tct-input-border-bottom-right-radius, var(--t-input-border-bottom-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));
   --comp-input-border-bottom-left-radius: var(--tct-input-border-bottom-left-radius, var(--t-input-border-bottom-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));
-  --comp-input-border-radius: var(--comp-input-border-top-left-radius)
-      var(--comp-input-border-top-right-radius) var(--comp-input-border-bottom-right-radius)
-      var(--comp-input-border-bottom-left-radius);
-  --comp-input-border-width: var(--tct-input-border-top-width, 1px)
-      var(--tct-input-border-right-width, 1px) var(--tct-input-border-bottom-width, 1px)
-      var(--tct-input-border-left-width, 1px);
+  --comp-input-border-radius: var(--comp-input-border-top-left-radius) var(--comp-input-border-top-right-radius)
+      var(--comp-input-border-bottom-right-radius) var(--comp-input-border-bottom-left-radius);
+  --comp-input-border-width: var(--tct-input-border-top-width, 1px) var(--tct-input-border-right-width, 1px)
+      var(--tct-input-border-bottom-width, 1px) var(--tct-input-border-left-width, 1px);
   --comp-input-focus-border-width: var(--tct-input-focus-border-top-width, 1px)
-      var(--tct-input-focus-border-right-width, 1px)
-      var(--tct-input-focus-border-bottom-width, 1px)
+      var(--tct-input-focus-border-right-width, 1px) var(--tct-input-focus-border-bottom-width, 1px)
       var(--tct-input-focus-border-left-width, 1px);
-  --comp-input-prefix-clearance: calc(
-      3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px)
-  );
+  --comp-input-prefix-clearance: calc(3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px));
   --comp-input-icon-clearance: 34px;
-  --comp-input-min-height: var(--tct-input-min-height, 44px);
+  --comp-input-min-height: var(--tct-input-min-height, var(--t-input-min-height, 44px));
+  --comp-input-max-height: var(--tct-input-max-height, var(--t-input-max-height));
   border-width: var(--comp-input-border-width);
   border-style: solid;
   border-color: var(--tct-input-border-color, var(--t-input-border-color, var(--tct-gray-11, var(--t-gray-11, #cccccc))));
@@ -148,9 +144,11 @@ label {
   appearance: none;
   box-sizing: border-box;
   min-height: var(--comp-input-min-height);
+  max-height: var(--comp-input-max-height);
+  overflow-y: hidden;
   height: var(--tct-input-height, var(--t-input-height, 44px));
   width: 100%;
-  padding: 0 var(--tct-input-horizontal-padding, var(--t-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));
+  padding: 0 var(--tct-input-horizontal-padding, var(--t-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));
   background-color: transparent;
   color: var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));
   display: inline-block;
@@ -188,6 +186,21 @@ label {
   display: inline-flex;
   align-items: center;
 }
+.has-custom-display .input-field:is(button) {
+  height: auto;
+  padding: 0;
+}
+.input-field:is(button) span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.has-custom-display .custom-display-container {
+  --comp-default-padding: var(--app-scale-2x, 10px) var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);
+  padding: var(--tct-input-padding, var(--t-input-padding, var(--comp-default-padding)));
+  width: 100%;
+}
 .input-container:focus-within {
   border-width: var(--comp-input-focus-border-width, 1px);
@@ -200,15 +213,10 @@ label {
   color: var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--t-textA, var(--app-gray-d1, rgba(77, 77, 77, 0.77)))));
 }
-.pseudo-input {
+.pseudo-input-container {
   min-width: 0;
   flex: 1;
 }
-.pseudo-input span {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
 .input-icons-container-left,
 .input-icons-container-right {
@@ -255,8 +263,7 @@ q2-icon {
   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))
+        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))
@@ -294,7 +301,7 @@ q2-icon {
 .pw-show {
   position: absolute;
-  margin-right: var(--tct-scale-2, var(--app-scale-2, 20px));
+  margin-right: var(--tct-scale-2, var(--app-scale-2x, 10px));
 }
 .btn-clear {

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

@@ -8,7 +8,7 @@
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 :host {
@@ -102,7 +102,7 @@ button {
 }
 :host(:not([inline]):not([modifiers*=inline])) {
-  font-size: var(--tct-loading-spinner-size, var(--tct-scale-5, var(--app-scale-5, 60px)));
+  font-size: var(--tct-loading-spinner-size, var(--t-loading-spinner-size, var(--app-scale-12x, 60px)));
 }
 .q2-loading-animation {
@@ -129,12 +129,12 @@ button {
 }
 .half-circle-spinner .circle.circle-1 {
-  border-top-color: var(--tct-loading-primary-color, var(--t-loading-primary-color, #2e2e2e));
+  border-top-color: var(--tct-loading-primary-color, var(--t-loading-primary-color, var(--t-primary, #0079c1)));
   animation: half-circle-spinner-animation 1s infinite;
 }
 .half-circle-spinner .circle.circle-2 {
-  border-bottom-color: var(--tct-loading-secondary-color, var(--t-loading-secondary-color, #cccccc));
+  border-bottom-color: var(--tct-loading-secondary-color, var(--t-loading-secondary-color, #9ddd4f));
   animation: half-circle-spinner-animation 1s infinite alternate;
 }

package/dist/collection/components/q2-loc/styles.css CHANGED Viewed

@@ -8,7 +8,7 @@
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 :host {

package/dist/collection/components/q2-message/styles.css CHANGED Viewed

@@ -8,7 +8,7 @@
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 :host {
@@ -73,10 +73,11 @@ button {
 }
 .message {
-  border-left-width: var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1, 5px)));
+  border-left-width: var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));
   border-left-style: solid;
+  --comp-line-height: var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));
   display: grid;
-  gap: var(--tct-scale-1, var(--app-scale-1, 5px));
+  gap: var(--tct-scale-1, var(--app-scale-1x, 5px));
   align-items: flex-start;
   background: var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));
   color: var(--tct-message-font-color, var(--t-message-font-color, inherit));
@@ -88,47 +89,48 @@ button {
 }
 .message-icon {
-  width: 24px;
+  --comp-top-offset: calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);
+  --tct-icon-size: var(--comp-icon-size);
+  top: var(--comp-top-offset);
+  margin-bottom: calc(var(--comp-top-offset) * -1);
 }
 .message-content {
   flex: 1;
+  line-height: var(--comp-line-height);
 }
 ::slotted(ul) {
-  padding-left: var(--tct-scale-l3, var(--app-scale-3, 15px));
+  padding-left: var(--tct-scale-l3, var(--app-scale-3x, 15px));
 }
 :host(:not([appearance])),
 :host([appearance=standard]) {
-  margin: var(--tct-scale-l3, var(--app-scale-3, 15px)) 0;
+  margin: var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0;
 }
 :host(:not([appearance])) .message,
 :host([appearance=standard]) .message {
-  grid-template-columns: 24px 1fr;
-  --comp-padding: var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3, 15px)));
+  --comp-icon-size: var(--tct-message-icon-size, var(--t-message-icon-size, 24px));
+  --comp-padding: var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));
+  grid-template-columns: var(--comp-icon-size) 1fr;
   padding: var(--comp-padding);
-  padding-top: calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1, 5px)));
-  padding-left: calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2, 10px)));
-}
-:host(:not([appearance])) .message-content,
-:host([appearance=standard]) .message-content {
-  padding-top: var(--tct-scale-1, var(--app-scale-1, 5px));
+  padding-left: calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));
+  padding-bottom: calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)));
 }
 :host(:not([appearance])) ::slotted(ul),
 :host([appearance=standard]) ::slotted(ul) {
-  margin: var(--tct-scale-l3, var(--app-scale-3, 15px)) 0;
+  margin: var(--tct-scale-l3, var(--app-scale-3x, 15px)) 0;
 }
 :host([appearance=minimal]) {
   margin: 0;
 }
 :host([appearance=minimal]) .message {
-  padding: var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2, 10px)));
+  padding: var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));
   grid-template-columns: 1fr;
 }
 :host([appearance=minimal]) ::slotted(ul) {
-  margin: var(--tct-scale-1, var(--app-scale-1, 5px)) 0;
+  margin: var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;
 }
 :host(:not([type])) .message,

package/dist/collection/components/q2-optgroup/styles.css CHANGED Viewed

@@ -8,7 +8,7 @@
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 :host {
@@ -69,16 +69,12 @@ button {
 }
 .q2-optgroup-header {
-  background-color: var(--tct-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))));
-  padding: var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-2, var(--app-scale-2, 10px));
-  font-weight: var(--tct-optgroup-header-font-weight, 600);
-  text-transform: var(--tct-optgroup-header-text-transform, uppercase);
-  /*
-  position: -webkit-sticky;
+  --comp-header-padding: var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));
+  background: var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6))))));
+  padding: var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));
+  font-weight: var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));
+  text-transform: var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));
   position: sticky;
-  top: 0;
+  top: var(--comp-multi-select-header-height, 0);
   z-index: 1;
-  temp removal, will fix with TCT-804
-  */
 }

package/dist/collection/components/q2-option/index.js CHANGED Viewed

@@ -1,10 +1,18 @@
-import { Component, Prop, h, Element, Host } from '@stencil/core';
+import { Component, Prop, h, Element, Host, Watch } from '@stencil/core';
 export class Q2Option {
   constructor() {
     this.role = 'option';
     this.tabindex = '-1';
     this._multiSelectHidden = false;
   }
+  componentWillLoad() {
+    this.handleDisplay();
+  }
+  handleDisplay() {
+    if (this.display || this.multiline)
+      return;
+    this.display = this.hostElement.textContent.trim();
+  }
   render() {
     const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
     const isDisabled = disabled || disabledGroup;
@@ -60,7 +68,7 @@ export class Q2Option {
     },
     "display": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -73,7 +81,7 @@ export class Q2Option {
         "text": ""
       },
       "attribute": "display",
-      "reflect": true
+      "reflect": false
     },
     "value": {
       "type": "string",
@@ -248,4 +256,8 @@ export class Q2Option {
     }
   }; }
   static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "display",
+      "methodName": "handleDisplay"
+    }]; }
 }

package/dist/collection/components/q2-option/styles.css CHANGED Viewed

@@ -8,7 +8,7 @@
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 :host {
@@ -65,14 +65,21 @@ button {
 }
 :host {
-  padding: 0 var(--tct-scale-2, var(--app-scale-2, 10px));
+  --comp-padding: 0 var(--app-scale-2x, 10px);
+  --comp-selected-icon-size: var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3x, 15px))));
+  padding: var(--tct-option-padding, var(--t-option-padding, var(--comp-padding)));
   min-height: 44px;
   align-items: center;
   cursor: pointer;
-  grid-template-columns: var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px))) 1fr;
+  grid-template-columns: var(--comp-selected-icon-size) 1fr;
   align-items: center;
   grid-template-areas: "icon content";
-  gap: var(--tct-scale-1, var(--app-scale-1, 5px));
+  gap: var(--tct-scale-1, var(--app-scale-1x, 5px));
+}
+:host([multiline]) {
+  --comp-padding: var(--app-scale-2, 10px) var(--app-scale-2, 10px);
+  --comp-selected-icon-size: var(--tct-option-selected-icon-size, var(--t-option-selected-icon-size, 26px));
 }
 :host([_no-select]) {
@@ -102,7 +109,7 @@ button {
 q2-icon {
   grid-area: icon;
-  --tct-icon-size: var(--tct-option-selected-icon-size, var(--tct-scale-3, var(--app-scale-3, 15px)));
+  --tct-icon-size: var(--comp-selected-icon-size);
 }
 .content {

package/dist/collection/components/q2-option-list/styles.css CHANGED Viewed

@@ -8,7 +8,7 @@
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 :host {
@@ -76,15 +76,15 @@ button {
   height: 0;
   opacity: 0;
   visibility: hidden;
-  background-color: var(--app-white);
-  color: var(--t-font-color);
+  background-color: var(--app-white, #ffffff);
+  color: var(--t-text, #4d4d4d);
   z-index: 100;
   width: max-content;
   min-width: var(--tct-option-list-min-width, var(--t-option-list-min-width, 135px));
-  box-shadow: var(--app-shadow-1);
+  box-shadow: var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));
   overflow: hidden;
   text-align: start;
-  transition: opacity var(--app-tween-1);
+  transition: opacity var(--app-tween-1, 0.2s ease);
   border-radius: var(--tct-option-list-border-radius, var(--t-option-list-border-radius, 0));
   --comp-scrollbar-size: var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));
   --comp-scrollbar-border-radius: var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));

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

@@ -8,7 +8,7 @@
 *:focus {
   outline: none;
-  box-shadow: var(--const-global-focus);
+  box-shadow: var(--const-global-focus, 0 0 0 2px #33b4ff);
 }
 :host {