q2-tecton-elements 1.14.2 → 1.15.1-alpha.0

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

@@ -6,23 +6,21 @@ export class Q2Checkbox {
     this.id = `checkbox-${createGuid()}`;
     ///// Actions ////////
     this.onInputClick = (event) => {
-      event.stopPropagation();
-      event.preventDefault();
-      if (this.disabled || this.readonly)
+      const hasCustomHandler = !!this.hostElement.onchange;
+      const isNotInteractive = this.disabled || this.readonly;
+      if (isNotInteractive || hasCustomHandler)
+        event.preventDefault();
+      if (isNotInteractive)
         return;
       if (!(event.target instanceof HTMLInputElement))
         return;
+      const { value, checked } = event.target;
       this.change.emit({
-        value: event.target.value,
-        checked: event.target.checked,
+        value,
+        checked,
       });
       this.inputElement.focus();
     };
-    this.onKeyDown = (event) => {
-      if (this.readonly && event.code === 'Space') {
-        event.preventDefault();
-      }
-    };
   }
   ////////// LIFECYCLE HOOKS ////////
   componentWillLoad() {
@@ -30,6 +28,7 @@ export class Q2Checkbox {
   }
   componentDidLoad() {
     overrideFocus(this.hostElement);
+    this.hostElement.click = () => this.inputElement.click();
   }
   //////// Host Element Events ////////
   defaultChangeHandler(event) {
@@ -52,7 +51,7 @@ export class Q2Checkbox {
     if (this.hideLabel)
       textLabelClasses.push('sr');
     return (h("div", { class: "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 ? loc(this.label) : undefined, "aria-describedby": this.description ? 'description' : undefined, "test-id": "q2CheckboxInnerCheckBox", onKeyDown: this.onKeyDown, onClick: this.onInputClick }),
+      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-describedby": this.description ? 'description' : undefined, "test-id": "q2CheckboxInnerCheckBox", onClick: this.onInputClick }),
       h("label", { htmlFor: this.id, class: "label-control", "test-id": "checkboxButton" }, this.generateCheckboxSVG()),
       h("div", { class: textLabelClasses.join(' ') },
         h("label", { "test-id": "checkboxLabel", htmlFor: this.id },

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

@@ -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 {
@@ -67,7 +67,7 @@ button {
 :host {
   display: block;
   position: relative;
-  padding: var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px)))) 0;
+  padding: var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0;
 }
 
 .container {

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

@@ -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,7 +65,7 @@ button {
 }
 
 :host {
-  margin-top: var(--tct-scale-2, var(--app-scale-2, 10px));
+  margin-top: var(--tct-scale-2, var(--app-scale-2x, 10px));
 }
 
 fieldset {
@@ -110,7 +110,7 @@ legend.sr-only {
 }
 
 .optional-tag {
-  margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px)));
+  margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));
   color: var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));
   font-size: var(--tct-input-label-optional-font-size, 12px);
   font-weight: var(--tct-input-label-optional-font-weight, 400);

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

@@ -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 {
@@ -67,18 +67,18 @@ button {
 .q2-element-dropdown {
   display: none;
   position: absolute;
-  background-color: var(--app-white);
-  color: var(--t-font-color);
+  background-color: var(--app-white, #ffffff);
+  color: var(--t-text, #4d4d4d);
   left: 0;
   width: 100%;
   z-index: 100;
   margin-top: 1px;
-  box-shadow: var(--app-shadow-1);
+  box-shadow: var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));
   height: 0;
   overflow: hidden;
   opacity: 0;
   visibility: hidden;
-  transition: opacity var(--app-tween-1);
+  transition: opacity var(--app-tween-1, 0.2s ease);
   border-radius: var(--tct-dropdown-border-radius, --t-dropdown-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)));
@@ -138,7 +138,7 @@ button {
 }
 
 .dropdown-button.unstyled .dropdown-button-content {
-  padding: var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));
+  padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));
 }
 
 .q2-element-dropdown {

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

@@ -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,7 +65,7 @@ button {
 }
 
 .dropdown-separator {
-  margin: 0 var(--tct-scale-1, var(--app-scale-1, 5px));
+  margin: 0 var(--tct-scale-1, var(--app-scale-1x, 5px));
   border-bottom: 1px solid var(--tct-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));
 }
 
@@ -80,7 +80,7 @@ button {
 }
 
 .dropdown-item-content {
-  padding: 12px var(--tct-scale-3, var(--app-scale-3, 15px));
+  padding: 12px var(--tct-scale-3, var(--app-scale-3x, 15px));
   text-align: left;
   background-color: var(--tct-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))));
   color: var(--tct-dropdown-item-font-color, inherit);

package/dist/collection/components/q2-editable-field/index.js

@@ -121,7 +121,7 @@ export class Q2EditableField {
   }
   generateEditStateDOM() {
     return (h("div", { class: this.wrapperClass, hidden: !this.editing },
-      h("q2-input", { ref: el => (this.q2InputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: (Array.isArray(this.hints) && this.hints.map(str => loc(str))) || undefined, errors: (Array.isArray(this.errors) && this.errors.map(str => loc(str))) || undefined, type: this.type, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onInput: this.inputInput, onChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }),
+      h("q2-input", { ref: el => (this.q2InputElement = el), label: this.locLabel, hideLabel: this.hideLabel, value: this.value, hints: (Array.isArray(this.hints) && this.hints.map(str => loc(str))) || undefined, errors: (Array.isArray(this.errors) && this.errors.map(str => loc(str))) || undefined, type: this.type, disabled: this.disabled, formatModifier: this.formatModifier, maxlength: this.maxlength, "test-id": "editableInput", onInput: this.inputInput, onChange: this.inputChange, onKeyDown: this.inputKeyDown, onClick: this.inputClick }),
       h("q2-btn", { class: "cancel-edit", label: `${loc('tecton.element.editableField.cancel')} ${this.locLabel}`, "hide-label": true, "test-id": "cancelButton", onClick: this.cancelClick },
         h("q2-icon", { type: "close" })),
       h("q2-btn", { class: "save-edit", label: `${loc('tecton.element.editableField.save')} ${this.locLabel}`, "hide-label": true, "test-id": "saveButton", onClick: this.saveClick },
@@ -141,7 +141,7 @@ export class Q2EditableField {
       this.generateEditBtn()));
   }
   generateEditBtn() {
-    return (h("q2-btn", { ref: el => (this.q2EditBtnElement = el), class: "begin-edit", label: `${loc('tecton.element.editableField.edit')} ${this.locLabel}`, "hide-label": true, "test-id": "editButton", onClick: this.editClick },
+    return (h("q2-btn", { ref: el => (this.q2EditBtnElement = el), class: "begin-edit", label: `${loc('tecton.element.editableField.edit')} ${this.locLabel}`, "hide-label": true, disabled: this.disabled, "test-id": "editButton", onClick: this.editClick },
       h("q2-icon", { type: "edit" })));
   }
   static get is() { return "q2-editable-field"; }
@@ -326,6 +326,23 @@ export class Q2EditableField {
       "attribute": "persistent-label",
       "reflect": true
     },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": true
+    },
     "hints": {
       "type": "unknown",
       "mutable": false,

package/dist/collection/components/q2-editable-field/styles.css

@@ -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 {
@@ -79,7 +79,7 @@ button {
 
 q2-input,
 .text-wrapper {
-  margin: 0 var(--tct-scale-2, var(--app-scale-2, 10px)) 0 0;
+  margin: 0 var(--tct-scale-2, var(--app-scale-2x, 10px)) 0 0;
 }
 
 q2-input {
@@ -104,7 +104,7 @@ q2-btn {
 }
 
 dl {
-  margin: var(--tct-scale-0, var(--app-scale-0, 0));
+  margin: var(--tct-scale-0, var(--app-scale-0x, 0));
 }
 
 dt {
@@ -112,7 +112,7 @@ dt {
 }
 
 dd {
-  margin-left: var(--tct-scale-0, var(--app-scale-0, 0));
+  margin-left: var(--tct-scale-0, var(--app-scale-0x, 0));
   display: flex;
   align-items: center;
 }

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

@@ -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-input/index.js

@@ -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

@@ -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

@@ -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

@@ -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 {