q2-tecton-elements 1.10.8 → 1.11.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

@@ -7,10 +7,26 @@ export class Q2Checkbox {
     ///// Actions ////////
     this.onInputChange = (event) => {
       event.stopPropagation();
+      if (this.disabled || this.readonly)
+        return;
+      if (!(event.target instanceof HTMLInputElement))
+        return;
       this.change.emit({
         value: event.target.value,
         checked: event.target.checked
       });
+      this.inputElement.focus();
+    };
+    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 ////////
@@ -22,7 +38,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;
     }
   }
@@ -38,21 +57,21 @@ export class Q2Checkbox {
   /////// View Methods ///////
   render() {
     return (h("div", { class: "checkbox-container" },
-      h("input", { 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, onChange: this.onInputChange, "test-id": "q2CheckboxInnerCheckBox" }),
-      h("label", { htmlFor: this.id, "test-id": "checkboxButton" },
+      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, onChange: this.onInputChange }),
+      h("label", { "test-id": "checkboxButton" },
         this.generateCheckboxSVG(),
         !this.hideLabel && (h("div", { class: "q2-checkbox-label-content" },
-          loc(this.label),
+          h("span", { class: "label-text", onClick: this.onControlClick }, loc(this.label)),
           h("slot", null))))));
   }
   generateCheckboxSVG() {
     if (this.type === 'favorite') {
-      return h("q2-icon", { type: "star", class: "checkbox-icon" });
+      return h("q2-icon", { type: "star", class: "checkbox-icon", onClick: this.onControlClick });
     }
     if (this.type === 'toggle') {
       return this.generateToggleSVG();
     }
-    return (h("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 20 20", class: "checkbox-icon", focusable: "false" },
+    return (h("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 20 20", class: "checkbox-icon", focusable: "false", onClick: this.onControlClick },
       h("rect", { x: "1", y: "1", width: "18", height: "18", rx: "3" }),
       (this.checked || this.indeterminate) && this.generateCheckBoxSVGFill()));
   }
@@ -63,7 +82,7 @@ export class Q2Checkbox {
     return h("polyline", { class: "checkbox-fill checked-fill", points: "5 11 8.5 14.5 15 6" });
   }
   generateToggleSVG() {
-    return (h("div", { class: "toggle-svg" },
+    return (h("div", { class: "toggle-svg", onClick: this.onControlClick },
       h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 46 14", class: "toggle-track" },
         h("rect", { width: "36", height: "14", rx: "7", x: "5" })),
       h("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 30 30", class: "toggle-indicator" },
@@ -201,6 +220,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

@@ -72,7 +72,6 @@ button {
 label {
   display: flex;
   align-items: center;
-  cursor: pointer;
   --comp-checkbox-outer-stroke-color: var(
       --tct-checkbox-outer-stroke-color,
       var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))
@@ -106,6 +105,10 @@ input:disabled + label {
   flex-shrink: 0;
 }
 
+.checkbox-icon, .label-text {
+  cursor: pointer;
+}
+
 input:focus + label .checkbox-icon {
   box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff));
 }
@@ -135,8 +138,8 @@ input:focus + label .checkbox-icon {
 
 .q2-checkbox-label-content {
   font-weight: var(--tct-checkbox-font-weight, 400);
-  flex: 1 1 auto;
   width: calc( 100% - var(--tct-checkbox-size, 20px) - var(--tct-scale-2, var(--app-scale-2, 10px)) );
+  cursor: inherit;
 }
 
 input:checked + label .q2-checkbox-label-content {
@@ -193,6 +196,7 @@ input:checked + label .q2-checkbox-label-content {
 
 :host([alignment=right]) .checkbox-icon,
 .toggle-svg {
+  cursor: pointer;
   margin-right: 0;
   margin-left: var(--tct-scale-2, var(--app-scale-2, 10px));
 }

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-editable-field/index.js

@@ -6,6 +6,7 @@ export class Q2EditableField {
     this.editing = false;
     this.label = '';
     this.scheduledAfterRender = [];
+    this.defaultValue = this.value;
     //////// ACTIONS /////////
     this.inputInput = (e) => {
       e.stopPropagation();
@@ -34,12 +35,19 @@ export class Q2EditableField {
     this.saveClick = (event) => {
       event && event.stopPropagation();
       const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;
+      this.defaultValue = valueFromInputProp;
       this.change.emit({
         editing: false,
         name: 'save',
         value: this.innerValue || valueFromInputProp,
         formattedValue: this.formattedValue || valueFromInputProp
       });
+      setTimeout(() => {
+        const { errors = [] } = this;
+        if (!errors.length)
+          return;
+        this.hostElement.focus();
+      }, 1);
     };
     this.editClick = (event) => {
       event === null || event === void 0 ? void 0 : event.stopPropagation();
@@ -48,6 +56,7 @@ export class Q2EditableField {
     this.cancelClick = (event) => {
       event === null || event === void 0 ? void 0 : event.stopPropagation();
       this.change.emit({ editing: false, name: 'cancel' });
+      this.hostElement.shadowRoot.querySelector('q2-input').value = this.defaultValue;
     };
   }
   get locLabel() {
@@ -65,28 +74,23 @@ export class Q2EditableField {
     overrideFocus(this.hostElement);
   }
   //////// OBSERVERS //////////
+  errorsObserver() {
+    var _a;
+    const { editing, errors = [] } = this;
+    const focusedElement = this.hostElement.shadowRoot.activeElement;
+    const isInputFocused = (_a = (focusedElement === null || focusedElement === void 0 ? void 0 : focusedElement.tagName) === 'Q2-INPUT') !== null && _a !== void 0 ? _a : false;
+    const hasErrors = errors.length;
+    if (isInputFocused || !focusedElement || !editing || !hasErrors)
+      return;
+    this.q2InputElement.focus();
+  }
   ariaLabelObserver() {
     handleAriaLabel(this);
   }
   observesEditing(newValue, oldValue) {
-    if (newValue === oldValue) {
+    if (newValue === oldValue)
       return;
-    }
-    //When editing state changes focus on input or edit button after render
-    if (newValue) {
-      this.scheduledAfterRender.push(() => {
-        this.hostElement.shadowRoot
-          .querySelector('q2-input')
-          .dispatchEvent(new FocusEvent('focus'));
-      });
-    }
-    else {
-      this.scheduledAfterRender.push(() => {
-        this.hostElement.shadowRoot
-          .querySelector('.begin-edit')
-          .dispatchEvent(new FocusEvent('focus'));
-      });
-    }
+    this.scheduledAfterRender.push(this.hostElement.focus);
   }
   get wrapperClass() {
     return `q2-editable-field-wrapper ${this.editing ? 'editing' : ''}`;
@@ -190,7 +194,7 @@ export class Q2EditableField {
     },
     "label": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -208,7 +212,7 @@ export class Q2EditableField {
     },
     "hideLabel": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -225,7 +229,7 @@ export class Q2EditableField {
     },
     "ariaLabel": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -389,6 +393,9 @@ export class Q2EditableField {
     }]; }
   static get elementRef() { return "hostElement"; }
   static get watchers() { return [{
+      "propName": "errors",
+      "methodName": "errorsObserver"
+    }, {
       "propName": "ariaLabel",
       "methodName": "ariaLabelObserver"
     }, {

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,10 +299,15 @@ 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" },
+    let ariaLabelSuffix = '';
+    if (this.optional) {
+      ariaLabelSuffix = loc('tecton.element.input.optional');
+    }
+    if (this.readonly) {
+      ariaLabelSuffix = loc('tecton.element.input.readonly');
+    }
+    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)) ||
+        ''}${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() {
@@ -610,6 +615,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 +854,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,