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

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 && this.hideLabel ? 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

@@ -138,7 +138,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;
 }
 

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

@@ -3,6 +3,7 @@ import { createGuid, loc } from 'src/utils';
 export class Q2CheckboxGroup {
   constructor() {
     this.disabled = false;
+    this.readonly = false;
     this.optional = false;
     this.hasError = false;
     this.id = `checkbox-group-${createGuid()}`;
@@ -39,6 +40,8 @@ export class Q2CheckboxGroup {
     }
   }
   valueUpdated() {
+    if (this.readonly)
+      return;
     this.checkboxElements.forEach(check => {
       if (this.protectedValue.hasOwnProperty(check.value)) {
         check.checked = this.value[check.value];
@@ -130,6 +133,24 @@ export class Q2CheckboxGroup {
       "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"
+    },
     "optional": {
       "type": "boolean",
       "mutable": false,

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

@@ -146,14 +146,14 @@ button {
 
 q2-btn[color=primary] ~ .q2-element-dropdown.dropup,
 q2-btn[intent=workflow-primary] ~ .q2-element-dropdown.dropup {
-  bottom: calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-primary-border-width, var(--t-btn-primary-border-width, 0)));
+  bottom: calc( var-list(var-prefixer(btn-icon-height), 44px) + var-list(var-prefixer(btn-primary-border-width), 0) );
 }
 
 q2-btn[color=secondary] ~ .q2-element-dropdown.dropup,
 q2-btn[intent=workflow-secondary] ~ .q2-element-dropdown.dropup {
-  bottom: calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-secondary-border-width, var(--t-btn-secondary-border-width, 0)));
+  bottom: calc( var-list(var-prefixer(btn-icon-height), 44px) + var-list(var-prefixer(btn-secondary-border-width), 0) );
 }
 
 q2-btn[intent=neutral] ~ .q2-element-dropdown.dropup {
-  bottom: calc(var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px)) + var(--tct-btn-neutral-border-width, var(--t-btn-neutral-border-width, 0)));
+  bottom: calc( var-list(var-prefixer(btn-icon-height), 44px) + var-list(var-prefixer(btn-neutral-border-width), 0) );
 }

package/dist/collection/components/q2-icon/icons.js

@@ -163,6 +163,16 @@ const icons = {
     markup: () => (h("g", null,
       h("path", { d: "M13 2C6.986 2 2.11 6.559 2.11 12.182c0 3.2 1.579 6.054 4.046 7.92V24l3.716-2.062c.991.278 2.04.427 3.128.427 6.014 0 10.89-4.559 10.89-10.183C23.89 6.56 19.013 2 13 2zm1.147 13.655l-2.816-2.926-5.424 2.999 5.946-6.31 2.816 2.926 5.424-3-5.946 6.31z", class: "filled" })))
   },
+  'brand-payrecs-color': {
+    markup: () => (h("g", { "fill-rule": "evenodd" },
+      h("path", { fill: "#194879", d: "M9.27-347v-6.29h3.17c1.99 0 3.27.01 3.43.02.97.06 1.8.25 2.55.59 1.21.55 2.08 1.53 2.43 2.74.27.96.25 2.09-.06 2.99-.03.1-.12.3-.19.43-.38.78-1 1.42-1.81 1.86-.07.04-.12.07-.12.08 0 0 .59.88 1.31 1.93.72 1.06 1.31 1.93 1.31 1.94s-1.02.01-2.25.01h-2.25l-1.07-1.58-1.07-1.58H13.5v3.16H9.27v-6.3zm6.01-.08c.36-.03.64-.1.86-.23.06-.03.17-.12.25-.21.13-.13.16-.17.23-.31.09-.19.12-.3.15-.53.04-.38-.04-.77-.22-1.05-.17-.26-.39-.42-.72-.52-.29-.09-.32-.09-1.36-.1l-.96-.01v2.96h.79c.43.02.87.01.98 0z", transform: "translate(4 360)" }),
+      h("path", { fill: "#508dca", d: "M-3.3-383v-6.29h3.14c1.86 0 3.25.01 3.41.02 2.48.14 4.21 1.18 4.92 2.97.37.93.42 2.14.13 3.15-.27.92-.86 1.75-1.64 2.29-.67.47-1.49.79-2.44.94-.59.1-.96.12-2.25.12H.92v3.1H-3.3v-6.3zm6.26-.1c.48-.09.81-.28 1.02-.6.17-.25.23-.5.21-.91-.01-.3-.03-.44-.13-.63-.22-.47-.63-.71-1.31-.77-.1-.01-.55-.02-1.01-.02H.92v2.96l.95-.01c.8.01.96 0 1.09-.02z", transform: "translate(4 396)" })))
+  },
+  'brand-payrecs-filled': {
+    markup: () => (h("g", { class: "filled" },
+      h("path", { d: "M9.27-347v-6.29h3.17c1.99 0 3.27.01 3.43.02.97.06 1.8.25 2.55.59 1.21.55 2.08 1.53 2.43 2.74.27.96.25 2.09-.06 2.99-.03.1-.12.3-.19.43-.38.78-1 1.42-1.81 1.86-.07.04-.12.07-.12.08 0 0 .59.88 1.31 1.93.72 1.06 1.31 1.93 1.31 1.94s-1.02.01-2.25.01h-2.25l-1.07-1.58-1.07-1.58H13.5v3.16H9.27v-6.3zm6.01-.08c.36-.03.64-.1.86-.23.06-.03.17-.12.25-.21.13-.13.16-.17.23-.31.09-.19.12-.3.15-.53.04-.38-.04-.77-.22-1.05-.17-.26-.39-.42-.72-.52-.29-.09-.32-.09-1.36-.1l-.96-.01v2.96h.79c.43.02.87.01.98 0z", transform: "translate(4 360)" }),
+      h("path", { d: "M-3.3-383v-6.29h3.14c1.86 0 3.25.01 3.41.02 2.48.14 4.21 1.18 4.92 2.97.37.93.42 2.14.13 3.15-.27.92-.86 1.75-1.64 2.29-.67.47-1.49.79-2.44.94-.59.1-.96.12-2.25.12H.92v3.1H-3.3v-6.3zm6.26-.1c.48-.09.81-.28 1.02-.6.17-.25.23-.5.21-.91-.01-.3-.03-.44-.13-.63-.22-.47-.63-.71-1.31-.77-.1-.01-.55-.02-1.01-.02H.92v2.96l.95-.01c.8.01.96 0 1.09-.02z", transform: "translate(4 396)" })))
+  },
   'brand-snapchat-color': {
     markup: () => (h("g", { fill: "none", "fill-rule": "evenodd" },
       h("g", null,

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

@@ -288,7 +288,7 @@ export class Q2Input {
         this.computedIconLeft && (h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft })),
         this.showIconSeperator && 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, "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()) : (h("input", { class: "input-field", id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, max: this.max, min: this.min, "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 })),
       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" }))),
@@ -299,11 +299,17 @@ export class Q2Input {
   }
   pseudoInputDOM() {
     const showPlaceholder = !this.value && !!this.placeholder;
-    return (h("button", { class: "pseudo-input 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)) || ''}${(this
-        .optional &&
-        loc('tecton.element.input.optional')) ||
-        ''}`, role: (this.role && `${this.role}`) || undefined, disabled: !!this.disabled, "test-id": "q2InputInnerClearButton" },
-      h("span", { class: showPlaceholder ? 'placeholder-text' : '' }, showPlaceholder ? this.placeholder : this.value)));
+    let ariaLabelSuffix = '';
+    if (this.optional) {
+      ariaLabelSuffix = loc('tecton.element.input.optional');
+    }
+    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))));
   }
   calculateCursorPositionOnInput() {
     const input = this.inputField;
@@ -610,6 +616,40 @@ export class Q2Input {
       "attribute": "optional",
       "reflect": true
     },
+    "min": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "min",
+      "reflect": true
+    },
+    "max": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max",
+      "reflect": true
+    },
     "formatModifier": {
       "type": "string",
       "mutable": false,
@@ -815,6 +855,23 @@ export class Q2Input {
       "attribute": "aria-activedescendant",
       "reflect": false
     },
+    "current": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false'",
+        "resolved": "\"date\" | \"false\" | \"location\" | \"page\" | \"step\" | \"time\" | \"true\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "current",
+      "reflect": false
+    },
     "errors": {
       "type": "unknown",
       "mutable": false,

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

@@ -128,7 +128,7 @@ label {
       3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px)
   );
   --comp-input-icon-clearance: 34px;
-  --comp-input-min-height: 44px;
+  --comp-input-min-height: var(--tct-input-min-height, 44px);
   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))));
@@ -153,6 +153,8 @@ label {
   padding: 0 var(--tct-input-horizontal-padding, var(--t-input-horizontal-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));
   background-color: transparent;
   color: var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));
+  display: inline-block;
+  text-align: var(--tct-input-align, "start");
   /* To remove up/down arrow in number field for webkit based browser */
   /* For Firefox */
 }
@@ -167,12 +169,25 @@ label {
 .input-field[type=number] {
   -moz-appearance: textfield;
 }
+.input-field::-ms-clear {
+  display: none;
+}
+.input-field[type=search]::-webkit-search-decoration, .input-field[type=search]::-webkit-search-cancel-button, .input-field[type=search]::-webkit-search-results-button, .input-field[type=search]::-webkit-search-results-decoration {
+  display: none;
+}
 .input-field[disabled] {
   cursor: not-allowed;
 }
 .right-aligned .input-field {
   text-align: right;
 }
+.input-field:is(input) {
+  flex: 1;
+}
+.input-field:is(button) {
+  display: inline-flex;
+  align-items: center;
+}
 
 .input-container:focus-within {
   border-width: var(--comp-input-focus-border-width, 1px);
@@ -180,24 +195,14 @@ label {
   box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-input-focus-box-shadow, var(--t-input-focus-box-shadow, 0 0 transparent));
 }
 
-input {
-  display: inline-block;
-}
-input::-ms-clear {
-  display: none;
-}
-input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
-  display: none;
-}
-
-input::placeholder,
+.input-field::placeholder,
 .placeholder-text {
   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 {
-  display: inline-flex;
-  align-items: center;
+  min-width: 0;
+  flex: 1;
 }
 .pseudo-input span {
   white-space: nowrap;
@@ -249,13 +254,8 @@ 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,23 +263,15 @@ 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/styles.css

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

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

@@ -1,23 +1,16 @@
-import { Component, Prop, h, Event, Element, Host } from '@stencil/core';
+import { Component, Prop, h, Element, Host } from '@stencil/core';
 export class Q2Option {
   constructor() {
     this.role = 'option';
     this.tabindex = '-1';
     this._multiSelectHidden = false;
-    this.onClick = (event) => {
-      event.stopImmediatePropagation();
-      const { disabled, disabledGroup } = this;
-      if (disabled || disabledGroup)
-        return;
-      this.click.emit();
-    };
   }
   render() {
     const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
     const isDisabled = disabled || disabledGroup;
     return (h(Host, { "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": selected ? 'true' : undefined, "aria-hidden": _multiSelectHidden ? 'true' : undefined },
       this.selected && h("q2-icon", { type: "checkmark" }),
-      h("div", { class: "content", onClick: this.onClick },
+      h("div", { class: "content" },
         h("slot", null))));
   }
   static get is() { return "q2-option"; }
@@ -218,6 +211,23 @@ export class Q2Option {
       "attribute": "active",
       "reflect": true
     },
+    "noSelect": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "_no-select",
+      "reflect": true
+    },
     "_multiSelectHidden": {
       "type": "boolean",
       "mutable": false,
@@ -237,21 +247,5 @@ export class Q2Option {
       "defaultValue": "false"
     }
   }; }
-  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"; }
 }

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

@@ -75,6 +75,11 @@ button {
   gap: var(--tct-scale-1, var(--app-scale-1, 5px));
 }
 
+:host([_no-select]) {
+  grid-template-columns: 1fr;
+  grid-template-areas: "content";
+}
+
 :host([aria-disabled]) {
   cursor: not-allowed;
   opacity: var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4));