q2-tecton-elements 1.54.6 → 1.54.7

package/dist/q2-tecton-elements/q2-section.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as i, g as n } from "./index-7a5365e2.js";
 
-import { m as a, o as s, i as r, n as o, l as c } from "./index-504f1a9e.js";
+import { m as s, o as a, i as r, n as o, l as c } from "./index-504f1a9e.js";
 
 const d = "*{box-sizing:border-box}*:active{outline:none}*:focus{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}: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, var(--t-text, #4d4d4d)));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;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, 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, 0.5px)}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}";
 
@@ -14,10 +14,10 @@ const p = class {
     this.titleId = "title";
     this.addContentSlotListener = () => {
       if (this.contentSlot) {
-        this.contentSlot.addEventListener("slotchange", a);
+        this.contentSlot.addEventListener("slotchange", s);
         return;
       }
-      const t = new MutationObserver(a);
+      const t = new MutationObserver(s);
       t.observe(this.contentContainer, {
         childList: true,
         subtree: true
@@ -65,7 +65,7 @@ const p = class {
     this.removeContentSlotListener = () => {
       var t;
       if (this.contentSlot) {
-        this.contentSlot.removeEventListener("slotchange", a);
+        this.contentSlot.removeEventListener("slotchange", s);
         return;
       }
       (t = this.contentSlotMutationObserver) === null || t === void 0 ? void 0 : t.disconnect();
@@ -101,7 +101,7 @@ const p = class {
   componentDidLoad() {
     this.addHeaderSlotListener();
     this.addContentSlotListener();
-    s(this.hostElement);
+    a(this.hostElement);
   }
   // #endregion
   // #region Listeners
@@ -121,7 +121,7 @@ const p = class {
   }
   async expandedObserver(t) {
     this.clearResizeInterval();
-    this.resizerFn = setInterval(a, 5);
+    this.resizerFn = setInterval(s, 5);
     if (t) {
       this.expandSection();
     } else {
@@ -181,35 +181,35 @@ const p = class {
   render() {
     const t = this.label || this.hasYieldedHeader;
     const e = [ "content-wrapper" ];
-    const {collapsible: n, hideContent: a, contentHeight: s} = this;
+    const {collapsible: n, hideContent: s, contentHeight: a} = this;
     if (n) {
-      if (a) e.push("is-closed"); else if (s) e.push("is-transitioning");
+      if (s) e.push("is-closed"); else if (a) e.push("is-transitioning");
     }
     const r = !this.hasYieldedHeader && !!this.label;
     return i("section", {
-      key: "cc309ddb28c1a874a6ceeb59b8289a4346e459a8",
+      key: "364cf192b13ceb1b68187962d0252bb2e0a792c6",
       class: "wrapper"
     }, i("header", {
-      key: "84ddd7d53237e38fe42f4760a71526e560856305",
+      key: "ffaefdce0828d53154d432896882ceff55b80fee",
       class: t ? "has-header" : ""
     }, i("div", {
-      key: "b0574a853b76014816a5eac89a2c6cf9eabbb52d",
+      key: "44bcc4ef44c88c139265a3a828ceb2a3d1ddbb09",
       class: "header-content",
       id: this.titleId,
       onClick: this.collapsible && this.onHeaderClick
     }, r && i("h2", {
-      key: "89265a8681b994611de1f858b47b3424aaf2c77a",
+      key: "c0809186be521f908c111507975319aa66f3cef2",
       class: "title"
     }, c(this.label)), i("div", {
-      key: "735702090c9b6744c7575f71260dec2a10f2032e",
+      key: "5a7cfe95c0a5e812d453080406b7820ca8e1d2cd",
       ref: t => this.headerSlotWrapper = t,
       class: "header-slot-wrapper"
     }, i("slot", {
-      key: "25d45885176b19c778fd8a5698f17c33c6daef45",
+      key: "6763f3627a0963715ab5ae628d678dc28fa480a9",
       ref: t => this.headerSlot = t,
       name: "q2-section-header"
     }))), this.collapsible && !this.noCollapseIcon && i("q2-btn", {
-      key: "27549707494cde6a1be6d2eaac5f41b6ba0cbd10",
+      key: "e69ed05fac0ca80ac2e9424bb67859a4b78b7829",
       label: c(this.label || "tecton.element.section.defaultToggleLabel"),
       ariaExpanded: `${!!this.expanded}`,
       ariaControls: this.contentId,
@@ -217,10 +217,10 @@ const p = class {
       "hide-label": true,
       onClick: this.onHeaderClick
     }, i("q2-icon", {
-      key: "66e2fcb947a4b49c4d39b432304c6ef9a22254c3",
+      key: "cd5020b24f3da399c9623e3f6534e9374bd0215f",
       type: "chevron-up"
     }))), i("div", {
-      key: "82cbe836aea28dcde1f34edeab8efae89d3a10d5",
+      key: "1acf730b6c3d50eb5f110e98f048df032ef484d4",
       class: e.join(" "),
       id: this.contentId,
       "aria-labelledby": this.titleId,
@@ -230,12 +230,12 @@ const p = class {
         height: this.contentHeight
       }
     }, i("div", {
-      key: "ce7c2e8bfb7f1c8fc8c5a1d8de241d9c509db9bb",
+      key: "a9c95b881b983929f5627d0d38095f16c25c0569",
       ref: t => this.contentContainer = t,
       class: "content",
       tabindex: "-1"
     }, i("slot", {
-      key: "a564c7267342a8de26e25b8a0083c3708ea46cab",
+      key: "0d079e2fde0c7f658a20fa2286f3c8c3944f73c6",
       ref: t => this.contentSlot = t
     }))));
   }

package/dist/q2-tecton-elements/q2-select.entry.js

@@ -1,24 +1,64 @@
-import { r as t, c as e, h as i, g as s } from "./index-7a5365e2.js";
+import { r as t, c as e, h as i, F as s, g as o } from "./index-7a5365e2.js";
 
-import { l as o, a as l, o as n, q as r, i as a, w as c } from "./index-504f1a9e.js";
+import { c as l, d as n, l as r, a, o as c, q as d, i as h, w as p } from "./index-504f1a9e.js";
 
-import { s as d, a as h } from "./action-sheet-1e24cb38.js";
+import { s as u, a as v } from "./action-sheet-1e24cb38.js";
 
-const p = "*{box-sizing:border-box}*:active{outline:none}*:focus{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}.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-select-margin:var(--tct-select-margin, var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-4, 30px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-4, 30px))));display:block;margin:var(--comp-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)}.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+label{box-shadow:var(--const-double-focus-ring)}";
+const b = "*{box-sizing:border-box}*:active{outline:none}*:focus{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}.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-select-margin:var(--tct-select-margin, var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-4, 30px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-4, 30px))));display:block;margin:var(--comp-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)}.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+label{box-shadow:var(--const-double-focus-ring)}";
 
-const u = p;
+const f = b;
 
-const v = class {
+const m = class {
   constructor(i) {
     t(this, i);
     this.change = e(this, "change", 7);
     this.input = e(this, "input", 7);
     var s;
+    // #region Own Properties
+        this.guid = l();
     this.scheduledAfterRender = [];
     this.clickedElsewhere = t => {
       const e = t.target;
       if (e.localName !== "click-elsewhere") return;
       t.stopPropagation();
+      const {popoverElement: i} = this;
+      if (!i) return;
+      i.open = false;
+    };
+    this.destroyEventListeners = () => {
+      var t;
+      if (!n()) return;
+      (t = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || t === void 0 ? void 0 : t.removeEventListener("change", this.handleOrientationChange);
+      window.removeEventListener("resize", this.handleOrientationChange);
+      visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.removeEventListener("resize", this.handleOrientationChange);
+    };
+    this.handleOrientationChange = () => {
+      var t, e, i;
+      if (!n()) return;
+      let s;
+      if (this.isModule) {
+        s = (t = window.Tecton) === null || t === void 0 ? void 0 : t.platformDimensions.orientationType.includes("landscape");
+      } else {
+        s = (i = (e = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || e === void 0 ? void 0 : e.type) === null || i === void 0 ? void 0 : i.includes("landscape");
+      }
+      if (s && this.searchable) this.searchable = false;
+      if (!s) this.searchable = this.originalSearchable;
+    };
+    this.initEventListeners = () => {
+      var t;
+      if (!n()) return;
+      (t = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || t === void 0 ? void 0 : t.addEventListener("change", this.handleOrientationChange);
+      window.addEventListener("resize", this.handleOrientationChange);
+      visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener("resize", this.handleOrientationChange);
+    };
+    this.initMutationObserver = () => {
+      const t = new MutationObserver(this.onMutationObserved);
+      t.observe(this.hostElement, {
+        childList: true,
+        subtree: true
+      });
+      this.mutationObserver = t;
+      this.onMutationObserved();
     };
     this.inputBlurHandler = () => {
       this.inputFocused = false;
@@ -28,7 +68,7 @@ const v = class {
     };
     this.inputClickHandler = async t => {
       t.stopPropagation();
-      if (d(this)) {
+      if (u(this)) {
         return this.executeActionSheet(t);
       }
       this.toggleDropdown();
@@ -56,7 +96,7 @@ const v = class {
       const o = this.hasPopoverTop || this.hasPopoverBottom;
       if (o && (e === "Tab" || s)) return;
       // slots are incompatible with action sheet
-            if (d(this, t) && !o) {
+            if (u(this, t) && !o) {
         return this.executeActionSheet(t);
       }
       const l = [ "ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", "Escape", "Tab" ];
@@ -68,7 +108,7 @@ const v = class {
       if (this.shouldClearSearchText(t)) this.clearSearchText();
       // Prevent click event from firing when spacebar is pressed
             if (e === " ") t.preventDefault();
-      this.optionList.handleExternalKeydown(t);
+      this.handleOptionListExternalKeydown(t);
     };
     this.onCustomDisplayClick = t => {
       t.stopPropagation();
@@ -147,7 +187,7 @@ const v = class {
     this.hoist = !!((s = window.Tecton) === null || s === void 0 ? void 0 : s.useActionSheets);
     this.invalid = undefined;
     this.label = undefined;
-    this.listLabel = o("tecton.element.select.listLabel");
+    this.listLabel = r("tecton.element.select.listLabel");
     this.minRows = 3;
     this.multilineOptions = false;
     this.multiple = false;
@@ -167,22 +207,21 @@ const v = class {
     var t;
     (t = this.mutationObserver) === null || t === void 0 ? void 0 : t.disconnect();
     this.mutationObserver = null;
+    this.destroyEventListeners();
   }
   componentWillLoad() {
-    l(this);
+    this.originalSearchable = this.searchable;
+    a(this);
+    this.handleOrientationChange();
     this.buildStructuredSelectedOptions();
     this.handleMultilineOptionsUpdate(this.multilineOptions, false);
   }
   componentDidLoad() {
-    const t = new MutationObserver(this.onMutationObserved);
-    t.observe(this.hostElement, {
-      childList: true,
-      subtree: true
-    });
-    this.mutationObserver = t;
-    this.onMutationObserved();
-    n(this.hostElement);
+    this.initMutationObserver();
+    this.initEventListeners();
+    c(this.hostElement);
     setTimeout((() => this.checkSelectedDisplay()), 0);
+    this.setCustomLabel();
   }
   componentDidRender() {
     setTimeout((() => {
@@ -212,11 +251,11 @@ const v = class {
     }
   }
   delegateFocus(t) {
-    const e = r(t, this.hostElement);
+    const e = d(t, this.hostElement);
     const i = this.prioritizeSearch = e && this.searchable;
     if (i) {
       this.clearSelectedDisplay();
-    } else if (a(t, this.hostElement)) {
+    } else if (h(t, this.hostElement)) {
       this.inputField.shadowRoot.querySelector(".input-field").focus();
     }
   }
@@ -248,13 +287,16 @@ const v = class {
       t.hidden = !a;
       if (a) s++;
     }));
-    const l = i ? "tecton.element.select.searchable.results" : "tecton.element.select.allOptions";
-    const n = i ? s : e.length;
-    this.setStatusMessage(o(l, [ n ]));
+    const o = i ? "tecton.element.select.searchable.results" : "tecton.element.select.allOptions";
+    const l = i ? s : e.length;
+    this.setStatusMessage(r(o, [ l ]));
   }
   keydownHandler(t) {
     this.inputKeydownHandler(t);
   }
+  popoverStateChanged({detail: {open: t}}) {
+    if (this.open !== t) this.open = t;
+  }
   // #endregion
   // #region Public Methods API
   /**
@@ -302,7 +344,7 @@ const v = class {
     const i = new Set(Array.isArray(t) ? t : [ t ]);
     if (!this.open) {
       await this.openPopover();
-      await c();
+      await p();
     }
     i.forEach((t => {
       var e;
@@ -310,13 +352,13 @@ const v = class {
     }));
     if (e.closePopover) {
       await this.closePopover();
-      await c();
+      await p();
     }
   }
   // #endregion
   // #region Watchers
   ariaLabelObserver() {
-    l(this);
+    a(this);
   }
   handleMultilineOptionsUpdate(t, e) {
     if (t === e) return;
@@ -324,7 +366,7 @@ const v = class {
   }
   openChanged(t) {
     this.scheduledAfterRender.push((async () => {
-      await c();
+      await p();
       const {popoverTopContainer: e, popoverElement: i} = this;
       const s = t && (e === null || e === void 0 ? void 0 : e.offsetHeight) || 0;
       if (s) {
@@ -374,6 +416,15 @@ const v = class {
     var t, e;
     return (e = (t = this.inputField) === null || t === void 0 ? void 0 : t.shadowRoot) === null || e === void 0 ? void 0 : e.querySelector(".input-field");
   }
+  get inputId() {
+    return `select-guid-${this.guid}`;
+  }
+  get isModule() {
+    var t, e;
+    const i = window !== window.top;
+    const s = Object.keys((e = (t = window.Tecton) === null || t === void 0 ? void 0 : t.platformDimensions) !== null && e !== void 0 ? e : {}).length > 0;
+    return i && s;
+  }
   get optionElements() {
     return Array.from(this.hostElement.querySelectorAll("q2-option"));
   }
@@ -409,20 +460,20 @@ const v = class {
   }
   calculateMultiSelectSelectedDisplay() {
     var t, e, i;
-    const {firstSelectedOptionElement: s, firstSelectedValue: l, multilineOptions: n} = this;
-    if (!l) return "";
-    if (s === null || s === void 0 ? void 0 : s.display) return o(s.display);
-    if (n && this.searchable) return this.searchText;
-    if (n) return "";
-    return (i = (e = (t = s === null || s === void 0 ? void 0 : s.textContent) === null || t === void 0 ? void 0 : t.trim()) !== null && e !== void 0 ? e : s === null || s === void 0 ? void 0 : s.value) !== null && i !== void 0 ? i : l;
+    const {firstSelectedOptionElement: s, firstSelectedValue: o, multilineOptions: l} = this;
+    if (!o) return "";
+    if (s === null || s === void 0 ? void 0 : s.display) return r(s.display);
+    if (l && this.searchable) return this.searchText;
+    if (l) return "";
+    return (i = (e = (t = s === null || s === void 0 ? void 0 : s.textContent) === null || t === void 0 ? void 0 : t.trim()) !== null && e !== void 0 ? e : s === null || s === void 0 ? void 0 : s.value) !== null && i !== void 0 ? i : o;
   }
   calculateSingleSelectSelectedDisplay() {
     var t;
     const {firstSelectedOptionElement: e, multilineOptions: i} = this;
     if (i) {
-      return (e === null || e === void 0 ? void 0 : e.display) && o(e.display) || this.value || "";
+      return (e === null || e === void 0 ? void 0 : e.display) && r(e.display) || this.value || "";
     } else {
-      return (e === null || e === void 0 ? void 0 : e.display) && o(e.display) || ((t = e === null || e === void 0 ? void 0 : e.textContent) === null || t === void 0 ? void 0 : t.trim()) || this.value || "";
+      return (e === null || e === void 0 ? void 0 : e.display) && r(e.display) || ((t = e === null || e === void 0 ? void 0 : e.textContent) === null || t === void 0 ? void 0 : t.trim()) || this.value || "";
     }
   }
   checkSelectedDisplay() {
@@ -488,7 +539,7 @@ const v = class {
     this.clearSearchText();
   }
   async executeActionSheet(t) {
-    const e = await h(this, t);
+    const e = await v(this, t);
     this.focusInput();
     this.handleSelectionChanges(e);
   }
@@ -496,6 +547,10 @@ const v = class {
     var t;
     (t = this.inputField) === null || t === void 0 ? void 0 : t.dispatchEvent(new FocusEvent("focus"));
   }
+  // Helps with checking for calls to handleExternalKeydown in spec tests
+  handleOptionListExternalKeydown(t) {
+    this.optionList.handleExternalKeydown(t);
+  }
   handleSelectionChanges(t) {
     const {value: e = "", values: i = []} = t;
     const s = i.map((t => t.value));
@@ -513,6 +568,14 @@ const v = class {
     this.optionList.setActiveElement(null);
     this.open = true;
   }
+  setCustomLabel() {
+    var t;
+    const e = this.hostElement.querySelector('[slot="label"]');
+    if (e) {
+      (t = this.inputField) === null || t === void 0 ? void 0 : t.appendChild(e.cloneNode(true));
+      this.hostElement.removeChild(e);
+    }
+  }
   setStatusMessage(t) {
     clearTimeout(this.statusMessageTimer);
     this.statusMessage = "";
@@ -579,63 +642,20 @@ const v = class {
       name: "popover-bottom"
     })));
   }
-  renderVisibilityToggle() {
-    var t, e;
-    const s = (e = (t = this.selectedOptions) === null || t === void 0 ? void 0 : t.length) !== null && e !== void 0 ? e : 0;
-    const {showSelected: l} = this;
-    return i("div", {
-      class: "multi-select-header"
-    }, i("fieldset", null, i("legend", {
-      "aria-label": o("tecton.element.select.multiHeader.showing")
-    }, o("tecton.element.select.multiHeader.showing")), i("div", null, i("input", {
-      class: "sr",
-      type: "radio",
-      id: "all",
-      name: "viewDisplay",
-      value: "all",
-      checked: !l,
-      "aria-label": o("tecton.element.select.multiHeader.allAriaLabel"),
-      "test-id": "allOptionsButton",
-      onClick: this.showAllOptions,
-      onKeyDown: this.visibilityToggleKeyDown
-    }), i("label", {
-      htmlFor: "all"
-    }, o("tecton.element.select.multiHeader.all"))), i("div", null, i("input", {
-      class: "sr",
-      type: "radio",
-      id: "selected",
-      disabled: s === 0,
-      name: "viewDisplay",
-      value: "selected",
-      "aria-label": o("tecton.element.select.multiHeader.selectedAriaLabel", [ s ]),
-      checked: l,
-      "test-id": "selectedOptionsButton",
-      onClick: this.showSelectedOptions,
-      onKeyDown: this.visibilityToggleKeyDown
-    }), i("label", {
-      htmlFor: "selected"
-    }, o("tecton.element.select.multiHeader.selected", [ s ])))));
-  }
-  render() {
+  renderSelectField() {
     var t;
-    return i("click-elsewhere", {
-      key: "cc3d7571025183c900c7dbeda597835e88d9224b",
-      class: this.wrapperClasses,
-      onChange: this.clickedElsewhere
-    }, i("div", {
-      key: "5ab3dec7a6e57ccaeef904ea07e52c29b88a0a91",
+    return i(s, null, i("div", {
       "aria-live": "polite",
       "aria-atomic": "true",
       role: "status",
       class: "sr"
     }, this.statusMessage), i("q2-input", {
-      key: "3d7c3ded01c34866fdebc4503bc2bac46ba67018",
       ref: t => this.inputField = t,
       class: "q2-select-input",
-      label: this.label && o(this.label) || "",
+      label: this.label && r(this.label) || "",
       value: this.selectedDisplay,
       clearable: this.clearable && (!!this.value || !!((t = this.selectedOptions) === null || t === void 0 ? void 0 : t.length)) || undefined,
-      errors: Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map((t => o(t))) || this.invalid && [ "tecton.element.select.invalid" ] || [],
+      errors: Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map((t => r(t))) || this.invalid && [ "tecton.element.select.invalid" ] || [],
       disabled: this.disabled,
       optional: this.optional,
       readonly: !!this.readonly,
@@ -658,17 +678,59 @@ const v = class {
       _role: "combobox",
       _preventEntry: !this.searchable
     }, this.renderCustomDisplay()), i("div", {
-      key: "37662b940b1a51d9abfb681d248607ff049a8655",
       class: "custom-display-content",
       hidden: !this.hasCustomDisplay || !!this.searchText,
       onClick: this.onCustomDisplayClick
     }, i("slot", {
-      key: "74441951077fd4476ccf3c820392e346ba6dd313",
       name: "q2-select-display"
     })), this.renderOptionsDropdown());
   }
+  renderVisibilityToggle() {
+    var t, e;
+    const s = (e = (t = this.selectedOptions) === null || t === void 0 ? void 0 : t.length) !== null && e !== void 0 ? e : 0;
+    const {showSelected: o} = this;
+    return i("div", {
+      class: "multi-select-header"
+    }, i("fieldset", null, i("legend", {
+      "aria-label": r("tecton.element.select.multiHeader.showing")
+    }, r("tecton.element.select.multiHeader.showing")), i("div", null, i("input", {
+      class: "sr",
+      type: "radio",
+      id: "all",
+      name: "viewDisplay",
+      value: "all",
+      checked: !o,
+      "aria-label": r("tecton.element.select.multiHeader.allAriaLabel"),
+      "test-id": "allOptionsButton",
+      onClick: this.showAllOptions,
+      onKeyDown: this.visibilityToggleKeyDown
+    }), i("label", {
+      htmlFor: "all"
+    }, r("tecton.element.select.multiHeader.all"))), i("div", null, i("input", {
+      class: "sr",
+      type: "radio",
+      id: "selected",
+      disabled: s === 0,
+      name: "viewDisplay",
+      value: "selected",
+      "aria-label": r("tecton.element.select.multiHeader.selectedAriaLabel", [ s ]),
+      checked: o,
+      "test-id": "selectedOptionsButton",
+      onClick: this.showSelectedOptions,
+      onKeyDown: this.visibilityToggleKeyDown
+    }), i("label", {
+      htmlFor: "selected"
+    }, r("tecton.element.select.multiHeader.selected", [ s ])))));
+  }
+  render() {
+    return i("click-elsewhere", {
+      key: "0391eb79ab58d821af5900f5ef157fa3bb3d1e6e",
+      class: this.wrapperClasses,
+      onChange: this.clickedElsewhere
+    }, this.renderSelectField());
+  }
   get hostElement() {
-    return s(this);
+    return o(this);
   }
   static get watchers() {
     return {
@@ -681,7 +743,7 @@ const v = class {
   }
 };
 
-v.style = u;
+m.style = f;
 
-export { v as q2_select };
+export { m as q2_select };
 //# sourceMappingURL=q2-select.entry.js.map