q2-tecton-elements 1.71.4 → 1.73.0

package/dist/cjs/q2-select.cjs.entry.js

@@ -1,11 +1,11 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-SpDCZABA.js');
+var index$1 = require('./index-BqyWHpNu.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 var actionSheet = require('./action-sheet-DUBlF_x3.js');
 
-const q2SelectCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}.q2-element-dropdown{display:none;position:absolute;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, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));height:0;overflow:hidden;opacity:0;visibility:hidden;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, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-default-select-margin:var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-select-margin, var(--comp-default-select-margin))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px);padding-top:var(--tct-select-selected-display-padding, var(--app-scale-2x, 10px));padding-bottom:var(--tct-select-selected-display-padding, var(--app-scale-2x, 10px))}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 4px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-disabled-opacity, var(--t-select-multi-select-option-disabled-opacity, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.popover-top-container .multi-select-header input:focus-visible+label{box-shadow:var(--const-double-focus-ring)}`;
+const q2SelectCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}.q2-element-dropdown{display:none;position:absolute;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, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));height:0;overflow:hidden;opacity:0;visibility:hidden;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, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-default-select-margin:var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-select-margin, var(--comp-default-select-margin))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;letter-spacing:inherit;--tct-input-icon-size:var(--tct-select-icon-size, var(--const-px-18, 18px));--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px);padding-top:var(--tct-select-selected-display-padding, var(--app-scale-2x, 10px));padding-bottom:var(--tct-select-selected-display-padding, var(--app-scale-2x, 10px))}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 4px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-disabled-opacity, var(--t-select-multi-select-option-disabled-opacity, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.popover-top-container .multi-select-header input:focus-visible+label{box-shadow:var(--const-double-focus-ring)}`;
 
 const Q2Select = class {
     constructor(hostRef) {
@@ -19,6 +19,7 @@ const Q2Select = class {
         this.guid = index$1.createGuid();
         this.isOrientationUpdate = false;
         this.lastTouchWasInPopover = false;
+        this.removingSelectedDisplay = false;
         this.scheduledAfterRender = [];
         // #endregion
         // #region State Properties
@@ -77,7 +78,12 @@ const Q2Select = class {
          * Takes priority over `optional` if both are `true`.
          */
         this.readonly = false;
-        /** Enables search functionality. */
+        /**
+         * Enables search functionality.
+         * @warning
+         * `searchable` is not compatible with the `hoist` prop. The action sheet workflow used when `hoist` is `true` does not support in-list search filtering.
+         * If both are set, `searchable` has no effect while the action sheet is active.
+         */
         this.searchable = false;
         /**
          * Each item in this array should correspond to the value of a `q2-option` element.
@@ -185,9 +191,6 @@ const Q2Select = class {
         this.inputInputHandler = (event) => {
             event.stopPropagation();
             const eventValue = event.detail.value;
-            const shouldClearValue = !!this.value;
-            if (shouldClearValue)
-                this.clearValue();
             if (!this.open)
                 this.openDropdownWithoutActiveElement();
             this.prioritizeSearch = true;
@@ -204,6 +207,8 @@ const Q2Select = class {
                 return;
             // slots are incompatible with action sheet
             if (actionSheet.shouldShowActionSheet(this, event) && !hasSlot) {
+                event.preventDefault();
+                event.stopPropagation();
                 return this.executeActionSheet(event);
             }
             const keysForOptionListToHandle = [
@@ -276,16 +281,16 @@ const Q2Select = class {
             this.open = open;
         };
         this.onSelectedDisplayClick = (event) => {
+            var _a, _b;
             // Stop click from bubbling to q2-input's onClick (which would toggle the dropdown)
             event.stopPropagation();
             if (this.open) {
-                this.focusInput();
+                (_a = this.innerInputField) === null || _a === void 0 ? void 0 : _a.focus();
                 return;
             }
+            (_b = this.innerInputField) === null || _b === void 0 ? void 0 : _b.focus();
             this.prioritizeSearch = this.searchable;
-            this.clearSelectedDisplay();
             this.openDropdownWithoutActiveElement();
-            this.focusInput();
         };
         this.onSelectedDisplayMousedown = (event) => {
             // Prevent focus shift away from the hidden input
@@ -376,20 +381,27 @@ const Q2Select = class {
         }
     }
     delegateFocus(event) {
-        var _a;
+        var _a, _b;
         // Always delegate focus from host to inner input (fixes programmatic focus)
         if (index$1.isEventFromElement(event, this.hostElement)) {
             (_a = this.innerInputField) === null || _a === void 0 ? void 0 : _a.focus();
         }
-        // Manage display state for searchable selects (preserves existing behavior)
-        const fromHost = index$1.isRelatedTargetWithinHost(event, this.hostElement);
-        this.prioritizeSearch = fromHost && this.searchable;
+        const fromOutside = index$1.isRelatedTargetWithinHost(event, this.hostElement);
+        const hasRobustSelectedDisplay = !!this.selectedDisplaySlot ||
+            (this.multilineOptions && !!this.firstSelectedOptionElement && !this.firstSelectedOptionElement.display);
+        this.prioritizeSearch = fromOutside && this.searchable && (this.multiple || hasRobustSelectedDisplay);
         if (this.prioritizeSearch) {
             this.clearSelectedDisplay();
         }
+        else if (fromOutside && this.searchable && !!this.value) {
+            (_b = this.innerInputField) === null || _b === void 0 ? void 0 : _b.select();
+        }
     }
     handleFocusout(event) {
         var _a;
+        // Removing the robust display while opening search can emit a focusout without a destination.
+        if (!event.relatedTarget && (this.removingSelectedDisplay || (this.open && this.prioritizeSearch)))
+            return;
         const relatedTarget = event.relatedTarget;
         const isLeavingHost = !((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget)) && !this.hostElement.contains(relatedTarget);
         if (isLeavingHost)
@@ -400,8 +412,12 @@ const Q2Select = class {
         this.inputKeydownHandler(event);
     }
     popoverStateChanged({ detail: { open } }) {
-        if (this.open !== open)
-            this.open = open;
+        if (this.open === open)
+            return;
+        this.open = open;
+        if (open)
+            return;
+        this.focusInput();
     }
     handleTctClick() {
         const { name, version } = index$1.getBrowserInfo();
@@ -511,14 +527,14 @@ const Q2Select = class {
             return;
         this.optionElements.forEach(element => (element.multiline = newValue));
     }
-    openChanged(isOpen) {
+    openChanged(isOpen, wasOpen) {
         if (isOpen) {
             this.addTouchEventListeners();
         }
         else {
             this.removeTouchEventListeners();
-            // Reset prioritizeSearch when dropdown closes to ensure selected display can be restored
-            this.prioritizeSearch = false;
+            if (wasOpen)
+                this.prioritizeSearch = false;
         }
         this.scheduledAfterRender.push(async () => {
             await index$1.waitForNextPaint();
@@ -717,7 +733,9 @@ const Q2Select = class {
         if (slot) {
             slot.removeEventListener('mousedown', this.onSelectedDisplayMousedown);
             slot.removeEventListener('click', this.onSelectedDisplayClick);
+            this.removingSelectedDisplay = true;
             slot.remove();
+            setTimeout(() => (this.removingSelectedDisplay = false), 0);
         }
     }
     clearValue() {
@@ -808,13 +826,15 @@ const Q2Select = class {
         return (index.h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputContainer, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popDirection, mode: this.popoverMode || undefined, block: true }, index.h("div", { class: "popover-content" }, index.h("q2-option-list", { onPopoverState: this.onPopoverState, ref: el => (this.optionList = el), type: "listbox", id: "option-list", "show-selected": this.showSelected, label: this.listLabel, multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, onChange: e => e.stopPropagation(), onTctChange: this.onOptionListChange }, index.h("slot", null)), index.h("div", { class: "popover-top-container", ref: el => (this.popoverTopContainer = el), hidden: !this.multiple && !this.hasPopoverTop, tabindex: "-1" }, index.h("slot", { name: "popover-top" }), this.multiple && this.renderVisibilityToggle())), index.h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, index.h("slot", { name: "popover-bottom" }))));
     }
     renderSelectField() {
-        var _a;
+        var _a, _b;
         return (index.h(index.Fragment, null, index.h("div", { "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), index.h("q2-input", { ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && index$1.loc(this.label)) || '', value: this.selectedDisplay, clearable: (!this.disabled && this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) ||
                 undefined, errors: (Array.isArray(this.errors) &&
                 this.errors.length > 0 &&
                 this.errors.map(error => index$1.loc(error))) ||
                 (this.invalid && ['tecton.element.select.invalid']) ||
-                [], disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, valid: this.valid, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: e => e.stopImmediatePropagation(), onTctInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: e => e.stopPropagation(), onTctChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined, _role: "combobox", _preventEntry: !this.searchable }, this.renderCustomDisplay()), index.h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, index.h("slot", { name: "q2-select-display" })), this.renderOptionsDropdown()));
+                [], disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, valid: this.valid, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: e => e.stopImmediatePropagation(), onTctInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: e => e.stopPropagation(), onTctChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined, _ariaDescription: this.multiple && ((_b = this.selectedOptions) === null || _b === void 0 ? void 0 : _b.length)
+                ? index$1.loc('tecton.element.select.selectionCount', [this.selectedOptions.length])
+                : undefined, _role: "combobox", _preventEntry: !this.searchable }, this.renderCustomDisplay()), index.h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, index.h("slot", { name: "q2-select-display" })), this.renderOptionsDropdown()));
     }
     renderVisibilityToggle() {
         var _a, _b;
@@ -825,7 +845,7 @@ const Q2Select = class {
             ]), checked: showSelected, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown }), index.h("label", { htmlFor: "selected" }, index$1.loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))))));
     }
     render() {
-        return (index.h("click-elsewhere", { key: 'edb9951db5493781ee1f5da0ed5f6c03aff107e9', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
+        return (index.h("click-elsewhere", { key: 'c5ee7401b7dc4350fb01992e9a8a76e6700cb63c', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-stepper-pane.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-DUaTw_1N.js');
 var component = require('./component-iASoq6gx.js');
-var index$1 = require('./index-SpDCZABA.js');
+var index$1 = require('./index-BqyWHpNu.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 
 const q2StepperPaneCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch: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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:block;position:relative}`;
@@ -75,7 +75,7 @@ const Q2StepperPane = class {
     // #region Render Methods
     render() {
         const { label, isActive } = this;
-        return (index.h(index.Host, { key: '7acf643f717380c37eb25334534afbca81ac8ab6', role: "listitem" }, index.h(index.Fragment, { key: '0241a9ad68973eea81c961070d6171dab3241f79' }, index.h("div", { key: '25e9a406b8c0672eec836920706d44ed53906e1d', "aria-label": label && index$1.loc(label), tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, index.h("slot", { key: '00f456ab21d2ecf58946de5df397bb3c81c2a749' })), index.h("div", { key: 'bdac4c2caf9b9bf5a6280258475afa552e578e7e', hidden: true }, index.h("slot", { key: '2ede75ad70c10eda1f8c6de4556bccc9c66e8b97', name: "label", onSlotchange: () => this.contentChange.emit() }), index.h("slot", { key: '990f2d44a0f9cb0437b63f3570a94874752a94da', name: "description", onSlotchange: () => this.contentChange.emit() })), index.h("slot", { key: '1f12d65608f73a3737abb7f987cab300ec1c9856', name: "children" }))));
+        return (index.h(index.Host, { key: '6cbcc9f6363bf6f60ff2d999b9317e32691168da', role: "listitem" }, index.h(index.Fragment, { key: 'f9b8d56b05e6d26978feab6386849498f797cca6' }, index.h("div", { key: '383a77ce1848255574680375e7df122bf4468f95', role: "group", "aria-labelledby": "pane-label", tabindex: "0", hidden: !isActive && !(this.isChildActive && this.showWithChildren) }, index.h("slot", { key: '9b9cf0bd60e23d9860174c5525c3f688c70411f4' })), index.h("div", { key: '8f628fe11acfc7a8df7c84013a7eaca9d5a1327a', hidden: true }, index.h("span", { key: '6c03721fb71d8e3c5c48a6af80ae8723575e0205', id: "pane-label" }, index.h("slot", { key: 'da9a253e3399d0552478a29c743fc4a73f432ddf', name: "label", onSlotchange: () => this.contentChange.emit() }, label && index$1.loc(label))), index.h("slot", { key: 'd7229f76aedb1c96623fac655982b88d2769b9ae', name: "description", onSlotchange: () => this.contentChange.emit() })), index.h("slot", { key: '7670d7b17b74732d0dd14198dd50560d005700d1', name: "children" }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-stepper-vertical.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-SpDCZABA.js');
+var index$1 = require('./index-BqyWHpNu.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 var sanitizeHtmlString = require('./sanitize-html-string-D17Pr7-c.js');
 
@@ -328,7 +328,7 @@ const Q2StepperVertical = class {
         return (index.h("li", { role: "presentation" }, index.h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelledBy, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-expanded": !!pane.children.length ? `${isExpanded}` : null, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, label && (index.h(index.Fragment, null, index.h("span", { class: "sr-only", id: positionId }, positionLabel), index.h("span", { class: "sr-only", id: statusId }, statusLabel))), statusIcon ? (index.h("div", { class: "step-icon" }, index.h("q2-icon", { "aria-hidden": "true", type: statusIcon }))) : (index.h("div", { class: "step-bubble" }, stepNumber)), label && (index.h("div", null, index.h("div", { class: "step-label", id: labelId, innerHTML: sanitizeHtmlString.sanitizeHTMLString(stepLabel) }), description && (index.h("div", { class: "step-description", id: descriptionId, innerHTML: sanitizeHtmlString.sanitizeHTMLString(description) }))))), this.renderSpacer(pane, isExpanded, isLastStep)));
     }
     render() {
-        return (index.h(index.Fragment, { key: 'eab8d8816aebfb5aa104a17b75dc0e8b4ed4ce68' }, index.h("ul", { key: 'f155624641313e8375e6ee448fed150ae0c62cf1', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), index.h("div", { key: '1ff078e00dcb1e4c861bc691ccc31ec5c1436fac', role: "list" }, index.h("slot", { key: 'adf07ae0725ccc7c1ce149052f2325e6bfc01677' }))));
+        return (index.h(index.Fragment, { key: '318ce778645240cfb969f39c7df5326691b6c5ed' }, index.h("ul", { key: '3af2a138e648b887b3d8f96cf2b06bb6f11d1159', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), index.h("div", { key: '628d3fb7485c7648d31b7a4935476a61cdfef7b4', role: "list" }, index.h("slot", { key: '9d616d4a7234dee7715a696d0a17d37914741b1a' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-stepper.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-SpDCZABA.js');
+var index$1 = require('./index-BqyWHpNu.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 var sanitizeHtmlString = require('./sanitize-html-string-D17Pr7-c.js');
 
@@ -296,7 +296,7 @@ const Q2Stepper = class {
         const containerClasses = ['step-container'];
         if (scrollEnabled)
             containerClasses.push('has-scroll');
-        return (index.h(index.Fragment, { key: 'cd7a09546e4b74cf98f5e27dbcf0efce71e02781' }, index.h("div", { key: 'aaa383584217da20fdd01174f4b136dfef0128b7', class: containerClasses.join(' ') }, scrollEnabled && (index.h(index.Fragment, { key: '6f7f38d768b274409606132cc62d36d48812f50c' }, index.h("div", { key: '98e26550803496a0edd0e7415b4ec9e16b501722', class: "gradient-left", hidden: !showScrollLeft }), index.h("div", { key: '58102ecd26dd3f6b36d530f36ecc109b287b4faa', class: "gradient-right", hidden: !showScrollRight }), index.h("q2-btn", { key: 'a475ba4a846ea5cf93a5ca46422a5473e0d266bd', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: index$1.loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, index.h("q2-icon", { key: 'b040f724a926e5c07a81438e3586e0eb7a3c063b', type: "chevron-left" })), index.h("q2-btn", { key: '119dbcd49ce282cbccd58be097f8833e22df4fb4', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: index$1.loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, index.h("q2-icon", { key: 'c656a9493134eb6a4ea0a008ee94829fc708ecfe', type: "chevron-right" })))), index.h("ul", { key: '09e1472989c7c2e6c40504072bca2790865e013a', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), index.h("div", { key: '0b25c172d585892aa9e286dac6080ce2bbb80e1a', role: "list" }, index.h("slot", { key: '507375368c8e89a94f8af0a44bf4951fd14d7466', onSlotchange: () => this.onSlotChange() }))));
+        return (index.h(index.Fragment, { key: 'c9839ff458e2d71fb66c42cb5b4ae394c7ffb9ff' }, index.h("div", { key: '51d8a914662c2794e16928c971ef995bca933776', class: containerClasses.join(' ') }, scrollEnabled && (index.h(index.Fragment, { key: '0b1d1dd0c973d2266a468a8f81d0c9bdd2a430cc' }, index.h("div", { key: '87b9ae7e5ab260ee8743e78302017389941c3ead', class: "gradient-left", hidden: !showScrollLeft }), index.h("div", { key: 'a5d487517c497ae927a1fd05d7c4631aa00d76bf', class: "gradient-right", hidden: !showScrollRight }), index.h("q2-btn", { key: 'fe008283e673c2b51acf1cc654ed1c844a6d33bf', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: index$1.loc('tecton.element.stepper.scrollLeft'), onTctClick: () => this.onScrollBtnClick('left') }, index.h("q2-icon", { key: '7d83dfafb861da55085fa33a4aca620416849e27', type: "chevron-left" })), index.h("q2-btn", { key: 'c81adb720c387ddabb7eead010db863b0e295208', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: index$1.loc('tecton.element.stepper.scrollRight'), onTctClick: () => this.onScrollBtnClick('right') }, index.h("q2-icon", { key: 'c0d5939662d35c18ea9c486a1dc8da243b779ea2', type: "chevron-right" })))), index.h("ul", { key: '07501b7abbe4e828686b87c057b79bae4059e826', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), index.h("div", { key: 'df8d51e7b40ee1999b0a280fa8524559accfec9a', role: "list" }, index.h("slot", { key: 'a8ce54b65b8c7d8542e60811a7215fed12400e38', onSlotchange: () => this.onSlotChange() }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-surface.cjs.entry.js

@@ -86,7 +86,7 @@ const Q2Surface = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h(index.Host, { key: '992667ac1d625dff77a01d06d058865f99d8d190' }, index.h("div", { key: 'd58162c346c58a2cc21a4334c08b6cc4a53ed2e0', class: "container", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, index.h("slot", { key: 'b70930390799484c71da93d1f801ecc681d168c6' }))));
+        return (index.h(index.Host, { key: 'ee34e7472208140fc2203e0494140778c0c16756' }, index.h("div", { key: '0909c642dd27cbc96f7a8ea25f5d7f712395ed19', class: "container", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, index.h("slot", { key: 'fbba5735e98b065121f0b73ef926b6546aeab82c' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/q2-tab-container.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-SpDCZABA.js');
+var index$1 = require('./index-BqyWHpNu.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 var component = require('./component-iASoq6gx.js');
 
@@ -339,7 +339,7 @@ const Q2TabContainer = class {
     }
     render() {
         const isVertical = this.computedOrientation === 'vertical';
-        return (index.h(index.Fragment, { key: '710b889bd81a28f6ba7c0deb43abe49a269baec4' }, index.h("div", { key: '444efee6412d2440c99bd1e9b123fe385f2453a5', class: "tab-container" }, this.scrollEnabled && (index.h(index.Fragment, { key: '56c9916fb99dd3434a8305721d03e85c0f5fb370' }, index.h("div", { key: 'c506eb6690b60194b50171ad5139cc65b4fabedd', class: "gradient-left", hidden: !this.showScrollBack }), index.h("div", { key: '7af01eb18190e0af6fb80364fb73dcf6145d979d', class: "gradient-right", hidden: !this.showScrollForward }), index.h("q2-btn", { key: '8cb5f49e48c119d32b196e3ecc7e8a018acc7aa0', class: "btn-left", hidden: !this.showScrollBack, onTctClick: () => this.onScrollBtnClick('back') }, index.h("q2-icon", { key: '65f3caea2251c7ce96861718df064f230ec6e02e', type: isVertical ? 'chevron-up' : 'chevron-left', label: isVertical ? 'scroll up' : 'scroll left' })), index.h("q2-btn", { key: '07b833fe0e6b3030255374e4dd323fc99379a293', class: "btn-right", hidden: !this.showScrollForward, onTctClick: () => this.onScrollBtnClick('forward') }, index.h("q2-icon", { key: 'e446b55822239e657ab10c50694a9756ec8b030b', type: isVertical ? 'chevron-down' : 'chevron-right', label: isVertical ? 'scroll down' : 'scroll right' })))), index.h("ul", { key: '20d4f371b80b2515b762e80b88574938783e9252', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist", "aria-orientation": this.computedOrientation }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), index.h("div", { key: '9eaba5d408629dc548a9c57428b801293f642172', class: "tab-content" }, index.h("slot", { key: '811737fa0e22c994299c9164a6401209e6ecf418', onSlotchange: () => this.onSlotChange() }))));
+        return (index.h(index.Fragment, { key: '03d43399332adeda98bb8d9e20053a9c6d49fcce' }, index.h("div", { key: 'e0a8ef7f09a83f703a4b20f54c32522ddb1c5c50', class: "tab-container" }, this.scrollEnabled && (index.h(index.Fragment, { key: 'ad75ef49a54bfe0f862e19123e2a4770e17bf4a2' }, index.h("div", { key: '0a699d7dff2af9e01eb0c9a4727c0aa586068d97', class: "gradient-left", hidden: !this.showScrollBack }), index.h("div", { key: '758388b43d96757cd402eac4c8c881b20853e8d2', class: "gradient-right", hidden: !this.showScrollForward }), index.h("q2-btn", { key: '0738c515ffc60c9fb82941ce1cb104924c3a85ef', class: "btn-left", hidden: !this.showScrollBack, onTctClick: () => this.onScrollBtnClick('back') }, index.h("q2-icon", { key: '95820c6bad13d98ad94e4722026b00e1fedb720e', type: isVertical ? 'chevron-up' : 'chevron-left', label: isVertical ? 'scroll up' : 'scroll left' })), index.h("q2-btn", { key: '2aabca6f28a8acffd6565870b56424c410f4ebae', class: "btn-right", hidden: !this.showScrollForward, onTctClick: () => this.onScrollBtnClick('forward') }, index.h("q2-icon", { key: '94561888012314b3e3503c7f0b64444f3a7b7c96', type: isVertical ? 'chevron-down' : 'chevron-right', label: isVertical ? 'scroll down' : 'scroll right' })))), index.h("ul", { key: 'd58936a795d74807740d291b93bb739d66fbbe24', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist", "aria-orientation": this.computedOrientation }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), index.h("div", { key: 'ccd952b3f0ef0e639e0f86957841ad548fe65eb5', class: "tab-content" }, index.h("slot", { key: '24deecd3894184e816d1d8c5e5257aab382ed055', onSlotchange: () => this.onSlotChange() }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-tab-pane.cjs.entry.js

@@ -23,7 +23,7 @@ const Q2TabPane = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '1957cbeca0ca1f0b5f840701286ebeb6b69565ce', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, index.h("slot", { key: '6772ac75d219ebc30209907468a9fb801cd5db0d' })));
+        return (index.h("div", { key: 'a1ca82c1b98634b33d0ded7c459e151bbcba82ab', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, index.h("slot", { key: '4893e7153f387cfa726ba354cb53274d8f907b94' })));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {