q2-tecton-elements 1.71.2 → 1.72.0

package/dist/components/q2-search.js

@@ -682,7 +682,7 @@ const f =  t(class extends e {
     };
   }
   static get style() {
-    return '*{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{display:block;margin:var(--tct-search-margin, var(--tct-search-margin-top, var(--app-scale-5x, 25px)) 0 var(--tct-search-margin-bottom, var(--app-scale-5x, 25px)))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.q2-search-container{display:block;position:relative}.q2-search-input{margin:0;--tct-input-min-height:var(--tct-search-input-min-height, initial);--tct-input-max-height:var(--tct-search-input-max-height, none);--tct-input-horizontal-gap:var(--tct-search-input-horizontal-gap, var(--app-scale-2x, 10px));--tct-input-icon-container-icon-min-width:var(--tct-search-icon-min-width, fit-content)}.popover-content{display:flex;flex-direction:column}.popover-content[data-loading=true]{min-height:var(--tct-search-loading-popover-height, var(--app-scale-12x, 60px));position:relative}.popover-content[data-loading=true] .loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.popover-content[data-loading=true] .loading-overlay q2-loading{--tct-loading-spinner-size:var(--tct-search-loading-spinner-size, var(--app-scale-8x, 40px));width:1em;height:1em}.popover-top-container[hidden],.popover-bottom-container[hidden]{display:none}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-search-multi-select-header-padding, var(--app-scale-2x, 10px));background:var(--tct-search-multi-select-header-background, var(--t-base, #ffffff));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-search-multi-select-option-padding, 2px 5px);font-size:var(--tct-search-multi-select-option-font-size, inherit);border-radius:var(--tct-search-multi-select-option-border-radius, var(--app-border-radius-1, 4px));background:var(--tct-search-multi-select-option-background, transparent);color:var(--tct-search-multi-select-option-font-color, inherit)}.popover-top-container .multi-select-header label:hover{background:var(--tct-search-multi-select-option-hover-background, var(--t-gray-14, #f2f2f2));color:var(--tct-search-multi-select-option-hover-font-color, var(--t-gray-5, #404040))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-search-multi-select-option-active-background, var(--t-gray-4, #333333));color:var(--tct-search-multi-select-option-active-font-color, var(--t-base, #ffffff))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-search-multi-select-option-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)}.no-results{padding:var(--tct-search-no-results-padding, var(--app-scale-3x, 15px));color:var(--tct-search-no-results-font-color, var(--t-textA, rgba(77, 77, 77, 0.77)));text-align:center}';
+    return '*{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{display:block;margin:var(--tct-search-margin, var(--tct-search-margin-top, var(--app-scale-5x, 25px)) 0 var(--tct-search-margin-bottom, var(--app-scale-5x, 25px)))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.q2-search-container{display:block;position:relative}.q2-search-input{--tct-input-icon-size:var(--tct-search-icon-size, var(--const-px-18, 18px));margin:0;--tct-input-min-height:var(--tct-search-input-min-height, initial);--tct-input-max-height:var(--tct-search-input-max-height, none);--tct-input-horizontal-gap:var(--tct-search-input-horizontal-gap, var(--app-scale-2x, 10px));--tct-input-icon-container-icon-min-width:var(--tct-search-icon-min-width, fit-content)}.popover-content{display:flex;flex-direction:column}.popover-content[data-loading=true]{min-height:var(--tct-search-loading-popover-height, var(--app-scale-12x, 60px));position:relative}.popover-content[data-loading=true] .loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.popover-content[data-loading=true] .loading-overlay q2-loading{--tct-loading-spinner-size:var(--tct-search-loading-spinner-size, var(--app-scale-8x, 40px));width:1em;height:1em}.popover-top-container[hidden],.popover-bottom-container[hidden]{display:none}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-search-multi-select-header-padding, var(--app-scale-2x, 10px));background:var(--tct-search-multi-select-header-background, var(--t-base, #ffffff));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-search-multi-select-option-padding, 2px 5px);font-size:var(--tct-search-multi-select-option-font-size, inherit);border-radius:var(--tct-search-multi-select-option-border-radius, var(--app-border-radius-1, 4px));background:var(--tct-search-multi-select-option-background, transparent);color:var(--tct-search-multi-select-option-font-color, inherit)}.popover-top-container .multi-select-header label:hover{background:var(--tct-search-multi-select-option-hover-background, var(--t-gray-14, #f2f2f2));color:var(--tct-search-multi-select-option-hover-font-color, var(--t-gray-5, #404040))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-search-multi-select-option-active-background, var(--t-gray-4, #333333));color:var(--tct-search-multi-select-option-active-font-color, var(--t-base, #ffffff))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-search-multi-select-option-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)}.no-results{padding:var(--tct-search-no-results-padding, var(--app-scale-3x, 15px));color:var(--tct-search-no-results-font-color, var(--t-textA, rgba(77, 77, 77, 0.77)));text-align:center}';
   }
 }, [ 257, "q2-search", {
   clearable: [ 516 ],

package/dist/components/q2-section.js

@@ -1,16 +1,16 @@
 import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as n, transformTag as a } from "@stencil/core/internal/client";
 
-import { e as s, o, i as r, n as c, l as d } from "./index2.js";
+import { e as s, b as o, o as r, i as c, n as d, l as h } from "./index2.js";
 
-import { m as h } from "./mirror-emit.js";
+import { m as p } from "./mirror-emit.js";
 
-import { d as p } from "./q2-btn2.js";
+import { d as l } from "./q2-btn2.js";
 
-import { d as l } from "./q2-icon2.js";
+import { d as b } from "./q2-icon2.js";
 
-import { d as f } from "./q2-loading2.js";
+import { d as m } from "./q2-loading2.js";
 
-const b =  t(class extends e {
+const v =  t(class extends e {
   constructor(t) {
     super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.change = i(this, "change", 7), 
     this.tctChange = i(this, "tctChange", 7), this.contentId = "content", this.titleId = "title", 
@@ -30,12 +30,12 @@ const b =  t(class extends e {
     }, this.clearResizeInterval = () => {
       this.resizerFn && clearInterval(this.resizerFn);
     }, this.onHeaderClick = () => {
-      h(this, [ "change", "tctChange" ], {
+      p(this, [ "change", "tctChange" ], {
         expanded: !this.expanded
       });
     }, this.onHeaderSlotChange = () => {
-      const t = !!this.hostElement.querySelector('[slot="q2-section-header"]');
-      this.hasYieldedHeader !== t && (this.hasYieldedHeader = !!t);
+      const t = o(this.hostElement, "q2-section-header");
+      this.hasYieldedHeader !== t && (this.hasYieldedHeader = t);
     }, this.onTransitionEnd = () => {
       this.expanded ? this.contentHeight = void 0 : this.hideContent = !0, setTimeout((() => {
         // This gives enough time for all values to get passed over
@@ -62,7 +62,7 @@ const b =  t(class extends e {
     this.contentHeight = t && e ? void 0 : "0px", this.hideContent = !e;
   }
   componentDidLoad() {
-    this.addHeaderSlotListener(), this.addContentSlotListener(), o(this.hostElement);
+    this.addHeaderSlotListener(), this.addContentSlotListener(), r(this.hostElement);
   }
   // #endregion
   // #region Listeners
@@ -70,7 +70,7 @@ const b =  t(class extends e {
     t.target === this.hostElement && !this.hostElement.onchange && t.detail && (this.expanded = t.detail.expanded);
   }
   delegateFocus(t) {
-    r(t, this.hostElement) && this.contentContainer.focus();
+    c(t, this.hostElement) && this.contentContainer.focus();
   }
   // #endregion
   // #region Public Methods API
@@ -111,12 +111,12 @@ const b =  t(class extends e {
     return t ? e ? this.contentContainerHeight : "0" : null;
   }
   async collapseSection() {
-    this.contentHeight = this.contentContainerHeight, await c((() => {
+    this.contentHeight = this.contentContainerHeight, await d((() => {
       this.contentHeight = this.currentHeight;
     }));
   }
   async expandSection() {
-    this.hideContent = !1, await c((() => {
+    this.hideContent = !1, await d((() => {
       this.contentHeight = this.currentHeight;
     }));
   }
@@ -127,40 +127,40 @@ const b =  t(class extends e {
     i && (a ? e.push("is-closed") : s && e.push("is-transitioning"));
     const o = !this.hasYieldedHeader && !!this.label;
     return n("section", {
-      key: "5dbed551d8571ef48b81fe7fc40b0c56db2d685a",
+      key: "1614590b2058a69ebaee5a59455ec5c8bfa30bde",
       class: "wrapper"
     }, n("header", {
-      key: "dfc3bc20a49856a2fcdee6b5cae1626e32ff5416",
+      key: "e52e3037b59ac3443e812299114850dd6ed8810b",
       class: t ? "has-header" : ""
     }, n("div", {
-      key: "b9073b701f1006f8048cac33b4cae9e44888c8e2",
+      key: "2066c8ff48cb4c6445068207533b3b6b808e9dd7",
       class: "header-content",
       id: this.titleId,
       onClick: this.collapsible && this.onHeaderClick
     }, o && n("h2", {
-      key: "d701205c1808c6eaf2b7f3739c7488d934cf1cc0",
+      key: "a159d8b6bc29e10711b603aef2ce6c1419f4b7ae",
       class: "title"
-    }, d(this.label)), n("div", {
-      key: "5428fcecafd6e84a884783c0cc1223cb91160f69",
+    }, h(this.label)), n("div", {
+      key: "829f24123711551a6e3792cb66a2759386d6bec8",
       ref: t => this.headerSlotWrapper = t,
       class: "header-slot-wrapper"
     }, n("slot", {
-      key: "f7d873afc6f319c259e11db10e7cf2d3010ca3c6",
+      key: "22c2518c55bf5f6160917beea8ab2c523bf76169",
       ref: t => this.headerSlot = t,
       name: "q2-section-header"
     }))), this.collapsible && !this.noCollapseIcon && n("q2-btn", {
-      key: "6143342070b00156a36db039dee5e19a1a6cbe2f",
-      label: d(this.label || "tecton.element.section.defaultToggleLabel"),
+      key: "950c09ccfad31453393a52cd21321338d53ac03b",
+      label: h(this.label || "tecton.element.section.defaultToggleLabel"),
       ariaExpanded: "" + !!this.expanded,
       ariaControls: this.contentId,
       "test-id": "toggleButton",
       "hide-label": !0,
       onClick: this.onHeaderClick
     }, n("q2-icon", {
-      key: "297304e09f1b60c2a3e4d8146ff7b75f14d64e5c",
+      key: "a962ea4f0f5c0ba761d3c3eafd31a16f0338c8da",
       type: "chevron-up"
     }))), n("div", {
-      key: "3a78d8a8ffde28f5e006fd988f6d01463758c4c1",
+      key: "45a1762386b7bf88fcaa50c18c1ac059b93d2e59",
       class: e.join(" "),
       id: this.contentId,
       "aria-labelledby": this.titleId,
@@ -170,12 +170,12 @@ const b =  t(class extends e {
         height: this.contentHeight
       }
     }, n("div", {
-      key: "0c7019101641ae7d05772a9ec4e8c16ca40e1112",
+      key: "80508c39608fa4bf3d6f1911ff592f04e5115014",
       ref: t => this.contentContainer = t,
       class: "content",
       tabindex: "-1"
     }, n("slot", {
-      key: "49a17e0cd8279255eec0dc2d7344dc0fa260dc46",
+      key: "c88062ea0a59b62143e22c8492a8d06826a27a83",
       ref: t => this.contentSlot = t
     }))));
   }
@@ -193,7 +193,7 @@ const b =  t(class extends e {
     };
   }
   static get style() {
-    return '*{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;background:var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));color:var(--tct-section-font-color, var(--t-section-font-color, inherit));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 4px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)));border-width:var(--tct-section-border-width, 0);border-style:var(--tct-section-border-style, solid);border-color:var(--tct-section-border-color, none)}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}@media print{:host{--comp-default-print-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-print-margin, var(--comp-default-print-margin))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 4px)));display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}@media print{header{padding:var(--tct-section-header-print-padding, 0)}}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:var(--tct-section-title-margin, 0);font-size:var(--tct-section-title-font-size, var(--const-px-20, 20px));font-weight:var(--tct-section-title-font-weight, 600);text-transform:var(--tct-section-title-text-transform, none);letter-spacing:var(--tct-section-title-letter-spacing, inherit)}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}@media print{.content{padding:var(--tct-section-content-print-padding, 0)}}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}q2-btn{--tct-btn-icon-hover-background:var(--tct-section-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-icon-stroke-primary:var(--tct-section-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-icon-stroke-secondary:var(--tct-section-btn-icon-stroke-secondary, var(--app-gray, #747474))}';
+    return '*{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;background:var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));color:var(--tct-section-font-color, var(--t-section-font-color, inherit));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 4px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)));border-width:var(--tct-section-border-width, 0);border-style:var(--tct-section-border-style, solid);border-color:var(--tct-section-border-color, none)}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}@media print{:host{--comp-default-print-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-print-margin, var(--comp-default-print-margin))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 4px)));display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}@media print{header{padding:var(--tct-section-header-print-padding, 0)}}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:var(--tct-section-title-margin, 0);font-size:var(--tct-section-title-font-size, var(--const-px-20, 20px));font-weight:var(--tct-section-title-font-weight, 600);text-transform:var(--tct-section-title-text-transform, none);letter-spacing:var(--tct-section-title-letter-spacing, inherit)}q2-icon{--tct-icon-size:var(--tct-section-icon-size, var(--const-px-18, 18px));transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}@media print{.content{padding:var(--tct-section-content-print-padding, 0)}}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}q2-btn{--tct-btn-icon-hover-background:var(--tct-section-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-icon-stroke-primary:var(--tct-section-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-icon-stroke-secondary:var(--tct-section-btn-icon-stroke-secondary, var(--app-gray, #747474))}';
   }
 }, [ 257, "q2-section", {
   collapsible: [ 516 ],
@@ -214,26 +214,26 @@ const b =  t(class extends e {
   } ]
 } ]);
 
-const m = b, defineCustomElement = function() {
+const f = v, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-section", "q2-btn", "q2-icon", "q2-loading" ].forEach((t => {
     switch (t) {
      case "q2-section":
-      customElements.get(a(t)) || customElements.define(a(t), b);
+      customElements.get(a(t)) || customElements.define(a(t), v);
       break;
 
      case "q2-btn":
-      customElements.get(a(t)) || p();
+      customElements.get(a(t)) || l();
       break;
 
      case "q2-icon":
-      customElements.get(a(t)) || l();
+      customElements.get(a(t)) || b();
       break;
 
      case "q2-loading":
-      customElements.get(a(t)) || f();
+      customElements.get(a(t)) || m();
     }
   }));
 };
 
-export { m as Q2Section, defineCustomElement }
+export { f as Q2Section, defineCustomElement }

package/dist/components/q2-select2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as s, Fragment as o, transformTag as l } from "@stencil/core/internal/client";
 
-import { c as a, l as n, d as r, h as c, o as h, i as d, x as p, y as u, w as v } from "./index2.js";
+import { c as n, l as a, d as r, h as c, o as h, i as d, x as p, y as u, w as v } from "./index2.js";
 
 import { m } from "./mirror-emit.js";
 
@@ -28,8 +28,8 @@ const O =  t(class extends e {
     // #region Own Properties
         super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.change = i(this, "change", 7), 
     this.input = i(this, "input", 7), this.tctChange = i(this, "tctChange", 7), this.tctInput = i(this, "tctInput", 7), 
-    this.guid = a(), this.isOrientationUpdate = !1, this.lastTouchWasInPopover = !1, 
-    this.scheduledAfterRender = [], 
+    this.guid = n(), this.isOrientationUpdate = !1, this.lastTouchWasInPopover = !1, 
+    this.removingSelectedDisplay = !1, this.scheduledAfterRender = [], 
     // #endregion
     // #region State Properties
     this.hasCustomDisplay = !1, this.hasPopoverBottom = !1, this.hasPopoverTop = !1, 
@@ -56,7 +56,7 @@ const O =  t(class extends e {
          * Determines the label that is applied to the option list for accessibility purposes.
          * @localizable
          */
-    this.listLabel = n("tecton.element.select.listLabel"), 
+    this.listLabel = a("tecton.element.select.listLabel"), 
     /** The minimum number of rows the component will try to display below or above the component when opened. */
     this.minRows = 3, 
     /** Enables text wrapping for `q2-option` elements. When `false`, the text truncates and does not wrap. */
@@ -81,7 +81,12 @@ const O =  t(class extends e {
          * Takes priority over `optional` if both are `true`.
          */
     this.readonly = !1, 
-    /** 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 = !1, 
     /**
          * Each item in this array should correspond to the value of a `q2-option` element.
@@ -144,8 +149,8 @@ const O =  t(class extends e {
     }, this.inputInputHandler = t => {
       t.stopPropagation();
       const e = t.detail.value;
-      !!this.value && this.clearValue(), this.open || this.openDropdownWithoutActiveElement(), 
-      this.prioritizeSearch = !0, this.searchText = e, m(this, [ "input", "tctInput" ], {
+      this.open || this.openDropdownWithoutActiveElement(), this.prioritizeSearch = !0, 
+      this.searchText = e, m(this, [ "input", "tctInput" ], {
         query: e
       });
     }, this.inputKeydownHandler = t => {
@@ -153,7 +158,7 @@ const O =  t(class extends e {
       const {key: e, shiftKey: i} = t, s = "Tab" === e && i, o = this.hasPopoverTop || this.hasPopoverBottom;
       if ((o || this.multiple) && ("Tab" === e || s)) return;
       // slots are incompatible with action sheet
-            if (b(this, t) && !o) return this.executeActionSheet(t);
+            if (b(this, t) && !o) return t.preventDefault(), t.stopPropagation(), this.executeActionSheet(t);
       !this.searchable || " " !== e && "Enter" !== e || "" != this.inputField.value || (t.preventDefault(), 
       this.open || this.openDropdownWithoutActiveElement()), this.searchable && ![ "ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", "Escape", "Tab" ].includes(e) || (this.shouldClearSearchText(t) && this.clearSearchText(), 
       // Prevent click event from firing when spacebar is pressed
@@ -162,8 +167,8 @@ const O =  t(class extends e {
       t.stopPropagation(), this.focusInput(), this.toggleDropdown();
     }, this.onMutationObserved = () => {
       var t, e, i;
-      const {hostElement: s, hasPopoverTop: o, hasPopoverBottom: l} = this, a = null === (t = s.shadowRoot) || void 0 === t ? void 0 : t.querySelector('slot[name="q2-select-display"]'), n = (null == a ? void 0 : a.assignedNodes().length) > 0;
-      this.hasCustomDisplay !== n && (this.hasCustomDisplay = n);
+      const {hostElement: s, hasPopoverTop: o, hasPopoverBottom: l} = this, n = null === (t = s.shadowRoot) || void 0 === t ? void 0 : t.querySelector('slot[name="q2-select-display"]'), a = (null == n ? void 0 : n.assignedNodes().length) > 0;
+      this.hasCustomDisplay !== a && (this.hasCustomDisplay = a);
       const r = null === (e = s.shadowRoot) || void 0 === e ? void 0 : e.querySelector('slot[name="popover-top"]'), c = (null == r ? void 0 : r.assignedNodes().length) > 0;
       o !== c && (this.hasPopoverTop = c);
       const h = null === (i = s.shadowRoot) || void 0 === i ? void 0 : i.querySelector('slot[name="popover-bottom"]'), d = (null == h ? void 0 : h.assignedNodes().length) > 0;
@@ -177,9 +182,10 @@ const O =  t(class extends e {
       t && !this.searchText || ("select" !== e && this.optionList.setActiveElement(null), 
       this.inputField.focus()), this.open !== t && (this.open = t);
     }, this.onSelectedDisplayClick = t => {
+      var e, i;
       // Stop click from bubbling to q2-input's onClick (which would toggle the dropdown)
-      t.stopPropagation(), this.open || (this.prioritizeSearch = this.searchable, this.clearSelectedDisplay(), 
-      this.openDropdownWithoutActiveElement()), this.focusInput();
+            t.stopPropagation(), this.open ? null === (e = this.innerInputField) || void 0 === e || e.focus() : (null === (i = this.innerInputField) || void 0 === i || i.focus(), 
+      this.prioritizeSearch = this.searchable, this.openDropdownWithoutActiveElement());
     }, this.onSelectedDisplayMousedown = t => {
       // Prevent focus shift away from the hidden input
       t.preventDefault();
@@ -235,15 +241,16 @@ const O =  t(class extends e {
     !this.multiple && this.value && this.value === t.detail.value && (this.inputField.value = t.detail.display);
   }
   delegateFocus(t) {
-    var e;
+    var e, i;
     // Always delegate focus from host to inner input (fixes programmatic focus)
         d(t, this.hostElement) && (null === (e = this.innerInputField) || void 0 === e || e.focus());
-    // Manage display state for searchable selects (preserves existing behavior)
-        const i = p(t, this.hostElement);
-    this.prioritizeSearch = i && this.searchable, this.prioritizeSearch && this.clearSelectedDisplay();
+    const s = p(t, this.hostElement), o = !!this.selectedDisplaySlot || this.multilineOptions && !!this.firstSelectedOptionElement && !this.firstSelectedOptionElement.display;
+    this.prioritizeSearch = s && this.searchable && (this.multiple || o), this.prioritizeSearch ? this.clearSelectedDisplay() : s && this.searchable && this.value && (null === (i = this.innerInputField) || void 0 === i || i.select());
   }
   handleFocusout(t) {
     var e;
+    // Removing the robust display while opening search can emit a focusout without a destination.
+        if (!t.relatedTarget && (this.removingSelectedDisplay || this.open && this.prioritizeSearch)) return;
     const i = t.relatedTarget, s = !(null === (e = this.popoverElement) || void 0 === e ? void 0 : e.contains(i)) && !this.hostElement.contains(i);
     s && this.closeDropdown(), this.prioritizeSearch = !s && this.searchable;
   }
@@ -265,14 +272,14 @@ const O =  t(class extends e {
     e.forEach((t => {
       var e;
       if ("" === i) return void (t.hidden = !1);
-      const o = "Q2-CARD" === (null === (e = t.firstElementChild) || void 0 === e ? void 0 : e.tagName) ? t.firstElementChild.title : null, {display: l = "", innerText: a = ""} = t, n = [ l, o, a ].some((t => {
+      const o = "Q2-CARD" === (null === (e = t.firstElementChild) || void 0 === e ? void 0 : e.tagName) ? t.firstElementChild.title : null, {display: l = "", innerText: n = ""} = t, a = [ l, o, n ].some((t => {
         var e;
         return null !== (e = null == t ? void 0 : t.toLocaleLowerCase().includes(i)) && void 0 !== e && e;
       }));
-      t.hidden = !n, n && s++;
+      t.hidden = !a, a && s++;
     }));
     const o = i ? "tecton.element.select.searchable.results" : "tecton.element.select.allOptions", l = i ? s : e.length;
-    this.setStatusMessage(n(o, [ l ]));
+    this.setStatusMessage(a(o, [ l ]));
   }
   // #endregion
   // #region Public Methods API
@@ -327,10 +334,9 @@ const O =  t(class extends e {
   handleMultilineOptionsUpdate(t, e) {
     t !== e && this.optionElements.forEach((e => e.multiline = t));
   }
-  openChanged(t) {
-    t ? this.addTouchEventListeners() : (this.removeTouchEventListeners(), 
-    // Reset prioritizeSearch when dropdown closes to ensure selected display can be restored
-    this.prioritizeSearch = !1), this.scheduledAfterRender.push((async () => {
+  openChanged(t, e) {
+    t ? this.addTouchEventListeners() : (this.removeTouchEventListeners(), e && (this.prioritizeSearch = !1)), 
+    this.scheduledAfterRender.push((async () => {
       await v();
       const {popoverTopContainer: e, popoverElement: i} = this, s = t && (null == e ? void 0 : e.offsetHeight) || 0;
       s ? i.style.setProperty("--comp-popover-top-container-height", `${s}px`) : i.style.removeProperty("--comp-popover-top-container-height");
@@ -409,17 +415,17 @@ const O =  t(class extends e {
   calculateMultiSelectSelectedDisplay() {
     var t, e, i;
     const {firstSelectedOptionElement: s, firstSelectedValue: o, multilineOptions: l} = this;
-    return o ? (null == s ? void 0 : s.display) ? n(s.display) : l && this.searchable ? this.searchText : l ? "" : null !== (i = null !== (e = null === (t = null == s ? void 0 : s.textContent) || void 0 === t ? void 0 : t.trim()) && void 0 !== e ? e : null == s ? void 0 : s.value) && void 0 !== i ? i : o : "";
+    return o ? (null == s ? void 0 : s.display) ? a(s.display) : l && this.searchable ? this.searchText : l ? "" : null !== (i = null !== (e = null === (t = null == s ? void 0 : s.textContent) || void 0 === t ? void 0 : t.trim()) && void 0 !== e ? e : null == s ? void 0 : s.value) && void 0 !== i ? i : o : "";
   }
   calculateSingleSelectSelectedDisplay() {
     var t;
     const {firstSelectedOptionElement: e, multilineOptions: i} = this;
-    return i ? (null == e ? void 0 : e.display) && n(e.display) || this.value || "" : (null == e ? void 0 : e.display) && n(e.display) || (null === (t = null == e ? void 0 : e.textContent) || void 0 === t ? void 0 : t.trim()) || this.value || "";
+    return i ? (null == e ? void 0 : e.display) && a(e.display) || this.value || "" : (null == e ? void 0 : e.display) && a(e.display) || (null === (t = null == e ? void 0 : e.textContent) || void 0 === t ? void 0 : t.trim()) || this.value || "";
   }
   checkSelectedDisplay() {
     let t = this.selectedDisplaySlot;
-    const {value: e, multiple: i, selectedOptions: s, multilineOptions: o, firstSelectedOptionElement: l, prioritizeSearch: a} = this, n = !e && i && !(null == s ? void 0 : s.length);
-    if (a || !o || n) return this.clearSelectedDisplay();
+    const {value: e, multiple: i, selectedOptions: s, multilineOptions: o, firstSelectedOptionElement: l, prioritizeSearch: n} = this, a = !e && i && !(null == s ? void 0 : s.length);
+    if (n || !o || a) return this.clearSelectedDisplay();
     if (!l || l.display) return this.clearSelectedDisplay();
     // Clone selected option and remove elements with hide-on-select attribute
         const r = l.firstElementChild.cloneNode(!0);
@@ -450,7 +456,7 @@ const O =  t(class extends e {
   clearSelectedDisplay() {
     const t = this.selectedDisplaySlot;
     t && (t.removeEventListener("mousedown", this.onSelectedDisplayMousedown), t.removeEventListener("click", this.onSelectedDisplayClick), 
-    t.remove());
+    this.removingSelectedDisplay = !0, t.remove(), setTimeout((() => this.removingSelectedDisplay = !1), 0));
   }
   clearValue() {
     const {multiple: t} = this;
@@ -550,7 +556,7 @@ const O =  t(class extends e {
     })));
   }
   renderSelectField() {
-    var t;
+    var t, e;
     return s(o, null, s("div", {
       "aria-live": "polite",
       "aria-atomic": "true",
@@ -559,10 +565,10 @@ const O =  t(class extends e {
     }, this.statusMessage), s("q2-input", {
       ref: t => this.inputField = t,
       class: "q2-select-input",
-      label: this.label && n(this.label) || "",
+      label: this.label && a(this.label) || "",
       value: this.selectedDisplay,
       clearable: !this.disabled && this.clearable && (!!this.value || !!(null === (t = this.selectedOptions) || void 0 === t ? void 0 : t.length)) || void 0,
-      errors: Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map((t => n(t))) || this.invalid && [ "tecton.element.select.invalid" ] || [],
+      errors: Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map((t => a(t))) || this.invalid && [ "tecton.element.select.invalid" ] || [],
       disabled: this.disabled,
       optional: this.optional,
       readonly: !!this.readonly,
@@ -585,6 +591,7 @@ const O =  t(class extends e {
       onTctChange: this.inputChangeHandler,
       badgeValue: this.badgeValue,
       badgeTheme: this.inputFocused ? "primary" : void 0,
+      _ariaDescription: this.multiple && (null === (e = this.selectedOptions) || void 0 === e ? void 0 : e.length) ? a("tecton.element.select.selectionCount", [ this.selectedOptions.length ]) : void 0,
       _role: "combobox",
       _preventEntry: !this.searchable
     }, this.renderCustomDisplay()), s("div", {
@@ -601,39 +608,39 @@ const O =  t(class extends e {
     return s("div", {
       class: "multi-select-header"
     }, s("fieldset", null, s("legend", {
-      "aria-label": n("tecton.element.select.multiHeader.showing")
-    }, n("tecton.element.select.multiHeader.showing")), s("div", null, s("input", {
+      "aria-label": a("tecton.element.select.multiHeader.showing")
+    }, a("tecton.element.select.multiHeader.showing")), s("div", null, s("input", {
       class: "sr",
       type: "radio",
       id: "all",
       name: "viewDisplay",
       value: "all",
       checked: !o,
-      "aria-label": n("tecton.element.select.multiHeader.allAriaLabel"),
+      "aria-label": a("tecton.element.select.multiHeader.allAriaLabel"),
       "test-id": "allOptionsButton",
       onClick: this.showAllOptions,
       onKeyDown: this.visibilityToggleKeyDown
     }), s("label", {
       htmlFor: "all"
-    }, n("tecton.element.select.multiHeader.all"))), s("div", null, s("input", {
+    }, a("tecton.element.select.multiHeader.all"))), s("div", null, s("input", {
       class: "sr",
       type: "radio",
       id: "selected",
       disabled: 0 === i,
       name: "viewDisplay",
       value: "selected",
-      "aria-label": n("tecton.element.select.multiHeader.selectedAriaLabel", [ i ]),
+      "aria-label": a("tecton.element.select.multiHeader.selectedAriaLabel", [ i ]),
       checked: o,
       "test-id": "selectedOptionsButton",
       onClick: this.showSelectedOptions,
       onKeyDown: this.visibilityToggleKeyDown
     }), s("label", {
       htmlFor: "selected"
-    }, n("tecton.element.select.multiHeader.selected", [ i ])))));
+    }, a("tecton.element.select.multiHeader.selected", [ i ])))));
   }
   render() {
     return s("click-elsewhere", {
-      key: "edb9951db5493781ee1f5da0ed5f6c03aff107e9",
+      key: "5c9a6d681aedcebfbadd6b1249f7bcd96c27809c",
       class: this.wrapperClasses,
       role: "presentation",
       onChange: this.clickedElsewhere
@@ -667,7 +674,7 @@ const O =  t(class extends e {
     };
   }
   static get style() {
-    return '*{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)}';
+    return '*{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)}';
   }
 }, [ 257, "q2-select", {
   ariaLabel: [ 1537, "aria-label" ],

package/dist/components/q2-stepper-pane.js

@@ -2,7 +2,7 @@ import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as s, Ho
 
 import { b as r } from "./component.js";
 
-import { c, n as h, l as d } from "./index2.js";
+import { c as d, n as c, l as h } from "./index2.js";
 
 import { m as l } from "./mirror-emit.js";
 
@@ -18,7 +18,7 @@ const p =  t(class extends e {
   // #endregion
   // #region Component Lifecycle Events
   connectedCallback() {
-    this.hostElement.id || (this.hostElement.id = "step-" + c());
+    this.hostElement.id || (this.hostElement.id = "step-" + d());
   }
   disconnectedCallback() {
     var t;
@@ -51,7 +51,7 @@ const p =  t(class extends e {
     });
   }
   checkForActiveChildren() {
-    this.showWithChildren && h((() => {
+    this.showWithChildren && c((() => {
       setTimeout((() => {
         this.isChildActive = !!this.hostElement.querySelector("[slot='children'] > q2-stepper-pane[is-active]");
       }));
@@ -75,25 +75,29 @@ const p =  t(class extends e {
     }, s(a, {
       key: "0241a9ad68973eea81c961070d6171dab3241f79"
     }, s("div", {
-      key: "25e9a406b8c0672eec836920706d44ed53906e1d",
-      "aria-label": t && d(t),
+      key: "6678cb4a7e65a3a4341ff552682c1011c588108b",
+      role: "group",
+      "aria-labelledby": "pane-label",
       tabindex: "0",
       hidden: !(e || this.isChildActive && this.showWithChildren)
     }, s("slot", {
-      key: "00f456ab21d2ecf58946de5df397bb3c81c2a749"
+      key: "0f8d339f894bdaa55bd5bdf94b1220da7a083dde"
     })), s("div", {
-      key: "bdac4c2caf9b9bf5a6280258475afa552e578e7e",
+      key: "51e3934ad791e45486360ab8c6509b68e3a15d9d",
       hidden: !0
+    }, s("span", {
+      key: "96fe08c826d87f86559fe2dbb586914b4065eb40",
+      id: "pane-label"
     }, s("slot", {
-      key: "2ede75ad70c10eda1f8c6de4556bccc9c66e8b97",
+      key: "b4cab1594ae047f032fbaa67f75167e31cc4cdf7",
       name: "label",
       onSlotchange: () => this.contentChange.emit()
-    }), s("slot", {
-      key: "990f2d44a0f9cb0437b63f3570a94874752a94da",
+    }, t && h(t))), s("slot", {
+      key: "473cf6b9bc3ef5995d11e46502db1321d59baa5e",
       name: "description",
       onSlotchange: () => this.contentChange.emit()
     })), s("slot", {
-      key: "1f12d65608f73a3737abb7f987cab300ec1c9856",
+      key: "76cb24680ed1ec8a49956f888accf3fd07da7fa0",
       name: "children"
     })));
   }

package/dist/components/q2-stepper-vertical.js

@@ -301,15 +301,15 @@ const v =  t(class extends e {
   }
   render() {
     return r(i, {
-      key: "eab8d8816aebfb5aa104a17b75dc0e8b4ed4ce68"
+      key: "9d40414e7b510493b0236568c4d6231eeacdbd80"
     }, r("ul", {
-      key: "f155624641313e8375e6ee448fed150ae0c62cf1",
+      key: "b3a444833439d59be874a2bf04833f8df0ff107f",
       role: "tablist"
     }, this.structuredPanes.map(((t, e) => this.renderStepBtn(t, e)))), r("div", {
-      key: "1ff078e00dcb1e4c861bc691ccc31ec5c1436fac",
+      key: "34f3841d0eb0c5fe96670ac3d5e87244682ace74",
       role: "list"
     }, r("slot", {
-      key: "adf07ae0725ccc7c1ce149052f2325e6bfc01677"
+      key: "e224e413162cb28eab4ec0e8b51367ed3b83fa0b"
     })));
   }
   get hostElement() {

package/dist/components/q2-surface.js

@@ -69,14 +69,14 @@ const n =  r(class extends a {
   // #region Render Methods
   render() {
     return t(o, {
-      key: "992667ac1d625dff77a01d06d058865f99d8d190"
+      key: "8dd96991bc74e2157dc256f21eb4953eaeffdd46"
     }, t("div", {
-      key: "d58162c346c58a2cc21a4334c08b6cc4a53ed2e0",
+      key: "a5b315fd3e6dd999cd704b3fd2c9de5ffb139033",
       class: "container",
       role: this.clickable ? "button" : void 0,
       tabIndex: this.clickable ? 0 : void 0
     }, t("slot", {
-      key: "b70930390799484c71da93d1f801ecc681d168c6"
+      key: "4897bfe06a95bf14eddf2bb964bf4a27ed96798a"
     })));
   }
   get hostElement() {