q2-tecton-elements 1.55.4 → 1.56.0

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

@@ -1,6 +1,6 @@
 import { r as t, c as i, h as o, g as a } from "./index-7a5365e2.js";
 
-import { p as e, w as r, e as s } from "./index-f2a66217.js";
+import { p as e, w as r, e as s } from "./index-c215e8ef.js";
 
 import { s as d } from "./sanitize-html-string-735c19f5.js";
 
@@ -156,62 +156,62 @@ const l = class {
     const t = `interior`;
     const i = `${this.renderStatus || ""}`;
     return o("dialog", {
-      key: "23605420f182cf36687c22f5d9a25512fe12aa1f",
+      key: "2165ebfae56e7003aded62c0af837542bb9149a0",
       ref: t => this.dialogElement = t,
       class: i,
       onClick: this.onClick
     }, o("div", {
-      key: "e0bd45778d125c39028e9a7e999b36cdd920d471",
+      key: "66d0c4eba12b73dfda0a96bb43ba5a070ecd61f2",
       class: t
     }, this.title && o("header", {
-      key: "4658009b1bd010941c7d3128306ab44a1da80194"
+      key: "8bbd73d303cef868bef465c7251687cfc7599e1f"
     }, this.title && o("h2", {
-      key: "ec33e00aa837cd0033f3a5f84f292ee7fb59fb45",
+      key: "8dd1586d26b59f726854ea4172500a53c757a64d",
       class: "title"
     }, this.title), !!this.closable && o("q2-btn", {
-      key: "19a02dda7a62729b20d79d7b380ac5225427a25b",
+      key: "c664e338916490370fe8361f722c3e0e96f07717",
       class: "btn-close",
       "test-id": "btnClose",
       onClick: this.onCancel,
       label: "tecton.element.modal.close",
       "hide-label": true
     }, o("q2-icon", {
-      key: "513d17ba802c6681ec399e44fc07180568695cfb",
+      key: "6d3caa17da95a3c89f949b090702451ad9ea78ee",
       type: "close"
     }))), o("div", {
-      key: "d291afd421f5a4f4bcccb1e7762cf633f84ffce2",
+      key: "cfa8aac15fc865cb50e8bc78d82aa5f385946b5c",
       class: "content",
       ref: t => this.contentElement = t
     }, this.icon && o("div", {
-      key: "3e4256c22f6b1a0c4da33c6e950ad682115c0be8",
+      key: "407d8c7571b8da638aa6954bd754c6c90ffa66b8",
       class: "icon"
     }, o("q2-icon", {
-      key: "9440c8af3d66157a1f66dbdbc15490e61d086ca8",
+      key: "10f29256dba2f51f71ad883ffa02ddd1d753e5f5",
       type: this.icon,
       style: this.iconStyle()
     })), this.imageSrc && o("div", {
-      key: "a6a8451fea0accc0ebf1236bce6581db59af53e8",
+      key: "3eb1c59e1f68b3db89dc41baa690a563a2b0396c",
       class: "image"
     }, o("img", {
-      key: "a512e1803682e81187647ecddc8ac77d0d07240c",
+      key: "a5a7d3ffd29bbc87463b07c637c29d380e394177",
       src: this.imageSrc
     })), s(this.hostElement, "content") && o("slot", {
-      key: "128d28110b50319c978b96598f73b204a8b36c68",
+      key: "c9173d235dcf128da853a52ce87fc76bc79500e9",
       name: "content"
     }), this.description && o("p", {
-      key: "498bc624e6187e76365d03e50ad7aeaed23c9a18",
+      key: "42370a7e92de9fd376b981587ac6e6714057e566",
       class: "description"
     }, this.description), this.customMarkup && o("p", {
-      key: "68c58bc1abbf26ed2729fd420b56db3e8b8cce10",
+      key: "34fbdc1421c2b70158858b63dbeff72b78e6a832",
       class: "customMarkup",
       innerHTML: d(this.customMarkup)
     })), o("footer", {
-      key: "090a95b0eae17b929781cea8292cc531f67f0cb7"
+      key: "c42b4b7f460a2c67c83f7ad6dd13903220c601e0"
     }, o("q2-action-group", {
-      key: "f2b72a7b97df9771be3eeb7d09d8baca6522a2f6",
+      key: "d3a8d1fcca9af7dbf9800e446be70b43c2ab8570",
       "full-width": true
     }, o("slot", {
-      key: "b6eca7b862e41fecd08516ade207a6d444c08ed3",
+      key: "8f499bf2dabd0766de6240dd586f23d9b97bccdb",
       name: "action"
     })))));
   }

package/dist/q2-tecton-elements/q2-month-picker.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as n, g as o } from "./index-7a5365e2.js";
 
-import { l as i, o as a } from "./index-f2a66217.js";
+import { l as i, o as a } from "./index-c215e8ef.js";
 
 const r = "*{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}.month-container{--comp-month-primary-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)));--comp-month-primary-font-color:var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));--comp-month-primary-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-month-secondary-font-color:var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)))}.month-container .navigation{display:flex;justify-content:space-between;flex-direction:row}.month-container .navigation .year-btn{padding:0 1rem;display:flex;align-items:center}.month-container .navigation .year-btn .year{margin-right:0.2rem}.month-container .navigation .year-btn .year-icon{--t-icon-stroke-width:2px;width:16px;height:16px;transition:all 0.3s ease-in-out}.month-container .navigation .year-btn .year-icon.on{transform:rotate(-180deg)}.month-container .navigation .month-controller{display:flex;align-items:center}.month-container .month-list{display:grid;grid-template-columns:auto auto auto}.month-container .month-list .month{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}.month-container .month-list .month .month-button{border-radius:50%;aspect-ratio:1;width:50px;display:flex;justify-content:center;align-items:center}.month-container .month-list .month .month-button:hover{background:var(--comp-month-primary-background);color:var(--comp-month-secondary-font-color);cursor:pointer}.month-container .month-list .month .month-button:active,.month-container .month-list .month .month-button.active{background:var(--comp-month-primary-background);color:var(--comp-month-primary-font-color)}.month-container .today-label{padding:0.5rem 0;color:var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}";
 
@@ -124,54 +124,54 @@ const s = class {
   // #region Render Methods
   render() {
     return n("div", {
-      key: "ef6f597bba438aaab680e81a46ead6824194be0b",
+      key: "6c9a7ca40d2a597f21e289b540f07900f2588cac",
       class: "month-container",
       onKeyDown: this.onMonthKeydown
     }, n("div", {
-      key: "47704b17e8e57736008bef75949940f45d9904f4",
+      key: "bf2a873e6a183df04920eb603ef507eff82c89bd",
       class: "navigation"
     }, n("q2-btn", {
-      key: "b93c143037130d7e7045ac0b6f9c3c9998b8fb71",
+      key: "4eff95a05e80cfe5c0593d638fd82ca2a7954765",
       class: "year-btn",
       onClick: () => this.viewChange.emit({
         view: "year",
         selectedYear: this.year
       })
     }, n("span", {
-      key: "5a955a89a4d24dca59bd3edcecdb3a183c6ee266",
+      key: "69f3247510f67d368e1f15ce054cbfdb3d56901c",
       class: "year"
     }, this.year), n("q2-icon", {
-      key: "b1edd309501caa293294d1768324672737d7486b",
+      key: "281bdf4e671b05ea28aea658ae05ab11d3c4667d",
       class: "year-icon off",
       type: "chevron-down"
     })), n("div", {
-      key: "307a38769bc318dc2b60f0c71cb50699d23c0b74",
+      key: "9528cc408878d4f4839bed485fe5a46cb005f139",
       class: "month-controller"
     }, n("div", {
-      key: "e4248e62e113e5984220ebdb065c682b1e049214",
+      key: "8d7330c4e3951a001203c5f08af7495b320da5c9",
       class: "cal-year-prev-next"
     }, n("q2-btn", {
-      key: "05845d8ec8daf805acb89f34867a0d6bba84b35f",
+      key: "e725c2476177186c83ecdf31ca8ebfabb3c132c7",
       label: i("tecton.element.calendar.previousYear"),
       "hide-label": true,
       class: "cal-nav-btn prev-year",
       "test-id": "previousYearButton",
       onClick: () => this.selectYear(this.year - 1)
     }, n("q2-icon", {
-      key: "e986148af0f9952a60910669e5b39280d31bc3bd",
+      key: "4a6b9d629c98cbdc248cfd66694cf610f2ca4423",
       type: "arrow-left"
     })), n("q2-btn", {
-      key: "f1f05af3e9e4b570d738e91dbdbb6560e69c171b",
+      key: "797eb8389dbffd0e1e2588d68799be8dc425ef85",
       label: i("tecton.element.calendar.nextYear"),
       "hide-label": true,
       class: "cal-nav-btn next-year",
       "test-id": "nextYearButton",
       onClick: () => this.selectYear(this.year + 1)
     }, n("q2-icon", {
-      key: "0a4d0689881d13b43be98df62bd96b008c88b891",
+      key: "c75dfb662cf8cf336b059650d24e8f22397dd9d5",
       type: "arrow-right"
     }))))), n("div", {
-      key: "f80c97d98668100e9e086f5d665e881127ddd39d",
+      key: "18b5c98c2bc3d4c9f353b79b99fbc76c91942724",
       class: "month-list",
       onClick: this.onMonthSelection
     }, this.months.map(((t, e) => n("div", {
@@ -183,7 +183,7 @@ const s = class {
       "aria-label": t.label,
       tabindex: e === this.focusedIndex ? 0 : -1
     }, t.abbr))))), this.today && n("div", {
-      key: "83ddc501e823cf58e07784cae545a1a473ae263c",
+      key: "96451bd771873ee8643221db902dcf70bfa8df1c",
       class: "today-label"
     }, i("tecton.element.calendar.today"), ": ", this.today));
   }

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

@@ -1,6 +1,6 @@
 import { r as t, h as e, g as r } from "./index-7a5365e2.js";
 
-import { c as o, l as a } from "./index-f2a66217.js";
+import { c as o, l as a } from "./index-c215e8ef.js";
 
 const i = "*{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}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l2, var(--app-gray-l2, #e6e6e6)))))));color:var(--tct-optgroup-header-color, inherit);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));font-weight:var(--tct-optgroup-header-font-weight, var(--t-optgroup-header-font-weight, 600));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, uppercase));position:sticky;top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}";
 
@@ -56,20 +56,20 @@ const p = class {
   // #region Render Methods
   render() {
     return e("div", {
-      key: "ac0997f3f9bd1b65dced4ac274c3f51a72b41858",
+      key: "a4aa78ea138abae562f4171acd8b0b86747f7fa2",
       class: "q2-optgroup-container",
       hidden: this.hidden,
       "aria-labelledby": this.headerId,
       role: "group"
     }, e("div", {
-      key: "a5b2c9d4c9e506f925fad95b272994516e8a6e39",
+      key: "80eccf2178714afe5aa742176e5c982e86941789",
       class: "q2-optgroup-header",
       id: this.headerId
     }, this.label && a(this.label) || ""), e("div", {
-      key: "bbbb697d598f71a7cf2ced1a59fbba713c9a7986",
+      key: "934682de3e212ef449cad6be24ff2c6d6a8e3bcf",
       class: "q2-optgroup-options"
     }, e("slot", {
-      key: "8e7fef13eb234ce7104fa4ce8227cf7792f4f9b6"
+      key: "e0f90a3bac305ef163e508ce4dddd92a3dfecadf"
     })));
   }
   get hostElement() {

package/dist/q2-tecton-elements/q2-option-list_2.entry.js

@@ -1,16 +1,16 @@
 import { r as t, c as e, h as i, H as s, g as o } from "./index-7a5365e2.js";
 
-import { n, l as r, o as a, i as h, w as c, v as l, h as p } from "./index-f2a66217.js";
+import { n, l as r, o as a, i as h, w as c, v as l, h as p, x as d } from "./index-c215e8ef.js";
 
 function sanitizeRegexString(t) {
   return t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
-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{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";
+const u = "*{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{position:relative;width:100%;display:block;line-height:var(--tct-option-list-line-height, var(--t-option-list-line-height, var(--app-line-height, 1.428571429em)))}.content{text-align:start}:host([is-sizeable]) .content{display:block;height:auto}";
 
-const u = d;
+const f = u;
 
-const f = class {
+const b = class {
   constructor(i) {
     t(this, i);
     this.change = e(this, "change", 7);
@@ -566,14 +566,14 @@ const f = class {
   // #region Render Methods
   render() {
     return i(s, {
-      key: "608fc11b974c992855405ddd47cb340bde6be3dc"
+      key: "48bc63463e38e58f7f18e5b5b105e14689be640c"
     }, i("div", {
-      key: "a1cc689919b7099c559aa372adade9973aaad1d3",
+      key: "26d143ad186b387274837d2141f9e5cd7cee6fb0",
       class: "content",
       ref: t => this.contentElement = t,
       onFocusout: this.focusoutHandler
     }, i("div", {
-      key: "b68880e08145e4f055736b1e08d9e2da22cb10ef",
+      key: "afecab7ca714392b609ccc57f4d920a4cc7f2c7e",
       class: "options",
       "aria-label": r("tecton.element.optionList.label", [ this.label ]),
       "aria-multiselectable": `${!!this.multiple}`,
@@ -581,7 +581,7 @@ const f = class {
       onKeyDown: this.internalKeydownHandler,
       onClick: this.clickHandler
     }, i("slot", {
-      key: "3b0cf3b91296b54c060d0ab23b99dbe0630b6336"
+      key: "7ca042464b34eeb59ddd8c62bf44b29b39f3ccfb"
     }))));
   }
   get hostElement() {
@@ -595,13 +595,13 @@ const f = class {
   }
 };
 
-f.style = u;
+b.style = f;
 
-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}.container{display:none}.show{display:block;position:fixed;z-index:var(--tct-popover-z-index, 50);margin:0;padding:0;overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));color:var(--tct-popover-font-color, var(--t-text, #4d4d4d));min-width:var(--tct-popover-min-width, 135px);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 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}:host([block]) .show{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:host([align=left]) .show{left:var(--comp-pop-left);right:unset}:host([align=right]) .show{right:var(--comp-pop-right);left:unset}.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}.show.up{top:unset;bottom:var(--comp-pop-bottom)}.show.legacy{position:absolute}.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}";
+const w = "*{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}.container{display:none}.show{display:block;position:fixed;z-index:var(--tct-popover-z-index, 50);margin:0;padding:0;overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));color:var(--tct-popover-font-color, var(--t-text, #4d4d4d));min-width:var(--tct-popover-min-width, 135px);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 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}:host([block]) .show{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:host([align=left]) .show{left:var(--comp-pop-left);right:unset}:host([align=right]) .show{right:var(--comp-pop-right);left:unset}.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}.show.up{top:unset;bottom:var(--comp-pop-bottom)}.show.legacy{position:absolute}.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}";
 
-const v = b;
+const v = w;
 
-const w = class {
+const m = class {
   constructor(i) {
     t(this, i);
     this.popoverStateChanged = e(this, "popoverStateChanged", 7);
@@ -636,27 +636,35 @@ const w = class {
       e.style.setProperty("--comp-pop-opacity", "1");
     };
     this.setFixedCSSProperties = async () => {
-      var t, e;
-      const {controlElement: i, containerElement: s, currentDirection: o, rootElementRect: n} = this;
-      const {top: r, bottom: a, left: h, right: l} = (e = (t = i === null || i === void 0 ? void 0 : i.getBoundingClientRect) === null || t === void 0 ? void 0 : t.call(i)) !== null && e !== void 0 ? e : {
+      var t, e, i, s;
+      const {controlElement: o, containerElement: n, currentDirection: r, rootElementRect: a} = this;
+      const {top: h, bottom: l, left: p, right: u} = (e = (t = o === null || o === void 0 ? void 0 : o.getBoundingClientRect) === null || t === void 0 ? void 0 : t.call(o)) !== null && e !== void 0 ? e : {
         top: 0,
         bottom: 0,
         left: 0,
         right: 0
       };
-      const p = h - n.left;
-      if (this.block) s.style.setProperty("--comp-pop-width", `${(i === null || i === void 0 ? void 0 : i.offsetWidth) || 0}px`);
-      s.style.setProperty("--comp-pop-left", `${p}px`);
-      s.style.setProperty("--comp-pop-right", `${n.width + n.left - l}px`);
-      if (o === "up") {
-        s.style.setProperty("--comp-pop-bottom", `${n.height + n.top - r}px`);
+      const f = p - a.left;
+      if (this.block) n.style.setProperty("--comp-pop-width", `${(o === null || o === void 0 ? void 0 : o.offsetWidth) || 0}px`);
+      n.style.setProperty("--comp-pop-left", `${f}px`);
+      n.style.setProperty("--comp-pop-right", `${a.width + a.left - u}px`);
+      if (r === "up") {
+        if (d()) {
+          n.style.setProperty("--comp-pop-bottom", `${window.innerHeight - h}px`);
+        } else {
+          n.style.setProperty("--comp-pop-bottom", `${window.innerHeight - h - ((i = window === null || window === void 0 ? void 0 : window.visualViewport.offsetTop) !== null && i !== void 0 ? i : 0)}px`);
+        }
       }
-      if (o === "down") {
-        s.style.setProperty("--comp-pop-top", `${a - n.top}px`);
+      if (r === "down") {
+        if (d()) {
+          n.style.setProperty("--comp-pop-top", `${l}px`);
+        } else {
+          n.style.setProperty("--comp-pop-top", `${l - a.top + ((s = window === null || window === void 0 ? void 0 : window.visualViewport.offsetTop) !== null && s !== void 0 ? s : 0)}px`);
+        }
       }
       // Wait for one paint to prevent layout thrashing
             await c();
-      s.style.setProperty("--comp-pop-opacity", "1");
+      n.style.setProperty("--comp-pop-opacity", "1");
     };
     this.viewPortChanged = () => {
       if (!this.open) return;
@@ -749,6 +757,7 @@ const w = class {
   addViewportListeners() {
     var t;
     window.addEventListener("resize", this.viewPortOrientationChanged);
+    visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener("resize", this.viewPortChanged);
     // #region remove when Popover API is supported in iOS
         window.addEventListener("scroll", this.viewPortChanged, {
       passive: true,
@@ -800,8 +809,8 @@ const w = class {
         const b = !s.style.getPropertyValue("--comp-pop-max-height") || this.orientationChanged;
     // we do not want to constantly update the max-height after an orientation change, so we switch this back to false
         this.orientationChanged = false;
-    const v = this.currentDirection || n || f;
-    switch (v) {
+    const w = this.currentDirection || n || f;
+    switch (w) {
      case "up":
       if (b) {
         const t = this.validatedMaxHeight || d;
@@ -824,6 +833,7 @@ const w = class {
   removeViewportListeners() {
     var t;
     window.removeEventListener("resize", this.viewPortOrientationChanged);
+    visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.removeEventListener("resize", this.viewPortChanged);
     // #region remove when Popover API is supported in iOS
         window.removeEventListener("scroll", this.viewPortChanged);
     (t = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || t === void 0 ? void 0 : t.removeEventListener("orientationchange", this.viewPortOrientationChanged);
@@ -878,17 +888,17 @@ const w = class {
     if (this.show) t.push("show");
     if (this.mode === "legacy") t.push("legacy");
     return i("div", {
-      key: "7f8b390b6a1e7fd2b17603fb803591fd1cb62ba4",
+      key: "0d638a8870e04fed2741e2654dfcf0dfd8abec9f",
       ref: t => this.containerElement = t,
       class: t.join(" "),
       "test-id": "outerContainer",
       tabIndex: -1
     }, i("div", {
-      key: "878b6b01de37233ce5cd9f36b694fad89d599b3e",
+      key: "69a38b7a374a979675dc039b247d8abf88662fae",
       ref: t => this.contentElement = t,
       class: "content"
     }, i("slot", {
-      key: "83b9de3b4fe050d82d9473cc098bd599fe5c645b"
+      key: "da9b5c29369f776443e258b0727492a46541dffa"
     })));
   }
   get hostElement() {
@@ -902,7 +912,7 @@ const w = class {
   }
 };
 
-w.style = v;
+m.style = v;
 
-export { f as q2_option_list, w as q2_popover };
+export { b as q2_option_list, m as q2_popover };
 //# sourceMappingURL=q2-option-list_2.entry.js.map