q2-tecton-elements 1.71.4 → 1.73.0

package/dist/collection/components/q2-modal/q2-modal.css

@@ -131,7 +131,7 @@ dialog {
   --comp-dialog-gap: var(--tct-modal-gap, var(--app-scale-2x, 10px));
   --comp-dialog-max-width: var(--tct-modal-max-width, 600px);
   --comp-dialog-max-height: var(--tct-modal-max-height, 100vh);
-  --comp-dialog-min-height: var(--tct-modal-min-height, 40vh);
+  --comp-dialog-min-height: var(--tct-modal-min-height, inherit);
   --comp-dialog-box-shadow: var(--tct-modal-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)));
   position: fixed;
   top: 100%;
@@ -141,6 +141,7 @@ dialog {
   transition: transform var(--tct-modal-tween, var(--app-tween-2, 0.4s ease)), opacity var(--tct-modal-tween, var(--app-tween-2, 0.4s ease));
   width: 100%;
   max-width: var(--comp-dialog-max-width);
+  max-height: var(--comp-dialog-max-height);
   border: 0;
   border-radius: var(--comp-border-radius);
   box-shadow: var(--comp-dialog-box-shadow);
@@ -222,11 +223,12 @@ dialog[open].is-closing::backdrop {
 }
 
 .interior {
+  box-sizing: border-box;
   display: grid;
   min-height: var(--comp-dialog-min-height);
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: auto minmax(0, 1fr) auto;
   gap: var(--comp-dialog-gap);
-  max-height: calc(var(--comp-dialog-max-height) - var(--comp-dialog-padding));
+  max-height: min(var(--comp-dialog-max-height), 100vh - 2 * var(--comp-dialog-padding));
   padding: var(--comp-dialog-padding);
 }
 .interior.is-list header,
@@ -263,4 +265,39 @@ header .btn-close {
   grid-area: close;
   width: var(--comp-close-button-size);
   height: var(--comp-close-button-size);
+}
+
+footer {
+  --tct-action-group-margin: var(--app-scale-2x, 10px) 0 0;
+  align-self: end;
+}
+
+@media screen and (max-height: 400px) {
+  .content {
+    -webkit-mask-image: none;
+    mask-image: none;
+    overflow-y: visible;
+  }
+  .interior {
+    grid-template-rows: auto auto auto;
+    overflow-y: auto;
+    --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;
+  }
+  .interior::-webkit-scrollbar {
+    width: var(--comp-scrollbar-size);
+    height: var(--comp-scrollbar-size);
+    margin: 5px;
+  }
+  .interior::-webkit-scrollbar-thumb {
+    background: var(--comp-scrollbar-color);
+    border-radius: var(--comp-scrollbar-border-radius);
+  }
+  .interior::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: var(--comp-scrollbar-border-radius);
+  }
 }

package/dist/collection/components/q2-modal/q2-modal.js

@@ -21,11 +21,19 @@ export class Q2Modal {
         // #endregion
         // #region Public Property API
         /**
-         * Controls visibility of the close button in the top right corner.
+         * Controls visibility of the close button and whether the modal can be dismissed with the backdrop or Escape key.
          */
         this.closable = true;
+        /**
+         * Whether the action buttons should take up the full width of the modal footer.
+         */
+        this.fullWidthButton = true;
         // #endregion
         // #region Local Methods
+        this.hasDialogTransition = () => {
+            const transitionDurations = (getComputedStyle(this.dialogElement).transitionDuration || '0s').split(',');
+            return transitionDurations.some(duration => parseFloat(duration) > 0);
+        };
         this.initializeModal = () => {
             // limits 4 buttons in action slot
             this.hostElement.querySelectorAll('[slot="action"]').forEach((el, i) => {
@@ -39,6 +47,8 @@ export class Q2Modal {
         };
         this.onCancel = (event) => {
             event.preventDefault();
+            if (!this.closable)
+                return;
             this.closeModal();
         };
         this.onClick = (event) => {
@@ -49,12 +59,16 @@ export class Q2Modal {
             const slot = eventTarget.getAttribute('slot');
             if (slot === 'action') {
                 this.tctClick.emit({ value: eventTarget.dataset.value });
-                this.onCancel(event);
+                event.preventDefault();
+                this.closeModal();
             }
             else {
                 const isInContent = !!eventTarget.closest('.interior , q2-modal');
                 if (isInContent)
                     return;
+                this.tctBackdropClick.emit();
+                if (!this.closable)
+                    return;
                 this.onCancel(event);
             }
         };
@@ -78,33 +92,50 @@ export class Q2Modal {
     // #region Component Lifecycle Events
     disconnectedCallback() {
         var _a;
-        this.dialogElement.removeEventListener('cancel', this.onCancel);
         (_a = this.contentElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', this.debouncedScroll);
     }
     componentDidLoad() {
-        this.dialogElement.addEventListener('cancel', this.onCancel);
         this.tctReady.emit();
         this.bodyOverflow = document.body.style.overflow;
         this.debouncedScroll = debounce(this.onContentScroll, 100);
         this.contentElement.addEventListener('scroll', this.debouncedScroll);
     }
     componentDidRender() {
-        var _a;
-        (_a = this.scheduledAfterRender) === null || _a === void 0 ? void 0 : _a.forEach(fn => fn());
+        var _a, _b;
+        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.setAttribute('closedby', this.closable ? 'closerequest' : 'none');
+        (_b = this.scheduledAfterRender) === null || _b === void 0 ? void 0 : _b.forEach(fn => fn());
         this.scheduledAfterRender = [];
     }
     // #endregion
     // #region Public Methods API
     async closeModal(data) {
-        this.tctClose.emit(data);
-        this.renderStatus = 'is-closing';
+        var _a;
+        if (!((_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.open))
+            return;
+        const shouldWaitForTransition = this.renderStatus === 'is-open' && this.hasDialogTransition();
         document.body.style.overflow = this.bodyOverflow;
-        this.dialogElement.addEventListener('transitionend', () => {
+        const completeClose = () => {
             if (this.renderStatus !== 'is-closing')
                 return;
+            this.dialogElement.removeEventListener('transitionend', onTransitionComplete);
+            this.dialogElement.removeEventListener('transitioncancel', onTransitionComplete);
             this.dialogElement.close();
             this.renderStatus = null;
-        }, { once: true });
+            this.tctClose.emit(data);
+        };
+        const onTransitionComplete = (event) => {
+            if (event.target !== this.dialogElement || event.propertyName !== 'transform')
+                return;
+            completeClose();
+        };
+        if (shouldWaitForTransition) {
+            this.dialogElement.addEventListener('transitionend', onTransitionComplete);
+            this.dialogElement.addEventListener('transitioncancel', onTransitionComplete);
+        }
+        this.renderStatus = 'is-closing';
+        if (!shouldWaitForTransition) {
+            completeClose();
+        }
     }
     async openModal(option) {
         var _a;
@@ -125,18 +156,28 @@ export class Q2Modal {
         document.body.style.overflow = 'hidden';
         this.initializeModal();
         this.renderStatus = 'is-opening';
-        this.dialogElement.addEventListener('transitionend', () => {
-            if (this.renderStatus !== 'is-opening')
-                return;
+        if (!this.hasDialogTransition()) {
             this.renderStatus = 'is-open';
-        }, { once: true });
+            return;
+        }
+        const completeOpen = (event) => {
+            if (event.target !== this.dialogElement || event.propertyName !== 'transform')
+                return;
+            this.dialogElement.removeEventListener('transitionend', completeOpen);
+            this.dialogElement.removeEventListener('transitioncancel', completeOpen);
+            if (this.renderStatus === 'is-opening') {
+                this.renderStatus = 'is-open';
+            }
+        };
+        this.dialogElement.addEventListener('transitionend', completeOpen);
+        this.dialogElement.addEventListener('transitioncancel', completeOpen);
     }
     // #endregion
     // #region Render Methods
     render() {
         const interiorClasses = `interior`;
         const renderStatus = `${this.renderStatus || ''}`;
-        return (h("dialog", { key: '92dc143e4337dbe56582ec8ef8f0568dd71e3e55', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '8528e0443f56c88b0e3454cc5b33e5307c93b4b3', class: interiorClasses }, this.title && (h("header", { key: '58082ec96ee55a2054ced1d14c71ca048a9af336' }, this.title && h("h2", { key: '8ac56ee9d3eb84056faaa748a9a2d69ef946eeeb', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '664890ce00ec76f4f4339f1b32579cfe95f8ad40', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '3c9349bf6456c8684ac87d3c6918820081e2657b', type: "close" }))))), h("div", { key: '76fa2465d4d60db5e0843274348b85eaf1a49ed6', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: 'd9d7ae8b43dae09abbaf3fcfec61fdf66ab0f619', class: "icon" }, h("q2-icon", { key: '3db0ae939a529933b79018a23b88a7d429658a9a', type: this.icon }))), this.imageSrc && (h("div", { key: 'bf295b4c233610b87b6f75557f4c4d439d757c96', class: "image" }, h("img", { key: 'ffcd4e115096ed4e48349ba28b00a261bdd78f7b', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: '09342f081d5307fe109e247a6c2de7bca0fd6b0f', name: "content" }), this.description && h("p", { key: '892e4550e230f47e26e757b6f483c2bee0f424ce', class: "description" }, this.description), this.customMarkup && (h("p", { key: '625a6ee4350fe16c3589ebed630f86be8a420609', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: '7663cc739e8fe908b9a916e1ddbc0a0364c8023f' }, h("q2-action-group", { key: 'a426f7228f0f4a7ae991fc65d221795279ec2530', "full-width": true }, h("slot", { key: 'f6862c2074f18f31a9775f2de07aaa3e8904ac76', name: "action" }))))));
+        return (h("dialog", { key: '67c724b2e94aa823893cc3477ffa364bc07f3c91', ref: el => (this.dialogElement = el), class: renderStatus, onCancel: this.onCancel, onClick: this.onClick }, h("div", { key: '67b97fe323985b56db793d1cf939192bbfbd424e', class: interiorClasses }, this.title && (h("header", { key: 'ec0c82831007887e2baeddc50f2b8c0ec24b0d97' }, this.title && h("h2", { key: '10bbd7f9216ce221616acc4c77984aca582eba10', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: '8f801bf013c9015c3ae50543067393b26941d3d4', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: 'b546a86894aa6b5dd3576a33eadfa63e21a13590', type: "close" }))))), h("div", { key: 'cdc674c3cee4bca6bda0c60ca2c9f08f83ab4440', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '8b8ffc983cecd2ddf1f912db7f00a6ed198a6b16', class: "icon" }, h("q2-icon", { key: 'cb3430c9216268ed7e8eeea85a83168b2d72ceb1', type: this.icon }))), this.imageSrc && (h("div", { key: 'eab34ebad157a6c81a0e24bc726505e3541eac05', class: "image" }, h("img", { key: 'cdf8e7a1c381a099d811241a410998e16405bda4', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: '2674f81de64e3d6069e043f4c0a0db39d70f466a', name: "content" }), this.description && h("p", { key: '8dc2a0b031812a6e65012df8d78e5ff3373c117e', class: "description" }, this.description), this.customMarkup && (h("p", { key: '218d120d1109cff6a1aa79e5b76befbca0ca5857', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: 'ffc5c49fbaabde579fda002a25ac893e798c07de' }, h("q2-action-group", { key: '295cde61c6e9851aab36f3903f892a5775aca76c', "full-width": this.fullWidthButton }, h("slot", { key: 'e8ece0f36c2647515d82e3cd21b9c36faf731fd2', name: "action" }))))));
     }
     static get is() { return "q2-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -164,7 +205,7 @@ export class Q2Modal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Controls visibility of the close button in the top right corner."
+                    "text": "Controls visibility of the close button and whether the modal can be dismissed with the backdrop or Escape key."
                 },
                 "getter": false,
                 "setter": false,
@@ -210,6 +251,26 @@ export class Q2Modal {
                 "reflect": false,
                 "attribute": "description"
             },
+            "fullWidthButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the action buttons should take up the full width of the modal footer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width-button",
+                "defaultValue": "true"
+            },
             "icon": {
                 "type": "string",
                 "mutable": false,
@@ -277,6 +338,21 @@ export class Q2Modal {
     }
     static get events() {
         return [{
+                "method": "tctBackdropClick",
+                "name": "tctBackdropClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the modal backdrop is clicked."
+                },
+                "complexType": {
+                    "original": "undefined",
+                    "resolved": "undefined",
+                    "references": {}
+                }
+            }, {
                 "method": "tctClick",
                 "name": "tctClick",
                 "bubbles": true,
@@ -361,6 +437,10 @@ export class Q2Modal {
                             "path": "q2-tecton-common/lib/types/modal",
                             "id": "../q2-tecton-common/lib/types/modal.d.ts::ModalResponse",
                             "referenceLocation": "ModalResponse"
+                        },
+                        "TransitionEvent": {
+                            "location": "global",
+                            "id": "global::TransitionEvent"
                         }
                     },
                     "return": "Promise<void>"
@@ -388,6 +468,10 @@ export class Q2Modal {
                             "path": "q2-tecton-common/lib/types/modal",
                             "id": "../q2-tecton-common/lib/types/modal.d.ts::ModalOption",
                             "referenceLocation": "ModalOption"
+                        },
+                        "TransitionEvent": {
+                            "location": "global",
+                            "id": "global::TransitionEvent"
                         }
                     },
                     "return": "Promise<void>"

package/dist/collection/components/q2-modal/test/q2-modal-test.vr.js

@@ -2,15 +2,15 @@ import { expect } from "@playwright/test";
 import { test } from "@stencil/playwright";
 import { setupPage, THEMES, FONT_SCALE_PX, FONT_SCALE_SUFFIX } from "../../../utils/test/vr-helpers";
 const ACTIONS = `
-    <q2-btn slot="action" intent="workflow-primary" label="Submit"></q2-btn>
-    <q2-btn slot="action" intent="workflow-secondary" label="Cancel"></q2-btn>
+    <q2-btn slot="action" intent="primary" label="Submit"></q2-btn>
+    <q2-btn slot="action" intent="secondary" label="Cancel"></q2-btn>
 `;
 const MANY_ACTIONS = `
-    <q2-btn slot="action" intent="workflow-primary" label="Submit"></q2-btn>
-    <q2-btn slot="action" intent="workflow-secondary" label="Cancel"></q2-btn>
-    <q2-btn slot="action" intent="workflow-escape" label="Reset 1"></q2-btn>
-    <q2-btn slot="action" intent="workflow-escape" label="Reset 2"></q2-btn>
-    <q2-btn slot="action" intent="workflow-escape" label="Reset 3"></q2-btn>
+    <q2-btn slot="action" intent="primary" label="Submit"></q2-btn>
+    <q2-btn slot="action" intent="secondary" label="Cancel"></q2-btn>
+    <q2-btn slot="action" intent="escape" label="Reset 1"></q2-btn>
+    <q2-btn slot="action" intent="escape" label="Reset 2"></q2-btn>
+    <q2-btn slot="action" intent="escape" label="Reset 3"></q2-btn>
 `;
 const LONG_DESC = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula.';
 // Inline SVG data URL — stable across runs, no network dependency.
@@ -92,6 +92,7 @@ const focusCase = (variant, theme) => {
     });
 };
 const BASIC_VARIANT = VARIANTS.find(v => v.name === 'basic');
+const LONG_DESCRIPTION_VARIANT = VARIANTS.find(v => v.name === 'long-description');
 test.describe('q2-modal — variants × themes', () => {
     for (const variant of VARIANTS) {
         for (const theme of THEMES) {
@@ -104,6 +105,11 @@ test.describe('q2-modal — variants × themes', () => {
         }
     }
 });
+test('q2-modal--full-width-button-false--open — standard', async ({ page }) => {
+    await setupPage(page, `${VISIBLE_HYDRATION_ANCHOR}<q2-modal title="Confirm action" description="Are you sure you want to continue with this action?" full-width-button="false">${ACTIONS}</q2-modal>`, { theme: 'standard', setupLoc: true });
+    await openModal(page);
+    await expect(page).toHaveScreenshot('q2-modal--full-width-button-false--open--standard.png');
+});
 test.describe(`q2-modal — scaled font size × themes`, () => {
     if (BASIC_VARIANT) {
         for (const theme of THEMES) {
@@ -115,3 +121,22 @@ test.describe(`q2-modal — scaled font size × themes`, () => {
         }
     }
 });
+test.describe('q2-modal — 400% zoom equivalent × themes', () => {
+    if (LONG_DESCRIPTION_VARIANT) {
+        for (const theme of THEMES) {
+            test(`q2-modal--long-description--400-percent-zoom — ${theme}`, async ({ page }) => {
+                await page.setViewportSize({ width: 320, height: 256 });
+                await setupPage(page, LONG_DESCRIPTION_VARIANT.html, { theme, setupLoc: true });
+                await openModal(page);
+                await page.locator('q2-modal').evaluate((el) => {
+                    var _a;
+                    const interior = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.interior');
+                    if (!interior)
+                        throw new Error('q2-modal interior not found in shadow DOM');
+                    interior.scrollTop = interior.scrollHeight;
+                });
+                await expect(page).toHaveScreenshot(`q2-modal--long-description--400-percent-zoom--${theme}.png`);
+            });
+        }
+    }
+});

package/dist/collection/components/q2-mutation-observer/q2-mutation-observer.js

@@ -92,7 +92,7 @@ export class Q2MutationObserver {
     // #endregion
     // #region Render Methods
     render() {
-        return h("slot", { key: 'e60ef36a762c6af123a91fe6c4def64179663098', onSlotchange: this.handleSlotChange });
+        return h("slot", { key: '8e33d51e7485e5477d3cf98cde060dd87effc2f7', onSlotchange: this.handleSlotChange });
     }
     static get is() { return "q2-mutation-observer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-optgroup/q2-optgroup.js

@@ -55,7 +55,7 @@ export class Q2Optgroup {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '4271765f1422cd33d73e1ed66b967994395bb4e1', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'f5efb564a7049f7e8d78c0b6fa5749e239ea5133', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '9f932967082554e86e8048bba66a1493258f6d06', class: "q2-optgroup-options" }, h("slot", { key: 'd58e647529d66c50b6e0c9a79705128f0ffdf806' }))));
+        return (h("div", { key: '829ae5ebec150734128c98343ddb8112de0ee21e', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '6683155f922a2d15349f885aabac0bf9ee6a4575', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'b974da306256b13283183fa03e4dc8bcc8be3f44', class: "q2-optgroup-options" }, h("slot", { key: '2f0035aad12309be2c5c4ea3125077cc704e65e4' }))));
     }
     static get is() { return "q2-optgroup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-option-list/q2-option-list.js

@@ -419,6 +419,26 @@ export class Q2OptionList {
             option.role = optionRole;
         });
     }
+    findScrollableAncestor(node) {
+        var _a, _b;
+        let current = node;
+        while (current) {
+            if (current instanceof HTMLElement && current !== node) {
+                const overflowY = getComputedStyle(current).overflowY;
+                // Skip html/body so page-level scroll isn't treated as our container.
+                if ((overflowY === 'auto' || overflowY === 'scroll') &&
+                    current !== document.documentElement &&
+                    current !== document.body) {
+                    return current;
+                }
+            }
+            const slot = current.assignedSlot;
+            const parent = current.parentNode;
+            const shadowHost = current.host;
+            current = (_b = (_a = slot !== null && slot !== void 0 ? slot : parent) !== null && _a !== void 0 ? _a : shadowHost) !== null && _b !== void 0 ? _b : null;
+        }
+        return null;
+    }
     focusSelectedSibling(option) {
         const { allVisibleOptions, allOptions } = this;
         const hasNoSiblings = allVisibleOptions.length < 2;
@@ -500,9 +520,18 @@ export class Q2OptionList {
         const activeOption = this.allOptions[this.activeIndex];
         if (!activeOption)
             return;
-        const { scrollX, scrollY } = window;
-        activeOption.scrollIntoView({ block: 'center' });
-        window.scrollTo(scrollX, scrollY);
+        // Do our own scroll math so `scrollIntoView` doesn't cascade to the parent window in an SDK iframe.
+        const container = this.findScrollableAncestor(activeOption);
+        if (container) {
+            if (container.scrollHeight > container.clientHeight) {
+                const optionRect = activeOption.getBoundingClientRect();
+                const containerRect = container.getBoundingClientRect();
+                const optionCenter = optionRect.top - containerRect.top + optionRect.height / 2;
+                container.scrollTop += optionCenter - containerRect.height / 2;
+            }
+            return;
+        }
+        activeOption.scrollIntoView({ block: 'nearest' });
     }
     searchOptions(key, shouldSelect) {
         this.searchString = key;
@@ -586,7 +615,7 @@ export class Q2OptionList {
     // #endregion
     // #region Render Methods
     render() {
-        return (h(Host, { key: '14f2a8ab97077ed7b93d746b75f89b98f416a55d' }, h("div", { key: '1184c5d8d4cf8af63a60bef1282d6442b8539cf6', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '5dcb6a82f1759e46d5e742e72075bf3dfa3c6d70', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": this.type === 'menu' ? undefined : this.multiple ? 'true' : undefined, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '39372ab91b081ba124ff4c4dc04fc0c84be7a4ad' })))));
+        return (h(Host, { key: '19cadb5668db33a912951df4ec0e81a74b2b78ce' }, h("div", { key: '1d5a8f310ee97bc2189b839ee3d87e08bf0fa269', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '24b1616962a9b544fb6215acc1e6edb4f12a5a03', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": this.type === 'menu' ? undefined : this.multiple ? 'true' : undefined, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: 'eeb0342b7c319f5f5af95daa54dcaa732c3159d9' })))));
     }
     static get is() { return "q2-option-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-otp/q2-otp.js

@@ -358,16 +358,16 @@ export class Q2Otp {
     renderSendCodeButton() {
         if (!this.isAwaitingSendCode)
             return;
-        return (h("q2-btn", { block: true, class: "send-code-button", disabled: this.disabled, intent: "workflow-primary", label: this.localizedSendCodeLabel, onClick: this.handleSendCodeClick, ref: el => (this.sendCodeRef = el) }));
+        return (h("q2-btn", { block: true, class: "send-code-button", disabled: this.disabled, intent: "primary", label: this.localizedSendCodeLabel, onClick: this.handleSendCodeClick, ref: el => (this.sendCodeRef = el) }));
     }
     renderSubmitArea() {
         if (this.isSuccess) {
             return (h("q2-btn", { block: true, class: "submit-button", intent: "neutral", onClick: this.handleSubmitClick }, h("q2-icon", { type: "checkmark" }), loc('Success')));
         }
-        return (h("q2-btn", { block: true, class: "submit-button", disabled: this.disabled || !this.isComplete, intent: "workflow-primary", label: this.isVerifying ? this.localizedProcessingLabel : this.localizedSubmitLabel, loading: this.isVerifying, onClick: this.handleSubmitClick }));
+        return (h("q2-btn", { block: true, class: "submit-button", disabled: this.disabled || !this.isComplete, intent: "primary", label: this.isVerifying ? this.localizedProcessingLabel : this.localizedSubmitLabel, loading: this.isVerifying, onClick: this.handleSubmitClick }));
     }
     render() {
-        return (h("div", { key: '80f709fb9ccac37057bc3da569e4aefa6675d864', "aria-busy": this.isVerifying ? 'true' : undefined, "aria-labelledby": this.label ? this.labelId : undefined, class: {
+        return (h("div", { key: '8f4ada9f194f1b0995995e946097b3e24a11f605', "aria-busy": this.isVerifying ? 'true' : undefined, "aria-labelledby": this.label ? this.labelId : undefined, class: {
                 'otp-container': true,
                 'has-focus': this.hasFocus,
                 'is-masked': this.masked,
@@ -375,7 +375,7 @@ export class Q2Otp {
                 'state-success': this.state === 'success',
                 'state-verifying': this.isVerifying,
                 [`length-${this.normalizedLength}`]: true,
-            }, role: "group" }, this.renderSendCodeButton(), h("div", { key: '1192f341199e8fbbd2c04c3fe58d69129888410c', class: { 'otp-content': true, 'send-code-hidden': this.state === 'ready' } }, this.renderLabel(), h("div", { key: 'f84aa0d243808206cf31e2900e633f5c5199b197', class: "otp-control-group" }, h("div", { key: '8e01108ff520da247f80bb2204b2620a477a652f', class: "fields-shell" }, h("div", { key: '7f942c6fb6be407f4c43cb2349614cf33c0ec62b', class: "fields-container" }, h("input", { key: '5c1df9b3ff79098f47f40f2ad14165e25a59e5d8', "aria-describedby": this.describedBy, "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-label": this.inputAriaLabel, autocomplete: "one-time-code", autofocus: this.autoFocus, class: "otp-hidden-input", disabled: this.disabled || this.isVerifying || this.isSuccess, inputmode: "numeric", maxLength: this.normalizedLength, onBlur: this.handleFocusOut, onFocus: this.handleFocusIn, onInput: this.handleInputEvent, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, pattern: "[0-9]*", ref: el => (this.inputRef = el), "test-id": "q2OtpInput", type: "text", value: this.value }), this.renderFields()), this.renderProcessingOverlay()), this.renderSubmitArea(), this.renderMessage()), this.renderHelperText())));
+            }, role: "group" }, this.renderSendCodeButton(), h("div", { key: '099e1ef5ccc09846faf9952772e61ff7644e5085', class: { 'otp-content': true, 'send-code-hidden': this.state === 'ready' } }, this.renderLabel(), h("div", { key: '5ad6ff061779de6562f523148459729d73bbf53a', class: "otp-control-group" }, h("div", { key: 'd60e93f2d79d0f4b0348a5b581647ece89e9973c', class: "fields-shell" }, h("div", { key: '55b515c8a04e664024dcc66e4d894dcb0ddd4ca4', class: "fields-container" }, h("input", { key: 'b8319da6e91ea06ff5632c72326460c0e532393d', "aria-describedby": this.describedBy, "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-label": this.inputAriaLabel, autocomplete: "one-time-code", autofocus: this.autoFocus, class: "otp-hidden-input", disabled: this.disabled || this.isVerifying || this.isSuccess, inputmode: "numeric", maxLength: this.normalizedLength, onBlur: this.handleFocusOut, onFocus: this.handleFocusIn, onInput: this.handleInputEvent, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, pattern: "[0-9]*", ref: el => (this.inputRef = el), "test-id": "q2OtpInput", type: "text", value: this.value }), this.renderFields()), this.renderProcessingOverlay()), this.renderSubmitArea(), this.renderMessage()), this.renderHelperText())));
     }
     static get is() { return "q2-otp"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-pagination/q2-pagination.js

@@ -312,7 +312,7 @@ export class Q2Pagination {
                 total,
             });
         }
-        return (h("nav", { key: 'c42b191eccb70b9e3c684843cebf9f6b06f3c3b3', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: 'eb03cdc19938adac4a5c44887fa7d9853c9b89ab', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: '647c141a9df399b3764fdc90c5ae05f113e0019d', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: 'fd595002af27dd639391665573433783342d2aee', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -321,10 +321,10 @@ export class Q2Pagination {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: '0e9a0bcfa6545b08843423378066989cf96ad18e', class: "controls" }, h("div", { key: '4ea3b0a64165885dfd1bd525527e2617e4f4d748', class: "btn-group" }, h("q2-btn", { key: '72d72c7b974ecbca50c4259cca5028515786af5b', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '26f5f8e8cf23a6d924b4a01796827fb62017809d', type: "chevron-double-left" })), h("q2-btn", { key: '5f7845c5917137131cc6703bb59d90c842e32a7e', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'e02ccf51de21789099e2b254019f962dbb5011dc', type: "chevron-left" }))), h("div", { key: 'ca201f7a4382e7f3835093c4c3877f7e2a0b5150', class: "input-display", hidden: isFullViewHidden }, h("span", { key: 'c690830341a15c25e4ad5a2d2a524d876c9f7cdb', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '7d08062d6cd495d4025a82413b347ed87915cbce', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: 'e30795721d66d75dd5f349ad4d6d3ffda6023820', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => event.stopImmediatePropagation(), onTctChange: event => {
+            })), h("div", { key: 'da4c7137ed566532a9471a7b83a63c49c51c8e82', class: "controls" }, h("div", { key: 'ef59aadb7b6cfb82707ffb1ee9e1626428a84801', class: "btn-group" }, h("q2-btn", { key: 'e5d551764bec56fed3dc34684c4ff2cdfadd95ea', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '7423721c4c3082b8f0fdea5d6bde9fc62640fa24', type: "chevron-double-left" })), h("q2-btn", { key: '90b3544e9983fa652f225eda9d18d08883b31c39', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '6535f2c3745421cbf1dd5750e3ab8d08288bc148', type: "chevron-left" }))), h("div", { key: 'd4a581982a62f360e5b693a110a7d75eaf0ba24c', class: "input-display", hidden: isFullViewHidden }, h("span", { key: '45a28afc71ee038d829cbe64550bf929210002a9', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: 'ba5df7f89aed5be2f882057d8cf344981e3f1127', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '686c5c8891bd64a40ba9abe8436475bf3ef8fd38', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => event.stopImmediatePropagation(), onTctChange: event => {
                 event.stopPropagation();
                 this.handlePageChange(event.detail.value);
-            }, "test-id": "pageInput", current: "page", disabled: disabled })), h("span", { key: 'e2f1e51306298ddf428fd4e9fa665b58b2535fc8', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'c7a095aaa30743441c0c4d22f55e94801b3a823f', class: "btn-group" }, h("q2-btn", { key: 'c52d8837ec35b128a9d3f9c87766ed770edc9600', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'd1d802bddb426070fa1ca92a7937b8405949f01c', type: "chevron-right" })), h("q2-btn", { key: '357f5bf5426e6c0004b737238a3c66697fc6a672', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '1be92d6fa9252168baf63420271c8b8a77f41d92', type: "chevron-double-right" })))), h("div", { key: '96ca4bc582b1dcb830bad146fbf1233f2549f256', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            }, "test-id": "pageInput", current: "page", disabled: disabled })), h("span", { key: '59853a0308d1f97b6722f40c29219d887842c54c', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '17fa28deff49d5a3a28b6d66b5639428a309057a', class: "btn-group" }, h("q2-btn", { key: '0e5eca8dc228a8285015d5941d9c4e44af5e5353', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '9a42a4961ac7efd40c176145a39f0c63540daf14', type: "chevron-right" })), h("q2-btn", { key: 'fe0c41536c25d7deffa26fdab4f91405e5b197d6', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '5beccc87ad5ef95350cb21d969b15c0996911126', type: "chevron-double-right" })))), h("div", { key: 'd60b56b2f8173ea2a6fcf3cf4fd1b5f2807fbc5c', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
     }
     static get is() { return "q2-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-pill/q2-pill.css

@@ -349,8 +349,8 @@ q2-popover,
 q2-icon {
   --tct-icon-stroke-primary: var(--tct-pill-icon-stroke, currentcolor);
   --tct-icon-stroke-width: var(--tct-pill-icon-stroke-width, inherit);
-  width: var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));
-  height: var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));
+  width: var(--tct-pill-icon-size, var(--t-pill-icon-size, var(--const-px-18, 18px)));
+  height: var(--tct-pill-icon-size, var(--t-pill-icon-size, var(--const-px-18, 18px)));
   transition-property: transform;
   transition: var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)));
 }

package/dist/collection/components/q2-pill/q2-pill.js

@@ -273,11 +273,14 @@ export class Q2Pill {
         this.primaryBtn.focus();
     }
     async popoverStateHandler({ detail: { open } }) {
-        if (this.open !== open)
-            this.open = open;
+        var _a;
+        if (this.open === open)
+            return;
+        this.open = open;
         if (open)
             return;
         this.setOptionListActiveElement(null);
+        (_a = this.primaryBtn) === null || _a === void 0 ? void 0 : _a.focus();
     }
     // #endregion
     // #region Public Methods API
@@ -410,7 +413,7 @@ export class Q2Pill {
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: '5bbfce776dcd2ef3ac7097b37fd2df039d47c21f', onChange: this.onClickElsewhere }, h("div", { key: '9d8d7a4b6afb1d931d762a0e656509a2036180ba', class: wrapperClassNames.join(' ') }, h("div", { key: '5bbf245bd78d2ed075b9a16cc46396528f20b823', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '494b1555d332a62c8a2946da260a9bb5f26849d5', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": text, "aria-pressed": !optionCount ? `${!!active}` : undefined, "aria-describedby": (optionCount && 'option-description') || undefined }, h("slot", { key: 'd26426863ec1dadfbf2049ca6b85dcdb28875858', name: "decorator" }), truncatedText)), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '1b06b432ce4ab98a1d1d0b70acb7074849e94999', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: 'ea87e923fe84d94fc1f9a1b72b9fd1deef5cb5ad', class: "popover-content" }, h("div", { key: '53b50f438af20d4474b42511ee334391ff429fa0', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleSlotKeydown }, h("slot", { key: '0996ca12d288c696601919df48ef6c8784bbf8d4', name: "popover-top" })), h("q2-option-list", { key: '9faef4049f040e8c22b46107a7a618224cd0e82c', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), onPopoverState: this.onPopoverState, label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '8f54a5eb6670b9bffb2062eeb9815834b2aa8de7' })), h("div", { key: '1e61e07bb5c6bdcdfd68080cc606bb1a42f48d79', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleSlotKeydown }, h("slot", { key: '48a8d60e3eae7de823d1e55ab9153dedda9a739d', name: "popover-bottom" })))))));
+        return (h("click-elsewhere", { key: '8cba59cde3746d0397305512334eb56357e9e5d4', onChange: this.onClickElsewhere }, h("div", { key: '391da54f9fd870e223765e6266291dff9775abe6', class: wrapperClassNames.join(' ') }, h("div", { key: '06431fd76c0a9d30833756407c89ff59609bc3a3', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '609557b9206c91511e78e26c990230e61f7e5c19', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": text, "aria-pressed": !optionCount ? `${!!active}` : undefined, "aria-describedby": (optionCount && 'option-description') || undefined }, h("slot", { key: 'e1f4c57b7526f714cf0242e101ec0f5c39ebafa5', name: "decorator" }), truncatedText)), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '2777b45efbd94516a633ca4ff1e2d6a452ecbd81', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: '54d2c1c8814be9265b4ed8092bd3360da76cc2b0', class: "popover-content" }, h("div", { key: 'fb95b6f0ab78119f0bf944fa67ec0bcf391088dc', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleSlotKeydown }, h("slot", { key: '8e522c96fa1241e7c05fbc989d59f71ec2bc1d98', name: "popover-top" })), h("q2-option-list", { key: '5e7a827ac08395399e0b04fa9074f5b6a3fa1c48', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), onPopoverState: this.onPopoverState, label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '4197780a058b3937ac748b53aef6afc5eabd8c7a' })), h("div", { key: '78992c83515dcfe6acbf7e09a5efced2d65c1903', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleSlotKeydown }, h("slot", { key: '553f959ec8b866111b2e5c5f9090d8ddee5fd208', name: "popover-bottom" })))))));
     }
     static get is() { return "q2-pill"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-popover/q2-popover.css

@@ -142,6 +142,7 @@ button {
   margin: 0;
   padding: var(--tct-popover-padding, 0);
   overflow: auto;
+  overscroll-behavior: contain;
   background: var(--tct-popover-background, var(--app-white, #ffffff));
   backdrop-filter: var(--tct-popover-backdrop-filter, none);
   color: var(--tct-popover-font-color, inherit);
@@ -199,8 +200,9 @@ button {
 }
 :popover-open.up,
 .show.up {
-  top: unset;
-  bottom: var(--comp-pop-bottom);
+  top: var(--comp-pop-top);
+  bottom: unset;
+  translate: 0 calc(-100% - var(--app-scale-2x, 10px));
 }
 :popover-open.down.left:not(.mobile),
 .show.down.left:not(.mobile) {