q2-tecton-elements 1.54.6 → 1.54.8

package/dist/esm/q2-item_3.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement, c as createEvent } from './index-7a5365e2.js';
-import { o as overrideFocus, e as hasSlotContent } from './index-504f1a9e.js';
+import { o as overrideFocus, e as hasSlotContent } from './index-99c46474.js';
 
 const q2ItemCss = "*{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}*{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}:host .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-0, 0))}:host([clickable]){cursor:pointer;--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)))}:host([clickable]) .item{--comp-border-radius:var(--tct-item-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-hover-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-box-shadow:var(--tct-btn-primary-active-background, #0063a0);--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n      0 0 0 4px var(--comp-hover-outer-ring-color)}:host([clickable]) .item:hover{box-shadow:var(--comp-hover-box-shadow)}:host([clickable]) .item:active{box-shadow:var(--comp-active-box-shadow)}:host([clickable]) .item:focus-visible{box-shadow:var(--const-double-focus-ring)}.action{--tct-btn-icon-height:var(--tct-item-action-icon-height, var(--app-scale-6x, 30px));--tct-btn-icon-width:var(--tct-item-action-icon-width, var(--app-scale-6x, 30px));--tct-icon-size:var(--tct-item-action-icon-size, var(--app-scale-6x, 30px));--tct-radio-label-hidden-columns:18px;--tct-radio-label-margin-right:0;--tct-radio-margin:0;align-items:center;display:flex;grid-row:1;justify-content:center}.action-no-bullet{grid-column:2}.body{color:var(--tct-item-body-color, var(--t-textA, #747474));font-size:var(--tct-item-body-font-size, var(--app-font-size, 14px));font-weight:var(--tct-item-body-font-weight, 400)}.bullet{--tct-avatar-fallback-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-fallback-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));--tct-avatar-height:var(--tct-item-avatar-height, var(--app-scale-7x, 35px));--tct-avatar-width:var(--tct-item-avatar-width, var(--app-scale-7x, 35px));grid-column:1;grid-row-start:1;grid-row-end:3;padding-top:var(--tct-item-bullet-padding-top, var(--app-scale-1x, 5px));text-align:center}.bullet-no-footer{grid-row-end:2}.footer{grid-column-start:2;grid-column-end:4;grid-row:2}.footer-no-action-nor-bullet{grid-column-start:1;grid-column-end:2}.footer-no-action{grid-column-start:2;grid-column-end:3}.footer-no-bullet{grid-column-start:1;grid-column-end:3}.header{color:var(--tct-item-header-color, var(--t-text, #4d4d4d));font-size:var(--tct-item-header-font-size, 16px);font-weight:var(--tct-item-header-font-weight, 600);line-height:var(--tct-item-header-line-height, 1.5)}.item{border:var(--tct-item-border);border-radius:var(--comp-border-radius);transition:var(--comp-btn-tween);transition-property:box-shadow;column-gap:var(--tct-item-horizontal-spacing, var(--app-scale-3x, 15px));display:grid;grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto);grid-template-rows:auto auto;padding:var(--tct-item-padding, 0);row-gap:var(--tct-item-vertical-spacing, var(--app-scale-2x, 10px))}.item-no-action-nor-bullet{grid-template-columns:auto}.item-no-action{grid-template-columns:minmax(var(--app-scale-7x, 35px), auto) minmax(auto, 1fr)}.item-no-footer{grid-template-rows:auto}.item-no-bullet{grid-template-columns:minmax(auto, 1fr) minmax(var(--app-scale-5x, 25px), auto)}.main{grid-column:2;grid-row:1}.main-no-action-nor-bullet{grid-column:1}.main-no-bullet{grid-column:1}";
 const Q2ItemStyle0 = q2ItemCss;
@@ -105,7 +105,7 @@ const Q2Item = class {
     // #region Render Methods
     render() {
         const { clickable } = this;
-        return (h("div", { key: '0829fd5b35d9479ab8a7dae744e8a09e90a1a128', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (h("div", { key: '6fba2ecbbe6fe30121f15cda9cc5026a5c5468c2', class: this.bulletClasses }, h("slot", { key: '9bd9880d99124c1102725b5ce6ca49ac1e229cf9', name: "bullet" }))), h("div", { key: '0c184236511ba043c91a009c93680858e34de545', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '2570b5fd60955dbbc97f5f3d941a5d653785fb0e', class: "header" }, h("slot", { key: 'a438cafe8aeded03ee814f736ae897852a9f1415', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '270585a7a4ca111aedd4baeab101c353814aa72c', class: "body" }, h("slot", { key: 'cc95afec425e06c0a9edccedb0420207ccab88a0', name: "body" })))), this.hasActionSlotContent && (h("div", { key: 'c6a32baa731bd79c57a625d615058442a5bc764a', class: this.actionClasses }, h("slot", { key: '2b3104f1e0b4eed5e605c5784468f608240a881b', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '0a989b6ec5ca51e55fb44d0e90f57fe792a6bf35', class: this.footerClasses }, h("slot", { key: '76ae62c0b433f78b187853da2cf40394f7ca315e', name: "footer" })))));
+        return (h("div", { key: '2511d34e01575fe19d4a9becdce7a44ccc8736e7', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (h("div", { key: '47595ae0c96465a0524c4b08f7c77997fa5ad012', class: this.bulletClasses }, h("slot", { key: '0e446493744bdc304336f20e5bab89864b430cec', name: "bullet" }))), h("div", { key: '061814832dc71b7bbe239cddb2e474f7ea91558c', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '9f27b6fa63241088951935cff169385ef23b55e4', class: "header" }, h("slot", { key: '9c99e37648c9c4c5a8b981aa16ec8a7b42a1887a', name: "header" }))), this.hasBodySlotContent && (h("div", { key: 'e8a788366c10d06fef823b9be88c40fba65d4e71', class: "body" }, h("slot", { key: '617965a59d689b0679e920794ebf9a36848f4eab', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '38c6a30f60c6a8bc8c953ed4b74a3687a0ba03a1', class: this.actionClasses }, h("slot", { key: '76efb6ba1377adcb3fc850d8966ecc49b55896b5', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '9a9bf0234ebac99487797bc93afa6e73097f1e68', class: this.footerClasses }, h("slot", { key: '91abd31668cff2657ecf57ce8b9d6f63e8d375ae', name: "footer" })))));
     }
     get hostElement() { return getElement(this); }
 };
@@ -234,7 +234,7 @@ const Q2List = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'e4371faae59ae85dee324d6d6783a4b93c23f67f', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '59cc98b62d2581a66a9ed127189fb23364c49bff', class: this.headerClasses }, h("div", { key: '568b6fab57c7552d5a577d19bd31760f6d1aa461', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: 'd27e785788847cf1a422568383bfe5d986764b2b', name: "filter" }))), h("div", { key: '7a00add6911167d7a27008f10f5d44cfae5d80b2', role: "list" }, h("slot", { key: 'dd5a0290091b0f1cb00a14cde43bab36e87573d2' }))));
+        return (h("div", { key: 'a748db824284ab2660f437fa8687dd274247d61c', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '71e253d36bade6a67869db2562534728d51e4db3', class: this.headerClasses }, h("div", { key: '1cae46b23e094964fccbb404fc96c33d31485b16', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: 'e2697d250030f34b125df9a5af14f29d733e1c72', name: "filter" }))), h("div", { key: '9b2ab45f809fa53a00cfd2fa967402b09da70ffa', role: "list" }, h("slot", { key: '6ce5ba056277fca5a01cd7a94f832bc68ef16078' }))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/q2-legend.entry.js

@@ -102,7 +102,7 @@ const Q2Legend = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("click-elsewhere", { key: 'b80e97d61b66d2a3950c0e680d8f6fdf0594391a', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '14dc772fa9b1608e415573e90d4c2780c12adef5' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+        return (h("click-elsewhere", { key: '14c2b27428cc8a8e95bf8df62aac0c235bd65606', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: 'b597b625d0abb353d7752a9ca6ccedc9dc4eea6a' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
     }
     static get watchers() { return {
         "hoveredItemId": ["watchHoveredItemId"],

package/dist/esm/q2-loc.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-7a5365e2.js';
-import { l as loc } from './index-504f1a9e.js';
+import { l as loc } from './index-99c46474.js';
 
 const q2LocCss = "*{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:inline}";
 const Q2LocStyle0 = q2LocCss;
@@ -57,7 +57,7 @@ const Q2Loc = class {
     // #endregion
     // #region Render Methods
     render() {
-        return h("span", { key: '8774b0a4bfb39826f6d7be0640c7a0244ab22a09' }, this.displayValue);
+        return h("span", { key: 'c5b41696e6cc9c97491da8d5b8e2743ac1e37ca0' }, this.displayValue);
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-message.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-7a5365e2.js';
-import { o as overrideFocus, i as isEventFromElement, n as nextPaint, t as isFirefox, l as loc } from './index-504f1a9e.js';
+import { o as overrideFocus, i as isEventFromElement, n as nextPaint, t as isFirefox, l as loc } from './index-99c46474.js';
 
 const q2MessageCss = "*{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}:host([hidden]){display:none}.message{border-left-width:var(--tct-message-bar-width, var(--t-message-bar-width, var(--app-scale-1x, 5px)));border-left-style:solid;--comp-line-height:var(--tct-message-line-height, var(--t-message-line-height, var(--app-line-height, 1.428571429em)));display:grid;gap:var(--tct-scale-1, var(--app-scale-1x, 5px));align-items:flex-start;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-message-font-color, var(--t-message-font-color, inherit));box-shadow:var(--tct-message-box-shadow, var(--t-message-box-shadow, inherit));border-radius:var(--tct-message-border-radius, var(--t-message-border-radius, inherit))}.message:focus{box-shadow:var(--const-global-focus)}.message-icon{--comp-top-offset:calc(calc(var(--comp-line-height) - var(--comp-icon-size)) / 2);--tct-icon-size:var(--comp-icon-size);top:var(--comp-top-offset);margin-bottom:calc(var(--comp-top-offset) * -1)}.message-content{flex:1;line-height:var(--comp-line-height)}::slotted(ul){--comp-list-default-padding:0 0 0 var(--app-scale-3x, 15px);padding:var(--tct-message-list-padding, var(--comp-list-default-padding))}:host(:not([appearance])),:host([appearance=standard]){--comp-default-margin:var(--app-scale-3x, 5px) 0;margin:var(--tct-message-margin, var(--comp-default-margin))}:host(:not([appearance])) .message,:host([appearance=standard]) .message{--comp-icon-size:var(--tct-message-icon-size, var(--t-message-icon-size, 24px));--comp-padding:var(--tct-message-padding, var(--t-message-padding, var(--app-scale-3x, 15px)));grid-template-columns:var(--comp-icon-size) 1fr;padding:var(--comp-padding);padding-left:calc(var(--comp-padding) - var(--tct-scale-2, var(--app-scale-2x, 10px)));padding-bottom:calc(var(--comp-padding) - var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host(:not([appearance])) ::slotted(ul),:host([appearance=standard]) ::slotted(ul){--comp-list-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-message-list-margin, var(--comp-list-default-margin))}:host([appearance=minimal]){margin:0}:host([appearance=minimal]) .message{padding:var(--tct-message-minimal-padding, var(--t-message-minimal-padding, var(--app-scale-2x, 10px)));grid-template-columns:1fr}:host([appearance=minimal]) ::slotted(ul){margin:var(--tct-scale-1, var(--app-scale-1x, 5px)) 0}:host(:not([type])) .message,:host([type=info]) .message{border-left-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host(:not([type])) .message-icon,:host([type=info]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));--tct-icon-stroke-secondary:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]) .message{border-left-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=success]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00));--tct-icon-stroke-secondary:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]) .message{border-left-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=warning]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500));--tct-icon-stroke-secondary:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]) .message,:host([type=danger]) .message{border-left-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}:host([type=error]) .message-icon,:host([type=danger]) .message-icon{--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-secondary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}";
 const Q2MessageStyle0 = q2MessageCss;
@@ -62,7 +62,7 @@ const Q2Message = class {
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: '862e4f7aa7ae624a695ce6727f72ed8759584173', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '84084e80aac97b4e4e33a2bcf348094cd88279fb', class: "sr" }), h("div", { key: '4a437099dce9df5657a7f5039a55f5b326d2ee58', class: "sr message-label" }, messageLabel), h("div", { key: '8bf021fb84aa6d4973546060acaddae5d059d351', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '1790d7a0df5758d13c8b76577a4703808cddc832' }))));
+        return (h("div", { key: '32df9337d60e4cde91b479f7ac2145b490c6e86f', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '8c85280a31471b39972eaf836eba26e46f8fa384', class: "sr" }), h("div", { key: '38197f54a04591a1b059fb84adeaa753e7d75b5a', class: "sr message-label" }, messageLabel), h("div", { key: '9cc59dd782ad77089f1e9bd9e19f03f6e2333752', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '10589fb202d11974e4a9eddd89646f88f1a38230' }))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/q2-month-picker.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7a5365e2.js';
-import { l as loc, o as overrideFocus } from './index-504f1a9e.js';
+import { l as loc, o as overrideFocus } from './index-99c46474.js';
 
 const q2MonthPickerCss = "*{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))))}";
 const Q2MonthPickerStyle0 = q2MonthPickerCss;
@@ -141,10 +141,10 @@ const Q2MonthPicker = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'a25f142e55a4b9fa27dd0be8a50a965ba79bb544', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '14c16da95a5ff20603d87e8f5bec76037d2df0dc', class: "navigation" }, h("q2-btn", { key: 'f42fcd35aa88a0fd9455e2b10fa9f71d9e706727', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (h("div", { key: '86262b17f3ec60dd3790c116fd54b60d38db54d6', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '618578dd17aff647bbd071f78429f206ba615808', class: "navigation" }, h("q2-btn", { key: '65a83ffac1aac5188ac8299fe6cee64eb0ddaae1', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, h("span", { key: '48482c7f65b28b1caa86d06d04f5c0294e4effb4', class: "year" }, this.year), h("q2-icon", { key: 'e0dea457dbbeb54609bc75d4b5215893853874bc', class: "year-icon off", type: "chevron-down" })), h("div", { key: '24b722a65945224c964e54944ad810da3ae077e3', class: "month-controller" }, h("div", { key: 'a101dbfe3b8e3a071e3b835eddc1b39455391ab5', class: "cal-year-prev-next" }, h("q2-btn", { key: '8895ef11b257dc13295939d0b8cd2ab933016cd2', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: 'af38ef5e10c5754e4a0f57a3131e7c12b6792a89', type: "arrow-left" })), h("q2-btn", { key: '03a9b7c64770e77affe5eb60e165e46f63b6d6b6', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: '951ecf4a0c546878351fef33efbfaa641c451c8e', type: "arrow-right" }))))), h("div", { key: '48084e3520d2ab0a3dd0f59387e4d4183d958679', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: '5a18fa4aef615742b863fd96c3066964186b8f92', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, h("span", { key: 'a45b4604f888d680db4dc17bd0e0e1d2eed3406d', class: "year" }, this.year), h("q2-icon", { key: 'cd08dc672c8ad200966339d1df0664ffc711c792', class: "year-icon off", type: "chevron-down" })), h("div", { key: 'f42557dd4a8eeeb31bfc256a1508b91dc65d6a05', class: "month-controller" }, h("div", { key: '07ff15c4e7073551655b175a29a4251d02dac597', class: "cal-year-prev-next" }, h("q2-btn", { key: '969e197aba094a6c021f0917ed40da908630587f', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: 'dbcaa8e8ddc32a3a2b376aa43236930617532dad', type: "arrow-left" })), h("q2-btn", { key: 'ad254449993df25e5da4ddb57ee7aba0d215ea59', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: '52e12f42f7ace465672863a0e0ba4df917f7412d', type: "arrow-right" }))))), h("div", { key: 'bc1ee824c1ea7123c25f3e8b42adb8618a820d8a', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: 'fce1f228472c32f7e72c9d4fa4c25db6996dc09d', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/q2-optgroup.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-7a5365e2.js';
-import { c as createGuid, l as loc } from './index-504f1a9e.js';
+import { c as createGuid, l as loc } from './index-99c46474.js';
 
 const q2OptgroupCss = "*{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}";
 const Q2OptgroupStyle0 = q2OptgroupCss;
@@ -49,7 +49,7 @@ const Q2Optgroup = class {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '306cf0d06e8664a616974421d45a3083235bc03b', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '738affcd788d0f9e2fdf548f4f14d6d98b8a1c7e', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'cff8fad7e158854df77ad3d9cb85ea578aa0edc5', class: "q2-optgroup-options" }, h("slot", { key: 'd5daf0a105b29ace1c1f0daf5b99ec6bc8fc684c' }))));
+        return (h("div", { key: '979cb6a0423ae7373853b897ae5b48ca6f84b095', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '7e62006e32a809308b63379465cc7549af2edd94', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '49a7dece0f48e25d8dcf9104ebd8706e14624ab7', class: "q2-optgroup-options" }, h("slot", { key: '0d3418b67fbc0c951561526abc81e91503d5b976' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-option-list_2.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7a5365e2.js';
-import { n as nextPaint, l as loc, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, v as isVisible, h as handleDeprecationWarning } from './index-504f1a9e.js';
+import { n as nextPaint, l as loc, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, v as isVisible, h as handleDeprecationWarning, x as isInScrollableContainer, d as isMobile } from './index-99c46474.js';
 
 function sanitizeRegexString(regexString) {
     return regexString.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -583,7 +583,7 @@ const Q2OptionList = class {
 };
 Q2OptionList.style = Q2OptionListStyle0;
 
-const q2PopoverCss = "*{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 q2PopoverCss = "*{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}.legacy.container{display:none}.legacy.show{display:block;z-index:var(--tct-popover-z-index, 50)}:popover-open,.show{position:absolute;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}:popover-open.block,.show.block{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:popover-open.left,.show.left{left:var(--comp-pop-left);right:unset}:popover-open.right,.show.right{right:var(--comp-pop-right);left:unset}:popover-open.down,.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}:popover-open.up,.show.up{top:unset;bottom:var(--comp-pop-bottom)}:popover-open::-webkit-scrollbar,.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}:popover-open::-webkit-scrollbar-thumb,.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}:popover-open::-webkit-scrollbar-track,.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}";
 const Q2PopoverStyle0 = q2PopoverCss;
 
 const Q2Popover = class {
@@ -594,13 +594,15 @@ const Q2Popover = class {
          * The number of pixels to leave between the popover and the edge of the viewport
          */
         this.displayBuffer = 10;
-        /** remove when Popover API is supported in iOS */
         this.orientationChanged = false;
         this.handleMinHeight = () => {
             if (this.minHeight) {
                 handleDeprecationWarning(this, 'minHeight', 'prop');
             }
         };
+        this.handlePopoverToggleEvent = (event) => {
+            this.popoverStateChanged.emit({ open: event.newState === 'open' });
+        };
         this.setAbsoluteCSSProperties = async () => {
             const { controlElement, containerElement, currentDirection, align } = this;
             if (align === 'right') {
@@ -625,25 +627,42 @@ const Q2Popover = class {
             await waitForNextPaint();
             containerElement.style.setProperty('--comp-pop-opacity', '1');
         };
-        this.setFixedCSSProperties = async () => {
-            var _a, _b;
-            const { controlElement, containerElement, currentDirection, rootElementRect } = this;
+        this.setPopoverAPICSSProperties = async () => {
+            var _a, _b, _c;
+            const { controlElement, containerElement, currentDirection, isModule, align } = this;
             const { top: controlTop, bottom: controlBottom, left: controlLeft, right: controlRight, } = (_b = (_a = controlElement === null || controlElement === void 0 ? void 0 : controlElement.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(controlElement)) !== null && _b !== void 0 ? _b : {
                 top: 0,
                 bottom: 0,
                 left: 0,
                 right: 0,
             };
-            const popoverLeft = controlLeft - rootElementRect.left;
+            const popoverLeft = controlLeft;
+            const popoverRight = ((_c = window === null || window === void 0 ? void 0 : window.visualViewport) === null || _c === void 0 ? void 0 : _c.width) - controlRight;
+            if (align === 'right') {
+                containerElement.style.setProperty('--comp-pop-right', `${popoverRight - window.scrollX}px`);
+                containerElement.style.setProperty('--comp-pop-left', 'unset');
+            }
+            else {
+                containerElement.style.setProperty('--comp-pop-left', `${popoverLeft + window.scrollX}px`);
+                containerElement.style.setProperty('--comp-pop-right', 'unset');
+            }
             if (this.block)
                 containerElement.style.setProperty('--comp-pop-width', `${(controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth) || 0}px`);
-            containerElement.style.setProperty('--comp-pop-left', `${popoverLeft}px`);
-            containerElement.style.setProperty('--comp-pop-right', `${rootElementRect.width + rootElementRect.left - controlRight}px`);
             if (currentDirection === 'up') {
-                containerElement.style.setProperty('--comp-pop-bottom', `${rootElementRect.height + rootElementRect.top - controlTop}px`);
+                if (isModule) {
+                    containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop}px`);
+                }
+                else {
+                    containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop - window.scrollY}px`);
+                }
             }
             if (currentDirection === 'down') {
-                containerElement.style.setProperty('--comp-pop-top', `${controlBottom - rootElementRect.top}px`);
+                if (isModule) {
+                    containerElement.style.setProperty('--comp-pop-top', `${controlBottom}px`);
+                }
+                else {
+                    containerElement.style.setProperty('--comp-pop-top', `${controlBottom + window.scrollY}px`);
+                }
             }
             // Wait for one paint to prevent layout thrashing
             await waitForNextPaint();
@@ -660,7 +679,7 @@ const Q2Popover = class {
         };
         this.currentDirection = undefined;
         this.show = false;
-        this.align = undefined;
+        this.align = 'left';
         this.block = undefined;
         this.controlElement = undefined;
         this.direction = undefined;
@@ -673,13 +692,21 @@ const Q2Popover = class {
     // #region Component Lifecycle Events
     disconnectedCallback() {
         this.removeViewportListeners();
+        this.containerElement.removeEventListener('toggle', this.handlePopoverToggleEvent);
         this.containerElement = null;
         this.contentElement = null;
         this.controlElement = null;
-        this.rootElementRect = null;
+    }
+    componentWillLoad() {
+        if (!this.supportsPopoverAPI) {
+            console.warn('The Popover API is not supported in this browser. Please update your browser to the latest version. The component will use legacy mode.');
+            this.mode = 'legacy';
+        }
     }
     componentDidLoad() {
         this.handleMinHeight();
+        if (this.supportsPopoverAPI)
+            this.containerElement.addEventListener('toggle', this.handlePopoverToggleEvent);
         if (this.open)
             this.determinePopDirection();
     }
@@ -706,7 +733,6 @@ const Q2Popover = class {
         this.handleMinHeight();
     }
     async openChanged(open) {
-        this.setRootElement();
         this.popoverStateChanged.emit({ open });
         if (open) {
             this.addViewportListeners();
@@ -715,7 +741,12 @@ const Q2Popover = class {
         else {
             this.removeViewportListeners();
             this.currentDirection = undefined;
-            this.show = false;
+            if (this.mode === 'legacy' || !this.supportsPopoverAPI) {
+                this.show = false;
+            }
+            else {
+                this.containerElement.hidePopover();
+            }
             await waitForNextPaint();
             this.clearCSSProperties();
         }
@@ -738,6 +769,9 @@ const Q2Popover = class {
                 return undefined;
         }
     }
+    get supportsPopoverAPI() {
+        return Object.hasOwn(HTMLElement.prototype, 'popover');
+    }
     get validatedMaxHeight() {
         const { maxHeight } = this;
         return isNaN(maxHeight) ? undefined : maxHeight;
@@ -745,11 +779,12 @@ const Q2Popover = class {
     addViewportListeners() {
         var _a;
         window.addEventListener('resize', this.viewPortOrientationChanged);
-        // #region remove when Popover API is supported in iOS
-        window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });
+        visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener('resize', this.viewPortChanged);
+        if (isInScrollableContainer(this.hostElement) && !isMobile()) {
+            window.addEventListener('scroll', this.viewPortChanged, { passive: true, capture: true });
+        }
         (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.addEventListener('orientationchange', this.viewPortOrientationChanged);
         window.addEventListener('orientationchange', this.viewPortOrientationChanged);
-        // #endregion
     }
     clearCSSProperties() {
         this.containerElement.style.removeProperty('--comp-pop-max-height');
@@ -775,20 +810,23 @@ const Q2Popover = class {
         let maxSpaceAbove;
         let maxSpaceBelow;
         if (isModule) {
-            const { outletOffset = 0, innerHeight = window.innerHeight } = ((_c = window.Tecton) === null || _c === void 0 ? void 0 : _c.platformDimensions) || {};
-            const distanceToIframeBottom = window.visualViewport.height - controlBottom;
-            const viewableSpaceBelow = innerHeight - (outletOffset + controlBottom);
+            const { outletOffset = 0, innerHeight = window.innerHeight, top: topBarHeight = 0, bottom: bottomBarHeight = 0, } = ((_c = window.Tecton) === null || _c === void 0 ? void 0 : _c.platformDimensions) || {};
+            const distanceToIframeBottom = window.innerHeight - controlBottom;
+            // controlElement position visually on the page
+            const visualControlTop = outletOffset > 0 ? controlTop : controlTop + outletOffset - topBarHeight;
+            const visualControlBottom = outletOffset + controlBottom - topBarHeight;
+            // visual space around the controlElement
+            const viewableSpaceAbove = visualControlTop;
+            const viewableSpaceBelow = innerHeight - bottomBarHeight - visualControlBottom;
+            // calculate space above and below controlElement
             const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;
-            windowHeight = innerHeight;
-            // If the top of the module is below the top of the window we just use the controlTop
-            // Otherwise we need to add the outletOffset to the controlTop
-            maxSpaceAbove = (outletOffset > 0 ? controlTop : controlTop + outletOffset) - displayBuffer;
+            maxSpaceAbove = viewableSpaceAbove - displayBuffer;
             maxSpaceBelow = isIframeShorterThanWindow
                 ? distanceToIframeBottom - displayBuffer
                 : viewableSpaceBelow - displayBuffer;
         }
         else {
-            windowHeight = window.visualViewport.height;
+            windowHeight = window.innerHeight;
             maxSpaceAbove = controlTop - displayBuffer;
             maxSpaceBelow = windowHeight - controlBottom - displayBuffer;
         }
@@ -820,72 +858,38 @@ const Q2Popover = class {
     removeViewportListeners() {
         var _a;
         window.removeEventListener('resize', this.viewPortOrientationChanged);
-        // #region remove when Popover API is supported in iOS
+        visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.removeEventListener('resize', this.viewPortChanged);
         window.removeEventListener('scroll', this.viewPortChanged, { capture: true });
         (_a = screen === null || screen === void 0 ? void 0 : screen.orientation) === null || _a === void 0 ? void 0 : _a.removeEventListener('orientationchange', this.viewPortOrientationChanged);
         window.removeEventListener('orientationchange', this.viewPortOrientationChanged);
-        // #endregion
     }
     setDirectionAndShow(direction) {
-        this.setRootElement();
         // Due to some runtime inconsistency across devices/browsers we need to add one more check here because the
         // popover can be closed between the time the popover is opened and the time the direction is determined
         const isOpen = this.open;
         if (!isOpen)
             return;
         this.currentDirection = direction;
-        this.show = true;
-        if (this.mode === 'legacy') {
+        if (this.mode === 'legacy' || !this.supportsPopoverAPI) {
+            this.show = true;
             this.setAbsoluteCSSProperties();
         }
         else {
-            this.setFixedCSSProperties();
-        }
-    }
-    setRootElement() {
-        let currentElement = this.hostElement;
-        while (currentElement && currentElement !== document.documentElement) {
-            const computedStyle = window.getComputedStyle(currentElement);
-            // Check if the element has any styles applied that create a new containg block
-            if (computedStyle.transform !== 'none' ||
-                computedStyle.filter !== 'none' ||
-                computedStyle.perspective !== 'none' ||
-                computedStyle.containerType !== 'normal' ||
-                ['transform', 'perspective', 'filter'].includes(computedStyle.willChange) ||
-                ['layout', 'paint', 'strict', 'content'].includes(computedStyle.contain)) {
-                this.rootElementRect = currentElement.getBoundingClientRect();
-                return;
-            }
-            const rootNode = currentElement.getRootNode();
-            const isRootNodeWebComponent = typeof ShadowRoot !== 'undefined' &&
-                rootNode instanceof ShadowRoot &&
-                rootNode.host instanceof HTMLElement;
-            if (isRootNodeWebComponent) {
-                currentElement = rootNode.host;
-            }
-            else {
-                currentElement = currentElement.parentElement;
-            }
+            this.setPopoverAPICSSProperties();
+            this.containerElement.showPopover();
         }
-        // Return the document's bounding rect if no element is found
-        this.rootElementRect = {
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0,
-            height: window.visualViewport.height,
-            width: window.visualViewport.width,
-        };
     }
     // #endregion
     // #region Render Methods
     render() {
-        const containerClasses = ['container', this.currentDirection];
+        const containerClasses = ['container', this.currentDirection, this.align];
         if (this.show)
             containerClasses.push('show');
+        if (this.block)
+            containerClasses.push('block');
         if (this.mode === 'legacy')
             containerClasses.push('legacy');
-        return (h("div", { key: '294386b6ea2ecfc2f8fe9eb6dad1bc925e2f6349', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1 }, h("div", { key: 'd2d59287a81a7ce3ef4275a9963a6aa7a71a360e', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '00e78b1984a1bba43766f9d4d663ddd7b97ac667' }))));
+        return (h("div", { key: '4cd26a6c090a6fb5b56d2fa6464143f74998c215', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "manual" }, h("div", { key: '545c376ca96c14e129a8f60fadac3a3264b916cf', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '9a2824ab9023f34a2b3a56a76ace4df6a91b5ec6' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {