q2-tecton-elements 1.69.1 → 1.70.0

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

@@ -41,6 +41,8 @@ export class Q2Calendar {
          * for use.
          */
         this.popoverMode = null;
+        /** Show success styles when the calendar is in a valid state. The error state takes precedence when both are set. */
+        this.valid = false;
         this.closeCalendar = () => {
             if (!this.open)
                 return;
@@ -799,10 +801,10 @@ export class Q2Calendar {
     }
     renderInputField() {
         const { isTypeable } = this;
-        return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, "aria-expanded": `${!!this.open}`, "aria-controls": "calendar-popover", hints: this.hintList, errors: this.errorList, onClick: isTypeable ? undefined : this.onInputClick, onChange: e => e.stopImmediatePropagation(), onTctChange: e => e.stopImmediatePropagation(), onInput: e => e.stopImmediatePropagation(), onTctInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "icon-right": isTypeable ? undefined : 'calendar', "format-modifier": isTypeable ? this.formatModifier : this.displayFormat || this.formatModifier, type: "date", "hide-messages": !isTypeable, "test-id": "inputAndCalendarToggle", _role: "combobox", _preventEntry: !isTypeable }, isTypeable && (h("q2-btn", { ref: el => (this.btnCalendarToggle = el), slot: "input-right", onClick: this.onInputClick, "test-id": "calendarToggle", label: "tecton.element.calendar.toggleAriaLabel", "hide-label": true }, h("q2-icon", { type: "calendar" })))));
+        return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, valid: this.valid, "aria-expanded": `${!!this.open}`, "aria-controls": "calendar-popover", hints: this.hintList, errors: this.errorList, onClick: isTypeable ? undefined : this.onInputClick, onChange: e => e.stopImmediatePropagation(), onTctChange: e => e.stopImmediatePropagation(), onInput: e => e.stopImmediatePropagation(), onTctInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "icon-right": isTypeable ? undefined : 'calendar', "format-modifier": isTypeable ? this.formatModifier : this.displayFormat || this.formatModifier, type: "date", "hide-messages": !isTypeable, "test-id": "inputAndCalendarToggle", _role: "combobox", _preventEntry: !isTypeable }, isTypeable && (h("q2-btn", { ref: el => (this.btnCalendarToggle = el), slot: "input-right", onClick: this.onInputClick, "test-id": "calendarToggle", label: "tecton.element.calendar.toggleAriaLabel", "hide-label": true }, h("q2-icon", { type: "calendar" })))));
     }
     render() {
-        return (h("click-elsewhere", { key: '55a24cc7138b3477aced736ad4a8ad9cae84e3cc', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), h("q2-popover", { key: '15637835c0cc04486398dc86dd589f492f487488', ref: el => (this.popoverElement = el), id: "calendar-popover", controlElement: this.innerInputContainer, open: this.open, direction: this.popoverDirection, minHeight: this.popoverMinHeight, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: true }, this.renderHintField(), this.renderCalendarPopover())));
+        return (h("click-elsewhere", { key: 'b13259be3c0d64bff32654faf0c738a7a7450c4e', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), h("q2-popover", { key: '2e183cd962e7abc4186b93da7edd835e0db5504a', ref: el => (this.popoverElement = el), id: "calendar-popover", controlElement: this.innerInputContainer, open: this.open, direction: this.popoverDirection, minHeight: this.popoverMinHeight, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: true }, this.renderHintField(), this.renderCalendarPopover())));
     }
     static get is() { return "q2-calendar"; }
     static get encapsulation() { return "shadow"; }
@@ -1436,6 +1438,26 @@ export class Q2Calendar {
                 "reflect": true,
                 "attribute": "typeable"
             },
+            "valid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show success styles when the calendar is in a valid state. The error state takes precedence when both are set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "valid",
+                "defaultValue": "false"
+            },
             "validDates": {
                 "type": "unknown",
                 "mutable": false,

package/dist/collection/components/q2-calendar/test/q2-calendar-test.vr.js

@@ -34,6 +34,10 @@ const RESTING_VARIANTS = [
         name: 'invalid',
         html: `<q2-calendar label="My calendar" placeholder="My date" invalid typeable></q2-calendar>`,
     },
+    {
+        name: 'valid',
+        html: `<q2-calendar label="My calendar" placeholder="My date" value="2025-05-20" valid></q2-calendar>`,
+    },
     {
         name: 'with-value',
         html: `<q2-calendar label="My calendar" placeholder="My date" value="2025-05-20"></q2-calendar>`,

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

@@ -144,7 +144,7 @@ button {
   display: grid;
   gap: var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));
   margin: 0;
-  color: var(--tct-card-font-color, var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d))));
+  color: var(--tct-card-font-color, var(--tct-card-color, var(--t-card-color, inherit)));
   backdrop-filter: var(--tct-card-backdrop-filter);
   background: var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));
   border-width: var(--tct-card-border-width, var(--t-card-border-width, 0px));
@@ -223,7 +223,7 @@ button {
 .container.is-static {
   cursor: auto;
   background: var(--tct-card-static-background, var(--tct-card-background, none));
-  color: var(--tct-card-static-font-color, var(--tct-card-color, var(--t-text, #4d4d4d)));
+  color: var(--tct-card-static-font-color, var(--tct-card-color, inherit));
   backdrop-filter: none;
   border-radius: 0;
   border: 0;

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

@@ -227,6 +227,9 @@ button {
 
 .card-wrapper > q2-btn {
   --const-double-focus-ring: none;
+  --tct-btn-min-height-medium: 0;
+  --tct-btn-padding-size-medium: 0;
+  --tct-btn-font-size-medium: inherit;
   width: 100%;
   max-width: 100%;
 }

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

@@ -22,6 +22,8 @@ export class Q2CardImage {
         // #endregion
         // #region State Properties
         this.computedSize = 'medium';
+        // #endregion
+        // #region Public Property API
         /**
          * Background style for the base layer.
          * - `'primary'` | `'secondary'` | `'tertiary'`: Solid theme colors
@@ -314,7 +316,7 @@ export class Q2CardImage {
     }
     renderCardContent() {
         const cardDetails = this.orientation === 'horizontal' ? this.renderHorizontalCardDetails() : this.renderVerticalCardDetails();
-        return (h("div", { role: !this.isDecorative && !this.clickable ? 'img' : undefined, "aria-label": !this.isDecorative && !this.clickable ? this.accessibilityLabel : undefined, "aria-hidden": this.isDecorative || this.clickable ? 'true' : undefined, class: {
+        return (h("div", { role: !this.isDecorative && !this.clickable ? 'img' : undefined, "aria-label": !this.isDecorative && !this.clickable ? this.tctAriaLabel : undefined, "aria-hidden": this.isDecorative || this.clickable ? 'true' : undefined, class: {
                 'card-image-container': true,
                 block: !this.inline,
                 clickable: this.clickable && !this.disabled,
@@ -365,13 +367,13 @@ export class Q2CardImage {
             }, style: cardTypeColorStyle }, this.getCardTypeText())), h("div", { class: "vertical-vendor-row" }, h("div", { class: "vertical-vendor" }, vendorPath && (h("img", { src: vendorPath, alt: "", "aria-hidden": "true" }))))));
     }
     render() {
-        const cardContent = this.clickable ? (h("q2-btn", { disabled: this.disabled, label: this.accessibilityLabel, hideLabel: true, onClick: this.handleCardClick }, this.renderCardContent())) : (this.renderCardContent());
+        const cardContent = this.clickable ? (h("q2-btn", { block: true, disabled: this.disabled, label: this.tctAriaLabel, hideLabel: true, onClick: this.handleCardClick }, this.renderCardContent())) : (this.renderCardContent());
         const showBanner = !!this.cardStatus && this.size === 'large';
-        return (h(Host, { key: '3c71f0e8e6fd22ebf3a3e3b98f890767ced6060b', class: {
+        return (h(Host, { key: '4425c2f04d081d93b56ed67f00b949c8143d0046', class: {
                 [`${this.orientation}`]: true,
                 'has-action': this.hasActionSlotContent,
                 'has-banner': showBanner,
-            } }, this.renderStatusBanner(), h("div", { key: '761c7a611ec3f8e0ffd7a5b51e2944f83876f5ae', class: "card-wrapper" }, cardContent, this.renderAction())));
+            } }, this.renderStatusBanner(), h("div", { key: '1d264f88e00805b9153a7ac59f4ea367bf28dc3f', class: "card-wrapper" }, cardContent, this.renderAction())));
     }
     static get is() { return "q2-card-image"; }
     static get encapsulation() { return "shadow"; }
@@ -388,25 +390,6 @@ export class Q2CardImage {
     static get assetsDirs() { return ["assets"]; }
     static get properties() {
         return {
-            "accessibilityLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Accessible label for the card image. When provided, this value is applied as `aria-label`\non either the card container (non-clickable) or the wrapping button (clickable)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "accessibility-label"
-            },
             "background": {
                 "type": "string",
                 "mutable": false,
@@ -737,6 +720,25 @@ export class Q2CardImage {
                 "reflect": false,
                 "attribute": "status-text-override"
             },
+            "tctAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the card image. When provided, this value is applied as `aria-label`\non either the card container (non-clickable) or the wrapping button (clickable)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tct-aria-label"
+            },
             "vendor": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/q2-chart-area/q2-chart-area.css

@@ -65,6 +65,10 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-area-chart-width?: (<length-percentage>) Controls the width of the area chart.
+ * @prop --tct-area-chart-height?: (<length-percentage>) Controls the height of the area chart.
+ */
 :host {
   width: var(--tct-area-chart-width, 100%);
   height: var(--tct-area-chart-height, 100%);

package/dist/collection/components/q2-chart-bar/q2-chart-bar.css

@@ -65,6 +65,10 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-bar-chart-width?: (<length-percentage>) Controls the width of the bar chart.
+ * @prop --tct-bar-chart-height?: (<length-percentage>) Controls the height of the bar chart.
+ */
 :host {
   width: var(--tct-bar-chart-width, 100%);
   height: var(--tct-bar-chart-height, 100%);

package/dist/collection/components/q2-chart-donut/q2-chart-donut.css

@@ -156,7 +156,7 @@ button:focus-visible {
   height: 100%;
   width: 100%;
   text-align: center;
-  color: var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, var(--t-text, #4d4d4d)));
+  color: var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, inherit));
   margin-inline: auto;
   display: flex;
   flex-direction: column;

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

@@ -30,6 +30,7 @@ export class Q2Checkbox {
             if (!(event.target instanceof HTMLInputElement))
                 return;
             const { value, checked } = event.target;
+            this.checked = checked;
             mirrorEmit(this, ['change', 'tctChange'], {
                 value,
                 checked,
@@ -179,7 +180,7 @@ export class Q2Checkbox {
             containerClasses.push('has-multiline-label');
         if (this.hideLabel)
             textLabelClasses.push('sr');
-        return (h("div", { key: '071518056d28c0c4d0693a202d554bc456d046cf', class: containerClasses.join(' ') }, h("input", { key: 'ad8a499e028c52c59610fff14f5149fde9afdbc6', ref: el => (this.inputElement = el), "aria-describedby": this.hasDescription ? 'description' : undefined, "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`, "aria-labelledby": this.ariaLabelledBy, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: '073cb174831c555ec1ec4a4dc951393a9767b731', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton", "aria-hidden": "true" }, this.renderCheckboxSVG()), h("div", { key: '75feec3b0db261773e26788e4a000d49522efbbb', class: textLabelClasses.join(' '), ref: el => (this.labelTextElement = el) }, h("label", { key: '551c209e99da0fe58fcf73b8cb0350230133500b', "test-id": "checkboxLabel", htmlFor: this._id, id: this.labelId }, h("div", { key: 'af6e9d20ae62270abb3e860024705780cc02d824', class: "label-content" }, loc(this.label), h("slot", { key: '81a79439a4503ee2d0820985ad05a915ec6d8864', onSlotchange: this.queueLabelLayoutUpdate }), h("slot", { key: 'd86de89110f4bba45ff40e998ef115256c544056', name: "label", onSlotchange: this.queueLabelLayoutUpdate })))), this._tooltip && (h("span", { key: 'd3819c91a4c7ddf4d93f2da0050dbace7b1854d7', id: this.tooltipId, class: "sr", "test-id": "checkboxTooltipText" }, this._tooltip)), this.hasDescription && (h("div", { key: '9cdf914b053273605322cb9125544ee119a18aec', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description), h("slot", { key: '87fa1308868d32ca5c912ca57a7111f12d30a83b', name: "description" })))));
+        return (h("div", { key: '0dff5141bf9fd0eb9b9d92f55c80b046a8224bad', class: containerClasses.join(' ') }, h("input", { key: 'ac0565c29bcb4b2e29403215ceb5fc0221578209', ref: el => (this.inputElement = el), "aria-describedby": this.hasDescription ? 'description' : undefined, "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`, "aria-labelledby": this.ariaLabelledBy, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: '56684f4fb63b0f6d136e69420f2e632a807ab03a', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton", "aria-hidden": "true" }, this.renderCheckboxSVG()), h("div", { key: '4f40ff7c46337d002e3097e849e8a6d163271787', class: textLabelClasses.join(' '), ref: el => (this.labelTextElement = el) }, h("label", { key: '3d9803210e8462137d28205891762da8a9fa19cd', "test-id": "checkboxLabel", htmlFor: this._id, id: this.labelId }, h("div", { key: 'de644e9efa49bfb2c84400d4f748678f1724786d', class: "label-content" }, loc(this.label), h("slot", { key: 'f537a700ad48155f2896ae1880fcfdc4f1e60226', onSlotchange: this.queueLabelLayoutUpdate }), h("slot", { key: '184d686720af904c8f5cda2d4508cd07add7b1bf', name: "label", onSlotchange: this.queueLabelLayoutUpdate })))), this._tooltip && (h("span", { key: '05a8eacb9150b56ce30183561c72b0c607c60c8c', id: this.tooltipId, class: "sr", "test-id": "checkboxTooltipText" }, this._tooltip)), this.hasDescription && (h("div", { key: '7b06216cede51eb0bc13932ed17e3237854c1316', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description), h("slot", { key: '723ac0aa53756d0bd9f06e7bb2a1231056cdca50', name: "description" })))));
     }
     static get is() { return "q2-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-currency/q2-currency.css

@@ -101,7 +101,7 @@ button {
 }
 
 .currency {
-  --comp-currency-color: var(--tct-currency-color, var(--t-text, #4d4d4d));
+  --comp-currency-color: var(--tct-currency-color, inherit);
   color: var(--comp-currency-color);
   font-size: var(--tct-currency-font-size, inherit);
   font-weight: var(--tct-currency-font-weight, inherit);

package/dist/collection/components/q2-data-table/q2-data-table.js

@@ -90,8 +90,11 @@ export class Q2DataTable {
                 rows: selectedRows,
                 allSelected: allRowsSelected,
             });
-            if (selectEvent.defaultPrevented)
+            if (selectEvent.defaultPrevented) {
+                if (event.target)
+                    event.target.checked = row.selected;
                 return;
+            }
             this.serializedRows = this.serializedRows.map(row => (row.id === selectedRow.id ? selectedRow : row));
             this.allRowsSelected = allRowsSelected;
             this.someRowsSelected = isIndeterminate;
@@ -416,7 +419,7 @@ export class Q2DataTable {
     // #region Render Methods
     render() {
         const { caption } = this;
-        return (h("div", { key: 'ce5dfe7dc753ee2f2a8419e742bf4afef6eccdb0', class: "container" }, h("table", { key: 'f899c9959a20da0dec2d4b9011e01af4f2c05a49' }, caption && h("caption", { key: '1e8d106a6524baf6d228003907d48b7515dc0561', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
+        return (h("div", { key: '9f2281aae60f873a2755db7ed67aaab73c79f499', class: "container" }, h("table", { key: '2d057320dad36ea04d1037546ef2b9a8135b0a08' }, caption && h("caption", { key: '2b4ae6daf2d2f3c75e1819166cf758b5ff5f3ab4', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
     }
     renderCellContent(cell) {
         if (!cell)

package/dist/collection/components/q2-detail/q2-detail.css

@@ -149,30 +149,30 @@ button {
   flex: 1;
   text-align: left;
   line-height: 1.5;
-  color: var(--tct-detail-label-font-color, #141430);
+  color: var(--tct-detail-label-font-color, inherit);
 }
 .label-size-xsmall {
-  color: var(--tct-detail-label-xsmall-font-color, #6f6f82);
+  color: var(--tct-detail-label-xsmall-font-color, var(--tct-detail-label-font-color, inherit));
   font-size: var(--tct-detail-label-xsmall-font-size, 14px);
   font-weight: var(--tct-detail-label-xsmall-font-weight, 400);
 }
 .label-size-small {
-  color: var(--tct-detail-label-small-font-color);
+  color: var(--tct-detail-label-small-font-color, var(--tct-detail-label-font-color, inherit));
   font-size: var(--tct-detail-label-small-font-size, 14px);
   font-weight: var(--tct-detail-label-small-font-weight, 400);
 }
 .label-size-medium {
-  color: var(--tct-detail-label-medium-font-color);
+  color: var(--tct-detail-label-medium-font-color, var(--tct-detail-label-font-color, inherit));
   font-size: var(--tct-detail-label-medium-font-size, 14px);
   font-weight: var(--tct-detail-label-medium-font-weight, 400);
 }
 .label-size-large {
-  color: var(--tct-detail-label-large-font-color);
+  color: var(--tct-detail-label-large-font-color, var(--tct-detail-label-font-color, inherit));
   font-size: var(--tct-detail-label-large-font-size, 16px);
   font-weight: var(--tct-detail-label-large-font-weight, 400);
 }
 .label-size-xlarge {
-  color: var(--tct-detail-label-xlarge-font-color);
+  color: var(--tct-detail-label-xlarge-font-color, var(--tct-detail-label-font-color, inherit));
   font-size: var(--tct-detail-label-xlarge-font-size, 18px);
   font-weight: var(--tct-detail-label-xlarge-font-weight, 400);
 }
@@ -187,34 +187,34 @@ button {
   display: flex;
   align-items: center;
   line-height: 1.5;
-  color: var(--tct-detail-description-font-color, #141430);
+  color: var(--tct-detail-description-font-color, inherit);
   column-gap: var(--tct-detail-description-gap-column, var(--app-scale-1x, 5px));
 }
 .description-alignment-right {
   justify-content: flex-end;
 }
 .description-size-xsmall {
-  color: var(--tct-detail-description-xsmall-font-color, #6f6f82);
+  color: var(--tct-detail-description-xsmall-font-color, var(--tct-detail-description-font-color, inherit));
   font-size: var(--tct-detail-description-xsmall-font-size, 14px);
   font-weight: var(--tct-detail-description-xsmall-font-weight, 400);
 }
 .description-size-small {
-  color: var(--tct-detail-description-small-font-color);
+  color: var(--tct-detail-description-small-font-color, var(--tct-detail-description-font-color, inherit));
   font-size: var(--tct-detail-description-small-font-size, 14px);
   font-weight: var(--tct-detail-description-small-font-weight, 400);
 }
 .description-size-medium {
-  color: var(--tct-detail-description-medium-font-color);
+  color: var(--tct-detail-description-medium-font-color, var(--tct-detail-description-font-color, inherit));
   font-size: var(--tct-detail-description-medium-font-size, 24px);
   font-weight: var(--tct-detail-description-medium-font-weight, 600);
 }
 .description-size-large {
-  color: var(--tct-detail-description-large-font-color);
+  color: var(--tct-detail-description-large-font-color, var(--tct-detail-description-font-color, inherit));
   font-size: var(--tct-detail-description-large-font-size, 28px);
   font-weight: var(--tct-detail-description-large-font-weight, 600);
 }
 .description-size-xlarge {
-  color: var(--tct-detail-description-xlarge-font-color);
+  color: var(--tct-detail-description-xlarge-font-color, var(--tct-detail-description-font-color, inherit));
   font-size: var(--tct-detail-description-xlarge-font-size, 32px);
   font-weight: var(--tct-detail-description-xlarge-font-weight, 700);
 }

package/dist/collection/components/q2-dropdown/q2-dropdown.js

@@ -238,7 +238,7 @@ export class Q2Dropdown {
     // #endregion
     // #region Local Methods
     get determineDropdownItemCount() {
-        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;
+        return this.hostElement.querySelectorAll(`${this.dropdownItemSelector}, ${this.optionSelector}`).length;
     }
     get hasCustomControl() {
         return !!this.hostElement.querySelector('[slot=control]');
@@ -364,7 +364,7 @@ export class Q2Dropdown {
     // #region Render Methods
     render() {
         const btnProps = this.toggleButtonProps;
-        return (h("click-elsewhere", { key: '1fb0465b5d0a0228c12e53161f795e9039c3e482', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: 'ca2afb3f037229568969431724617e82f817d892', tabIndex: 0, ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, onFocusout: this.handleFocusOut, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (h(Fragment, null, this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label))), this.icon ? h("q2-icon", { type: this.icon }) : ' '))), h("q2-popover", { key: '5e65c0527e6f3950c1d02df536f336c2f5a63fed', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, onFocusout: this.handleFocusOut, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("slot", { key: '6304f30a52d2a72359d78aef3ae1983560d8ad97', name: "popover-top" }), h("q2-option-list", { key: 'b4eee650726da0455eb8fe625f78b6bdcd4a6418', onPopoverState: this.onPopoverState, id: "option-list", ref: el => (this.optionList = el), type: "menu", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '29e19ea60b40e3b52025c67161030000d2723a20' })), h("slot", { key: 'd9497a3f4f0d2f9624af5628d6a304d954f5461e', name: "popover-bottom" }))));
+        return (h("click-elsewhere", { key: '27e7a560b21894fb10175be18c9cb07e37f59db3', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: 'b53dace27e75fdbcd87a1689470a1466ad9e07d3', tabIndex: 0, ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, onFocusout: this.handleFocusOut, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (h(Fragment, null, this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label))), this.icon ? h("q2-icon", { type: this.icon }) : ' '))), h("q2-popover", { key: '4a15e7d6d8f474c8464e39e35437cd8edcc9487d', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, onFocusout: this.handleFocusOut, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("slot", { key: '7854254650f81b8d5a229acbec55aa8beab36882', name: "popover-top" }), h("q2-option-list", { key: 'a38c9411306ad8d39456dce81bb50e9af13bf1f6', onPopoverState: this.onPopoverState, id: "option-list", ref: el => (this.optionList = el), type: "menu", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '7472127d019366f76eff86cd744d050d197b25c1' })), h("slot", { key: '5af670e8f5ed273175100ddc9202c44e2c06f7b3', name: "popover-bottom" }))));
     }
     static get is() { return "q2-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,7 +22,10 @@ export class Q2EditableField {
         this.cancelClick = (event) => {
             event === null || event === void 0 ? void 0 : event.stopPropagation();
             mirrorEmit(this, ['change', 'tctChange'], { editing: false, name: 'cancel' });
-            this.inputElement.setValue(this.defaultValue);
+            this.innerValue = undefined;
+            this.formattedValue = undefined;
+            this.inputElement.value = '';
+            this.inputElement.value = this.defaultValue;
         };
         this.editClick = (event) => {
             event === null || event === void 0 ? void 0 : event.stopPropagation();
@@ -55,7 +58,6 @@ export class Q2EditableField {
         this.saveClick = (event) => {
             event && event.stopPropagation();
             const valueFromInputProp = this.hostElement.shadowRoot.querySelector('q2-input').value;
-            this.defaultValue = valueFromInputProp;
             mirrorEmit(this, ['change', 'tctChange'], {
                 editing: false,
                 name: 'save',
@@ -180,6 +182,9 @@ export class Q2EditableField {
             return;
         this.inputElement.focus();
     }
+    valueObserver(newValue) {
+        this.defaultValue = newValue;
+    }
     // #endregion
     // #region Local Methods
     get hasErrors() {
@@ -206,7 +211,7 @@ export class Q2EditableField {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'bd5759fc666e43c948cf4826e2075ba5566038cc' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
+        return (h("div", { key: '8231300cc04b5b2dce65d3c39ef2e4c0bc892696' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
     }
     static get is() { return "q2-editable-field"; }
     static get encapsulation() { return "shadow"; }
@@ -673,6 +678,9 @@ export class Q2EditableField {
             }, {
                 "propName": "errors",
                 "methodName": "errorsObserver"
+            }, {
+                "propName": "value",
+                "methodName": "valueObserver"
             }];
     }
     static get listeners() {

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

@@ -121,6 +121,9 @@ button {
  * @prop --tct-input-error-prefix-background: (<color>) Controls the background color of the input prefix in the error state.
  * @prop --tct-input-error-prefix-font-color?: (<color>) Controls the optional text color of the input prefix in the error state.
  * @prop --tct-input-placeholder-font-color: (<color>) Controls the placeholder text color of the input.
+ * @prop --tct-input-placeholder-font-size?: (<length-percentage>) Controls the optional font size of the input placeholder text.
+ * @prop --tct-input-placeholder-font-weight?: (<number>) Controls the optional font weight of the input placeholder text.
+ * @prop --tct-input-placeholder-padding?: (<length-percentage>+) Controls the optional inner padding of the input placeholder text.
  * @prop --tct-input-autofill-background: (<color>) Controls the background color of the input field when autofilled.
  * @prop --tct-input-autofill-font-color?: (<color>) Controls the optional text color of the input field when autofilled.
  * @prop --tct-input-label-font-color?: (<color>) Controls the optional text color of the input label.
@@ -393,9 +396,11 @@ button {
   max-width: 100%;
 }
 .has-custom-display .custom-display-container {
+  width: 100%;
+}
+.has-custom-display .custom-display-container ::slotted([slot=custom-display]) {
   --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-field::placeholder,
@@ -508,6 +513,11 @@ q2-icon {
   --tct-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));
 }
 
+.icon-valid {
+  color: var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));
+  --tct-icon-stroke-primary: var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));
+}
+
 .messages-container {
   height: 0px;
   overflow: hidden;

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

@@ -86,6 +86,8 @@ export class Q2Input {
         this.showVisibilityToggle = false;
         /** Specifies the field's expected [input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types), and provides the optimal keyboard on mobile devices. */
         this.type = 'text';
+        /** Displays a success state icon when the field does not have active errors. */
+        this.valid = false;
         /**
          * Sets textSelectedForDeletion to true if the user has selected text for deletion
          * This is used to prevent other logic from running when text is deleted
@@ -442,6 +444,9 @@ export class Q2Input {
     get hasInputRightSlot() {
         return hasSlotContent(this.hostElement, 'input-right');
     }
+    get hasValidState() {
+        return this.valid && !this.hasError;
+    }
     get inputDescribedBy() {
         return this.showMessages ? `${this.inputId}-description` : undefined;
     }
@@ -515,6 +520,8 @@ export class Q2Input {
         const classNames = ['field-container'];
         if (this.hasError)
             classNames.push('has-error');
+        if (this.hasValidState)
+            classNames.push('has-valid');
         if (!!this.value)
             classNames.push('has-value');
         if (this.clearable && !!this.value)
@@ -708,7 +715,7 @@ export class Q2Input {
     }
     renderInputContainerDOM() {
         const { hasInputLeftSlot, hasInputRightSlot } = this;
-        return (h("div", { class: "input-container", tabindex: -1, "test-id": "inputContainer" }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("div", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("div", null, h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft }))), hasInputLeftSlot && h("slot", { name: "input-left" }), this.showIconSeparator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" })))), this.pseudo ? this.renderPseudoInputDOM() : this.renderStandardInputDOM(), h("div", { class: "input-icons-container-right" }, h("q2-btn", { class: this.clearClasses.join(' '), label: loc('tecton.element.input.clear', [this.label]), hideLabel: true, "test-id": "clearButton", onMouseDown: e => e.preventDefault(), onClick: this.onClearInput, onKeyDown: e => e.stopPropagation() }, h("q2-icon", { type: "close", class: "icon-clear" })), ['password', 'text', 'ssn', 'tin'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility, label: loc(this.visibilityToggleAriaLabel, { label: this.label }), "hide-label": true }, 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.hasError && this.type !== 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" }))), this.iconRight && !this.formattedValueObject.suffix && (h("div", null, h("q2-icon", { type: this.iconRight, class: "icon-right" }))), hasInputRightSlot && h("slot", { name: "input-right" }))));
+        return (h("div", { class: "input-container", tabindex: -1, "test-id": "inputContainer" }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("div", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("div", null, h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft }))), hasInputLeftSlot && h("slot", { name: "input-left" }), this.showIconSeparator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" }))), this.hasValidState && this.type === 'currency' && (h("div", { class: "input-valid-icon-container", "test-id": "divIconValid" }, h("q2-icon", { type: "success", class: "icon-valid", "test-id": "iconValid" })))), this.pseudo ? this.renderPseudoInputDOM() : this.renderStandardInputDOM(), h("div", { class: "input-icons-container-right" }, h("q2-btn", { class: this.clearClasses.join(' '), label: loc('tecton.element.input.clear', [this.label]), hideLabel: true, "test-id": "clearButton", onMouseDown: e => e.preventDefault(), onClick: this.onClearInput, onKeyDown: e => e.stopPropagation() }, h("q2-icon", { type: "close", class: "icon-clear" })), ['password', 'text', 'ssn', 'tin'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility, label: loc(this.visibilityToggleAriaLabel, { label: this.label }), "hide-label": true }, 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.hasValidState && this.type !== 'currency' && (h("div", { class: "input-valid-icon-container", "test-id": "divIconValid" }, h("q2-icon", { type: "success", class: "icon-valid", "test-id": "iconValid" }))), this.hasError && this.type !== 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" }))), this.iconRight && !this.formattedValueObject.suffix && (h("div", null, h("q2-icon", { type: this.iconRight, class: "icon-right" }))), hasInputRightSlot && h("slot", { name: "input-right" }))));
     }
     renderPseudoInputDOM() {
         const showPlaceholder = !this.value && !!this.placeholder;
@@ -725,7 +732,7 @@ export class Q2Input {
     }
     render() {
         const { ariaControls, ariaExpanded } = this.ariaAttributes;
-        return (h(Host, { key: '46cdbeba2566abda875c4aa2cf8e4faa9ea2c85c', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, h("div", { key: '024c8a9551a4ae3661109e30da7f651b1b8fc7af', class: this.wrapperClasses }, h("div", { key: '11c2a87970b4a32d2b2efa7f2bad892ac0db63bf', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this))));
+        return (h(Host, { key: 'edb58506d07e300340ece461b1788acfcbaf712a', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, h("div", { key: '10bcd4e4adb9614628958029aca0d7cb96593c31', class: this.wrapperClasses }, h("div", { key: 'bfad0e782b14bc1ab1c2fd01cacc79d76f82f6ab', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this))));
     }
     static get is() { return "q2-input"; }
     static get encapsulation() { return "shadow"; }
@@ -1564,6 +1571,26 @@ export class Q2Input {
                 "attribute": "type",
                 "defaultValue": "'text'"
             },
+            "valid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays a success state icon when the field does not have active errors."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "valid",
+                "defaultValue": "false"
+            },
             "validity": {
                 "type": "unknown",
                 "mutable": true,

package/dist/collection/components/q2-input/test/q2-input-test.vr.js

@@ -44,6 +44,14 @@ const VARIANTS = [
         html: '<q2-input label="My input" placeholder="Enter text here"></q2-input>',
         setup: 'errors',
     },
+    {
+        name: 'valid',
+        html: '<q2-input label="My input" placeholder="Enter text here" valid value="Valid value"></q2-input>',
+    },
+    {
+        name: 'valid-currency',
+        html: '<q2-input label="My input" placeholder="Enter text here" type="currency" valid value="12.34"></q2-input>',
+    },
 ];
 const FOCUS_VARIANTS = new Set(['default', 'hinted', 'errored']);
 const applyInputSetup = async (page, setup) => {

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

@@ -144,6 +144,7 @@ button {
  * @prop --tct-item-avatar-height: (<length>) Controls the height applied to an avatar rendered in the item bullet area.
  * @prop --tct-item-avatar-width: (<length>) Controls the width applied to an avatar rendered in the item bullet area.
  * @prop --tct-item-action-align-items: (<custom-ident>) Controls the align-items value of the item action (trailing) area.
+ * @prop --tct-item-action-btn-icon-padding: (<length>) Controls the padding of icon buttons in the item action area.
  * @prop --tct-item-action-icon-height: (<length>) Controls the height applied to icon buttons in the item action area.
  * @prop --tct-item-action-icon-width: (<length>) Controls the width applied to icon buttons in the item action area.
  * @prop --tct-item-action-icon-size: (<length>) Controls the icon size applied to icons in the item action area.
@@ -198,9 +199,6 @@ button {
 }
 
 .action {
-  --tct-btn-icon-height: var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));
-  --tct-btn-icon-width: var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));
-  --tct-icon-size: var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));
   --tct-radio-label-hidden-columns: 18px;
   --tct-radio-label-margin-right: 0;
   --tct-radio-margin: 0;
@@ -212,9 +210,16 @@ button {
 .action-no-bullet {
   grid-column: 2;
 }
+.action ::slotted(q2-dropdown[type=icon]),
+.action ::slotted(q2-btn:not([intent])) {
+  --tct-btn-icon-height: var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));
+  --tct-btn-icon-width: var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));
+  --tct-icon-size: var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));
+  --tct-btn-icon-padding: var(--tct-item-action-btn-icon-padding, 0);
+}
 
 .body {
-  color: var(--tct-item-body-color, var(--t-textA, #747474));
+  color: var(--tct-item-body-color, inherit);
   font-size: var(--tct-item-body-font-size, var(--app-font-size, 14px));
   font-weight: var(--tct-item-body-font-weight, 400);
   font-style: var(--tct-item-body-font-style, inherit);
@@ -282,7 +287,7 @@ button {
 }
 
 .header {
-  color: var(--tct-item-header-color, var(--t-text, #4d4d4d));
+  color: var(--tct-item-header-color, inherit);
   font-size: var(--tct-item-header-font-size, 16px);
   font-style: var(--tct-item-header-font-style, inherit);
   font-weight: var(--tct-item-header-font-weight, 600);