q2-tecton-elements 1.47.0 → 1.47.2

package/dist/collection/components/q2-icon/q2-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-icon.js","sourceRoot":"","sources":["../../../../src/components/q2-icon/q2-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport iconMap from './assets/icon-map.json';\n\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true }) inline: boolean;\n\n    /** The text that is presented by screen-readers when they encounter the icon. */\n    @Prop({ reflect: true }) label: string;\n\n    /** The name of the icon to be displayed. */\n    @Prop({ reflect: true }) type: string;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() iconClone: SVGSymbolElement;\n\n    spriteGroup: SVGElement;\n    spriteUse: SVGElement;\n\n    componentWillLoad() {\n        this.handleIcon();\n    }\n\n    componentDidRender(): void {\n        if (!this.iconClone) return;\n        this.spriteGroup?.firstElementChild?.remove();\n        const appendedClone = this.spriteGroup?.appendChild(this.iconClone);\n\n        // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari\n        this.spriteUse?.setAttribute('href', `#${appendedClone.id}`);\n    }\n\n    @Watch('type')\n    handleIcon() {\n        if (this.isCustom) {\n            this.setCustomSVGAttrs();\n        } else if (this.type) {\n            this.fetchSprite();\n        } else {\n            this.iconClone = null;\n            this.spriteGroup?.firstElementChild?.remove();\n        }\n    }\n\n    get isCustom() {\n        return this.type === 'custom';\n    }\n\n    get spriteFileName() {\n        if (this.isCustom) return;\n        return iconMap[this.type];\n    }\n\n    get spriteId() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `tecton-sprite-${spriteFileName}`;\n    }\n\n    get spriteElement() {\n        const { spriteId } = this;\n        if (!spriteId) return;\n        return document.querySelector<HTMLElement>(`#${spriteId}`);\n    }\n\n    get spriteEventName() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `tct-loaded-${spriteFileName}`;\n    }\n\n    get iconCloneViewBox() {\n        return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n    }\n\n    /**\n     * Checks for the sprite container element in the global DOM\n     * If it does not exist, it creates and appends it to the body\n     */\n    getOrCreateSpriteContainer() {\n        const spriteContainerId = 'tecton-sprites';\n        let spriteContainer: HTMLDivElement = document.querySelector(`#${spriteContainerId}`);\n\n        if (spriteContainer) return spriteContainer;\n        spriteContainer = document.createElement('div');\n        spriteContainer.id = spriteContainerId;\n        spriteContainer.style.display = 'none';\n        document.body.appendChild(spriteContainer);\n        return spriteContainer;\n    }\n\n    checkForSprite() {\n        const { spriteId, spriteEventName } = this;\n        const spriteContainer = this.getOrCreateSpriteContainer();\n        let spriteElement: HTMLElement = document.querySelector(`#${spriteId}`);\n\n        // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n        if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n            this.cloneSpriteNode();\n            return true;\n        }\n\n        // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n        // We'll listen for the event that will be dispatched when the sprite is loaded\n        spriteContainer.addEventListener(\n            spriteEventName,\n            () => {\n                this.cloneSpriteNode();\n            },\n            { once: true }\n        );\n\n        // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n        if (spriteElement) return true;\n\n        // If sprite element does not exist, create a placeholder\n        // This will let other icons know the sprite is being loaded\n        spriteElement = document.createElement('div');\n        spriteElement.id = spriteId;\n        spriteContainer.appendChild(spriteElement);\n        return false;\n    }\n\n    async fetchSprite() {\n        const { spriteFileName, spriteId, spriteEventName } = this;\n\n        const spriteExists = this.checkForSprite();\n        if (spriteExists) return;\n\n        if (!spriteFileName) return;\n        const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n        const response = await fetch(spritePath);\n        const data = await response.text();\n        const wrappingDiv = document.createElement('div');\n        wrappingDiv.innerHTML = data;\n        const svg = wrappingDiv.querySelector('svg');\n\n        svg.id = spriteId;\n        svg.setAttribute('data-loaded', '');\n\n        let { spriteElement } = this;\n        if (spriteElement?.tagName === 'SVG') return;\n\n        if (typeof spriteElement.replaceWith === 'function') {\n            spriteElement.replaceWith(svg);\n        } else {\n            spriteElement.parentNode.replaceChild(svg, spriteElement);\n        }\n\n        spriteElement = document.querySelector(`#${spriteId}`);\n        spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n    }\n\n    cloneSpriteNode() {\n        const spriteContainer = this.getOrCreateSpriteContainer();\n        const spriteNode = spriteContainer.querySelector<HTMLElement>(`#tct-${this.type}`);\n        this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n    }\n\n    setCustomSVGAttrs() {\n        const innerSVG = this.hostElement.querySelector('svg');\n\n        if (!innerSVG) return;\n\n        innerSVG.setAttribute('role', 'img');\n        innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n        const { label } = this;\n        if (label) {\n            const title = document.createElement('title');\n            const labelId = `label-${createGuid()}`;\n            title.id = labelId;\n            title.textContent = label;\n            innerSVG.appendChild(title);\n            innerSVG.setAttribute('aria-labelledby', labelId);\n        } else {\n            innerSVG.setAttribute('aria-hidden', 'true');\n        }\n    }\n\n    render() {\n        const { label, type } = this;\n        return this.isCustom ? (\n            <slot />\n        ) : (\n            <svg\n                aria-hidden={!!label ? undefined : 'true'}\n                role={!!label ? 'img' : undefined}\n                aria-labelledby={!!label ? 'label' : undefined}\n                viewBox={this.iconCloneViewBox}\n                xmlns=\"http://www.w3.org/2000/svg\"\n            >\n                {!!label && <title id=\"label\">{label}</title>}\n                {!!type && <use ref={el => (this.spriteUse = el)} />}\n                <g ref={el => (this.spriteGroup = el)}></g>\n            </svg>\n        );\n    }\n}\n"]}
+{"version":3,"file":"q2-icon.js","sourceRoot":"","sources":["../../../../src/components/q2-icon/q2-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State } from '@stencil/core';\nimport { createGuid } from 'src/utils';\nimport iconMap from './assets/icon-map.json';\n\n@Component({ tag: 'q2-icon', shadow: true, styleUrl: 'q2-icon.scss', assetsDirs: ['assets'] })\nexport class Q2Icon implements ComponentInterface {\n    /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n    @Prop({ reflect: true }) inline: boolean;\n\n    /** The text that is presented by screen-readers when they encounter the icon. */\n    @Prop({ reflect: true }) label: string;\n\n    /** The name of the icon to be displayed. */\n    @Prop({ reflect: true }) type: string;\n\n    @Element() hostElement: HTMLElement;\n\n    @State() iconClone: SVGSymbolElement;\n\n    spriteGroup: SVGElement;\n    spriteUse: SVGElement;\n\n    componentWillLoad() {\n        this.handleIcon();\n    }\n\n    componentDidRender(): void {\n        if (!this.iconClone) return;\n        this.spriteGroup?.firstElementChild?.remove();\n        const appendedClone = this.spriteGroup?.appendChild(this.iconClone);\n\n        // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari\n        this.spriteUse?.setAttribute('href', `#${appendedClone.id}`);\n    }\n\n    disconnectedCallback(): void {\n        this.spriteGroup = null;\n        this.spriteUse = null;\n    }\n\n    @Watch('type')\n    handleIcon() {\n        if (this.isCustom) {\n            this.setCustomSVGAttrs();\n        } else if (this.type) {\n            this.fetchSprite();\n        } else {\n            this.iconClone = null;\n            this.spriteGroup?.firstElementChild?.remove();\n        }\n    }\n\n    get isCustom() {\n        return this.type === 'custom';\n    }\n\n    get spriteFileName() {\n        if (this.isCustom) return;\n        return iconMap[this.type];\n    }\n\n    get spriteId() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `tecton-sprite-${spriteFileName}`;\n    }\n\n    get spriteElement() {\n        const { spriteId } = this;\n        if (!spriteId) return;\n        return document.querySelector<HTMLElement>(`#${spriteId}`);\n    }\n\n    get spriteEventName() {\n        const { spriteFileName } = this;\n        if (!spriteFileName) return;\n        return `tct-loaded-${spriteFileName}`;\n    }\n\n    get iconCloneViewBox() {\n        return this.iconClone?.getAttribute('viewBox') ?? '0 0 24 24';\n    }\n\n    /**\n     * Checks for the sprite container element in the global DOM\n     * If it does not exist, it creates and appends it to the body\n     */\n    getOrCreateSpriteContainer() {\n        const spriteContainerId = 'tecton-sprites';\n        let spriteContainer: HTMLDivElement = document.querySelector(`#${spriteContainerId}`);\n\n        if (spriteContainer) return spriteContainer;\n        spriteContainer = document.createElement('div');\n        spriteContainer.id = spriteContainerId;\n        spriteContainer.style.display = 'none';\n        document.body.appendChild(spriteContainer);\n        return spriteContainer;\n    }\n\n    checkForSprite() {\n        const { spriteId, spriteEventName } = this;\n        const spriteContainer = this.getOrCreateSpriteContainer();\n        let spriteElement: HTMLElement = document.querySelector(`#${spriteId}`);\n\n        // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need\n        if (spriteElement?.hasAttribute('data-loaded') ?? false) {\n            this.cloneSpriteNode();\n            return true;\n        }\n\n        // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded\n        // We'll listen for the event that will be dispatched when the sprite is loaded\n        spriteContainer.addEventListener(\n            spriteEventName,\n            () => {\n                this.cloneSpriteNode();\n            },\n            { once: true }\n        );\n\n        // If the sprite element exists, we know it's being loaded and will be handled by the event listener\n        if (spriteElement) return true;\n\n        // If sprite element does not exist, create a placeholder\n        // This will let other icons know the sprite is being loaded\n        spriteElement = document.createElement('div');\n        spriteElement.id = spriteId;\n        spriteContainer.appendChild(spriteElement);\n        return false;\n    }\n\n    async fetchSprite() {\n        const { spriteFileName, spriteId, spriteEventName } = this;\n\n        const spriteExists = this.checkForSprite();\n        if (spriteExists) return;\n\n        if (!spriteFileName) return;\n        const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);\n        const response = await fetch(spritePath);\n        const data = await response.text();\n        const wrappingDiv = document.createElement('div');\n        wrappingDiv.innerHTML = data;\n        const svg = wrappingDiv.querySelector('svg');\n\n        svg.id = spriteId;\n        svg.setAttribute('data-loaded', '');\n\n        let { spriteElement } = this;\n        if (spriteElement?.tagName === 'SVG') return;\n\n        if (typeof spriteElement.replaceWith === 'function') {\n            spriteElement.replaceWith(svg);\n        } else {\n            spriteElement.parentNode.replaceChild(svg, spriteElement);\n        }\n\n        spriteElement = document.querySelector(`#${spriteId}`);\n        spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));\n    }\n\n    cloneSpriteNode() {\n        const spriteContainer = this.getOrCreateSpriteContainer();\n        const spriteNode = spriteContainer.querySelector<HTMLElement>(`#tct-${this.type}`);\n        this.iconClone = spriteNode ? (spriteNode.cloneNode(true) as SVGSymbolElement) : undefined;\n    }\n\n    setCustomSVGAttrs() {\n        const innerSVG = this.hostElement.querySelector('svg');\n\n        if (!innerSVG) return;\n\n        innerSVG.setAttribute('role', 'img');\n        innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n        const { label } = this;\n        if (label) {\n            const title = document.createElement('title');\n            const labelId = `label-${createGuid()}`;\n            title.id = labelId;\n            title.textContent = label;\n            innerSVG.appendChild(title);\n            innerSVG.setAttribute('aria-labelledby', labelId);\n        } else {\n            innerSVG.setAttribute('aria-hidden', 'true');\n        }\n    }\n\n    render() {\n        const { label, type } = this;\n        return this.isCustom ? (\n            <slot />\n        ) : (\n            <svg\n                aria-hidden={!!label ? undefined : 'true'}\n                role={!!label ? 'img' : undefined}\n                aria-labelledby={!!label ? 'label' : undefined}\n                viewBox={this.iconCloneViewBox}\n                xmlns=\"http://www.w3.org/2000/svg\"\n            >\n                {!!label && <title id=\"label\">{label}</title>}\n                {!!type && <use ref={el => (this.spriteUse = el)} />}\n                <g ref={el => (this.spriteGroup = el)}></g>\n            </svg>\n        );\n    }\n}\n"]}

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

@@ -576,7 +576,7 @@ export class Q2Input {
     }
     /////// VIEW METHODS ///////
     render() {
-        return (h("div", { key: '5fd68b623a5ed490072bba8fe2873b2add47d3ee', class: this.wrapperClasses }, h("div", { key: '626973073f632ef43c2f8b6b1a6c5a1689234bd0', class: "label-wrapper" }, labelDOM(this), this.countDOM()), this.inputContainerDOM(), messagesDOM(this)));
+        return (h("div", { key: '5f5467f17d954283e82648a3b54af28e3663f62f', class: this.wrapperClasses }, h("div", { key: '24bf64e2b7ff80ea1960e3859731403680e3bbb4', class: "label-wrapper" }, labelDOM(this), this.countDOM()), this.inputContainerDOM(), messagesDOM(this)));
     }
     countDOM() {
         if (!this.showCount)
@@ -1228,7 +1228,7 @@ export class Q2Input {
                     "references": {
                         "InputType": {
                             "location": "local",
-                            "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-input/q2-input.tsx",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-input/q2-input.tsx",
                             "id": "src/components/q2-input/q2-input.tsx::InputType"
                         }
                     }

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

@@ -98,7 +98,7 @@ export class Q2Item {
     // #region Render methods
     render() {
         const { clickable } = this;
-        return (h("div", { key: 'ce737f24d1ef503c916c69cc05289e7a4515e2f5', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (h("div", { key: 'a881a9cf8ba8f6476cb6d059feefc8372fdd3812', class: this.bulletClasses }, h("slot", { key: '65e691900697671c596f5dc7d6153fb61de2cf76', name: "bullet" }))), h("div", { key: 'fa160b4955d806674069e0be8bc58b873720d43e', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: 'abf0b9a23d1c8f0ed60d79979821feb7d8549970', class: "header" }, h("slot", { key: '02c2fff60bcd138da194417725f91c4a60f6536d', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '0152eb33c1e50b4d21f2f2d17e1a54f87a95cd9a', class: "body" }, h("slot", { key: '6f902b7116b90e67cd1c320a83dc0ced5d4d5307', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '82a7da347afd34c7a8d8cc2d806700d7fa911e88', class: this.actionClasses }, h("slot", { key: 'a863cbc215f1e3d67bc40b58e348281d0ab336e9', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '3258a9d72fa42ef630ab1dbad84d7248ba9a907c', class: this.footerClasses }, h("slot", { key: '6ddf529a02ed675990446ed5aff94212417eb21f', name: "footer" })))));
+        return (h("div", { key: 'f69b991449d96d104dc6c43b11e10df54a1527e7', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasBulletSlotContent && (h("div", { key: 'baddf236e22f36ce876f58e782f22e01e60c13db', class: this.bulletClasses }, h("slot", { key: '279c943ce1fd95f7257680e79ea6d043540fba1a', name: "bullet" }))), h("div", { key: '8d6e754680517434dda6b268865a0c8c5f3294ec', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '6e3cfb19fb9fecae91525e065e3b99cfcd90b969', class: "header" }, h("slot", { key: '367c35a42e95350f5c606f3dab3738dbc7aa2287', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '6f155f0d3e4b06748dd4e130999be571df96d8f9', class: "body" }, h("slot", { key: 'c8158b2d6b8c5877756404dafe8421b3754f992a', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '3d9f72340d671442e25f2cd9c7cbe8ad9695b386', class: this.actionClasses }, h("slot", { key: 'c0e49f50574786b679531f7228a8126289da0cc5', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: 'c2bae2908f4c70d9fc11805176a27c23e2c3f3b9', class: this.footerClasses }, h("slot", { key: '3fdcf609c8729acc45549fca09ad090ad4f009a7', name: "footer" })))));
     }
     static get is() { return "q2-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -92,7 +92,7 @@ export class Q2Legend {
     // #endregion
     // #region Render methods
     render() {
-        return (h("click-elsewhere", { key: '8ee6971693e03e0823d3db40447389010de04fcf', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '3e61a3ce65430feeb44596680f8f042d83ac934e' }, 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: 'd55155e36588eddb86941a8a85c68fd04c880ac1', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '25c948213b4d6645741ef22e013149ee63a19e21' }, 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 is() { return "q2-legend"; }
     static get encapsulation() { return "shadow"; }

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

@@ -64,7 +64,7 @@ export class Q2List {
     // #endregion
     // #region Render methods
     render() {
-        return (h("div", { key: '5cf0fbf1cf90821aad8380a082925050834930c5', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: 'e34cb030fc9a5ddd52f3b9668f5e4e6606a90ab3', class: this.headerClasses }, h("div", { key: '2c698cdc7359ba6404423c7f508b1f3583385de5', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '19e450240e0788440e61ea85bf729533c3dfef5f', name: "filter" }))), h("div", { key: '44c1a6503f9c80c01b3d58b48641272b580b0add', role: "list" }, h("slot", { key: '941440f0f21772302f0ac5ef70a42d4820cca063' }))));
+        return (h("div", { key: '4c5bdc8bf48c1f1dcbdada246bd021cfb4d52696', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '691bf182d8abf74b9469d96969ae4a975df68f87', class: this.headerClasses }, h("div", { key: '1a3a06cdfe9445b4bf7b4f77c41b47ccc61b64a4', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '9b7c05d747434e4cf24d123158edcb54517a2040', name: "filter" }))), h("div", { key: 'c7ba0cc52b865093eca667ed9003d52ebfa12f64', role: "list" }, h("slot", { key: '1b64bc65aca20e41fd50543df9b1217716a3becd' }))));
     }
     static get is() { return "q2-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ export class Q2Loc {
         this.value = undefined;
     }
     render() {
-        return h("span", { key: '207c331410df3dfa7963912368b2fab219a84a97' }, loc(this.value, this.substitutions));
+        return h("span", { key: 'a983e0108524632f36c67d59ca55046889e959a1' }, loc(this.value, this.substitutions));
     }
     static get is() { return "q2-loc"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,7 +36,7 @@ export class Q2Message {
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: '48c08c15096e1787af65a9d847a191f5b7ee7100', 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: '4d673d2bdf92f56606ab1075d8af807992982a57', class: "sr" }), h("div", { key: 'c31396c4d2aaed7b2d6ee96e33697e7c14c814af', class: "sr message-label" }, messageLabel), h("div", { key: '9bedced6017fa3da2024ce713688e4b5b006f563', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: 'b3d452032ef55d3aca7ea63768f820a522241ba6' }))));
+        return (h("div", { key: '7803d7b21356ca0c70883387b8add4a6babd192c', 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: '18bc8892294dc16d5668a2c10b80e2b3c21bf94c', class: "sr" }), h("div", { key: '00c9adcd0ce6a0021baf03041443a12d3673908a', class: "sr message-label" }, messageLabel), h("div", { key: '6d697ed20f5ceef552d819f2b22212ee750f06a6', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '789fd82fdd39c79b1ca48f3e353c7ebd3abe82b7' }))));
     }
     messageIcon(type) {
         const iconMap = {

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

@@ -36,7 +36,7 @@ export class Q2Optgroup {
         });
     }
     render() {
-        return (h("div", { key: '22334d6ad4d588af06d33c426442c17e517bfdff', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '82470c713ed744c41ca8a1682d78e4795e83e125', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'd246db5839936be3b0ee56eec47e7a11aa0269ee', class: "q2-optgroup-options" }, h("slot", { key: '12442af1a98a84db8023dd7572ffa3d6fba34fdc' }))));
+        return (h("div", { key: '7296e98c4ba1bf5b7d43a7a41bd71674b6a29786', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '9f6acc6efc59b09550b809b2a47b2e8680ba8857', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'b2b13e828cf5974f021047dc08006d389518c7bc', class: "q2-optgroup-options" }, h("slot", { key: 'e0eb0eb5889abb67a65c514a4fd8054625fa3901' }))));
     }
     static get is() { return "q2-optgroup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,7 +50,7 @@ export class Q2Option {
     render() {
         const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
         const isDisabled = disabled || disabledGroup;
-        return (h(Host, { key: '4b5001e4870ee08cbd313e029bc2fa6b15503ced', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: '652c794d376c56a8cdb116e8c9d37596dad6a4dd', type: "checkmark" }), h("div", { key: 'f39323dc5d9959daf61833a4cd8066bea83ea0c6', class: "content" }, h("slot", { key: '2107c286ec7b9ce7f94e4e3de3a0789217a56e45' }))));
+        return (h(Host, { key: 'f151dcc4f6c384ed57f161201e4f47130c9352bf', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: '999146b64cc2827794339665aa3d4a91468bb07f', type: "checkmark" }), h("div", { key: '8fe4f1e3d064ce8b2b0c834ba3b2a5896a8f3d66', class: "content" }, h("slot", { key: '4c95a66a6b32b5b388a69fd235febcefda232772' }))));
     }
     static get is() { return "q2-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -528,7 +528,7 @@ export class Q2OptionList {
     }
     /// DOM ///
     render() {
-        return (h(Host, { key: 'c3c1aa149c1696c2025e7be8d0185a500cdc40e1' }, h("div", { key: '0788af1766ce408de56b8d56f87898c048dfd618', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '04341860dc01b4c64905bdead1125adc03c3d036', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: 'e1fa1fc07a9dd268a84491177a6c8e15632f3afa' })))));
+        return (h(Host, { key: 'd506ec65b607d11ce3131fb4084c2a9a1ae93aab' }, h("div", { key: 'a2fa4b5d44ce4c2682831a9f08ff5e2bca0bde9d', class: "content", ref: el => (this.contentElement = el), onFocusout: this.focusoutHandler }, h("div", { key: '75f5729faf1ad67eb678903e7f77d6b26523292a', class: "options", "aria-label": loc('tecton.element.optionList.label', [this.label]), "aria-multiselectable": `${!!this.multiple}`, role: this.type || 'listbox', onKeyDown: this.internalKeydownHandler, onClick: this.clickHandler }, h("slot", { key: '64fb06204cfc686108fdcbc1d395fe9d89dafd1a' })))));
     }
     static get is() { return "q2-option-list"; }
     static get encapsulation() { return "shadow"; }
@@ -659,7 +659,7 @@ export class Q2OptionList {
                     "references": {
                         "IOptionValue": {
                             "location": "local",
-                            "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
                             "id": "src/components/q2-option-list/q2-option-list.tsx::IOptionValue"
                         }
                     }
@@ -731,7 +731,7 @@ export class Q2OptionList {
                     "references": {
                         "IOptionValue": {
                             "location": "local",
-                            "path": "/workspace/workspace/_Gitlab_tecton-production_master/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
+                            "path": "/builds/q2e/development/tecton/tecton/packages/q2-tecton-elements/src/components/q2-option-list/q2-option-list.tsx",
                             "id": "src/components/q2-option-list/q2-option-list.tsx::IOptionValue"
                         }
                     }
@@ -857,7 +857,7 @@ export class Q2OptionList {
                             "id": "global::HTMLQ2OptionElement"
                         }
                     },
-                    "return": "Promise<any[]>"
+                    "return": "Promise<(HTMLQ2OptgroupElement | HTMLQ2OptionElement)[]>"
                 },
                 "docs": {
                     "text": "",

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

@@ -169,7 +169,7 @@ export class Q2Pagination {
                 total,
             });
         }
-        return (h("nav", { key: '50343b3b19ac4d64966783eab66f5ce61dc1b94f', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '7ab3dafbf56de8ec12ac49b470fdb5a8d4df2f74', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: '492ad7b6180eec733d0a21266b4f21b5f032e1a7', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '30c1287dccf3a2da6a32f17529075e4ce07ec3ed', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -178,7 +178,7 @@ export class Q2Pagination {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: 'ccac7c6ba741c00ee29a273ff95d6f1376c82114', class: "btn-group" }, h("q2-btn", { key: '995f73fe6f8b7caba3f33b26d2951d6dfdb9c8ad', label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '511c412f9b64ef9c255d3bb0c3036c508041ba1e', type: "chevron-double-left" })), h("q2-btn", { key: 'b31a58e9895d6bd0a290bc878bcc90e5d05573c4', label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '237e92a052c98544f5e5d3655b76a87fcbae1ffc', type: "chevron-left" }))), h("div", { key: 'c5f5dbcf26d85bf38329ca342462c097a6fdfbf2', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '744fc7c5fd66aa050e336173677c0560597773a2', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '6a51a7881d8dc25f33e882cb801dfa49e66f5624', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '9fcd3d30b4c641e428f9088c5da31fe9236af065', 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 => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })), h("span", { key: '74fb4e9dc5fb522a2a8e4d6bb079de21a75e7b8e', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'af17aff0c838a045e151651ff58c3aeae37310a4', class: "btn-group" }, h("q2-btn", { key: '6241c7d80e88ebf31dba7ac2c013174415e78860', label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'c101b0a222e94f3bef8a6e878c5d507bf15bf9a7', type: "chevron-right" })), h("q2-btn", { key: '91b74767914718048301eb21ac5ddf93ce7dca5e', label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: 'b8ce5dfd5622c941602e6439fff5e0e75b639855', type: "chevron-double-right" }))), h("div", { key: '5897095710edb3fa0fc00eaf072de8d6e1cee844', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, this.renderPerPage())));
+            })), h("div", { key: '1e255884140a5fbb7ba51cb8046727ab8cb602a5', class: "btn-group" }, h("q2-btn", { key: '48fc8c61b04e0005b98cbffbc3320e4dd4f0855e', label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '9c454decc6feadc6bbd3f21044c7bebd46d5a55a', type: "chevron-double-left" })), h("q2-btn", { key: '9214aee00653c2417a284292c5df431bcf9cdceb', label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '9761ca7c383a5ece9582fb07b30f0fb70eceba17', type: "chevron-left" }))), h("div", { key: 'd0749351d1ac3d1193a05a0f4b6f55860f98a220', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '2a160fdc5453904fcfb330b95ae548ab2df2a06a', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '250476d5c0e4e4bb90065764c4e27bb49bf79076', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '079e89b7938ae91ebf690d42a9ea0a6191decadc', 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 => this.handlePageChange(event.detail.value), "test-id": "pageInput", current: "page", ref: el => (this.inputField = el) })), h("span", { key: 'f943840d83883da0908eed6cad0b0bbeeccee0a2', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '8aa10edcf80ce32fb0252c133f28304cfbb0ccc9', class: "btn-group" }, h("q2-btn", { key: '2b97474ae891322efd074dae86881b09dac6eb62', label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '47b3882a0c232fbe6737e8633adf8f4a0ad27b8d', type: "chevron-right" })), h("q2-btn", { key: '40604303f9479091821ee3390681d22c3d4507d0', label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: 'ecf929fe7b18bcd19c7e9045c82245d8c4764251', type: "chevron-double-right" }))), h("div", { key: '30c078a5b0224753dd5daaf0f83ca7efbe5fbaec', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, this.renderPerPage())));
     }
     static get is() { return "q2-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -254,7 +254,7 @@ export class Q2Pill {
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: 'dcb3816548945254bc0f94439f91de299fcbffac', onChange: this.onClickElsewhere }, h("div", { key: '794452f573f49b54160b50f4423802b712e54655', class: wrapperClassNames.join(' ') }, h("div", { key: '00f931b80cfd9d2003a2e094e2963cc7d006f767', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '2c4bf905fd879d7178e084e0dcce1c47d5949fd6', 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.handleButtonFocusout, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '4df639376c78dbec98e5ddf38a8dd440bd2403ac', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon(), this.generateHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: 'f1feccaa07ab59adb5dda52dadc04300da3ebc12', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '637e3da2b231bc759d416bcf26ecd43b5ca17be3', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '6d5388276f4c328299f7990a1235ad26279852e3' }))))));
+        return (h("click-elsewhere", { key: 'ca6bd41d2351dc05ba4e0ed87b69e335a11a4fe3', onChange: this.onClickElsewhere }, h("div", { key: 'cd9186c0d5f5b32f19f9221a7ba7f495c4a5a3fd', class: wrapperClassNames.join(' ') }, h("div", { key: '14d3658c8abe24567f42ffb82082ef1073326aa2', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '2e64deb6bc1caaa4f3b831060103532886f2d8a6', 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.handleButtonFocusout, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '42b583abcc318ab1027f7fb5a5cbd437291f8cb4', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon(), this.generateHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '0c197bbe3f080cc5c8ef78df88d635848e7910e0', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: 'd1d84d56b201242986c8de169fce79e64dd978ab', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '4ed0fe54a2b3b2bc969bf2f2466633148ad20ad0' }))))));
     }
     static get is() { return "q2-pill"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,14 +65,17 @@ button {
   visibility: hidden;
 }
 
-.container {
+.legacy.container {
   display: none;
 }
-
-.show {
+.legacy.show {
   display: block;
-  position: fixed;
   z-index: var(--tct-popover-z-index, 50);
+}
+
+:popover-open,
+.show {
+  position: absolute;
   margin: 0;
   padding: 0;
   overflow: auto;
@@ -80,7 +83,7 @@ button {
   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, 0 2px 4px rgba(0, 0, 0, 0.3)));
+  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);
@@ -94,39 +97,44 @@ button {
   scrollbar-width: thin;
   scrollbar-color: var(--comp-scrollbar-color) transparent;
 }
-:host([block]) .show {
+:popover-open.block,
+.show.block {
   right: unset;
   width: var(--comp-pop-width);
   min-width: var(--tct-popover-min-width, unset);
 }
-:host([align=left]) .show {
+:popover-open.left,
+.show.left {
   left: var(--comp-pop-left);
   right: unset;
 }
-:host([align=right]) .show {
+: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);
 }
-.show.legacy {
-  position: absolute;
-}
+: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);

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

@@ -6,7 +6,6 @@ export class Q2Popover {
          * 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;
         /// Helpers ///
         this.handleMinHeight = () => {
@@ -14,6 +13,9 @@ export class Q2Popover {
                 handleDeprecationWarning(this, 'minHeight', 'prop');
             }
         };
+        this.handlePopoverToggleEvent = (event) => {
+            this.popoverStateChanged.emit({ open: event.newState === 'open' });
+        };
         this.viewPortChanged = () => {
             if (!this.open)
                 return;
@@ -23,9 +25,9 @@ export class Q2Popover {
             this.orientationChanged = true;
             this.viewPortChanged();
         };
-        this.setFixedCSSProperties = async () => {
-            var _a, _b;
-            const { controlElement, containerElement, currentDirection } = this;
+        this.setPopoverAPICSSProperties = async () => {
+            var _a, _b, _c, _d, _e, _f;
+            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,
@@ -33,16 +35,32 @@ export class Q2Popover {
                 right: 0,
             };
             const popoverLeft = controlLeft;
-            const popoverRight = window.visualViewport.width - controlRight;
+            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.offsetWidth || 0}px`);
-            containerElement.style.setProperty('--comp-pop-left', `${popoverLeft}px`);
-            containerElement.style.setProperty('--comp-pop-right', `${popoverRight}px`);
+                containerElement.style.setProperty('--comp-pop-width', `${(controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth) || 0}px`);
             if (currentDirection === 'up') {
-                containerElement.style.setProperty('--comp-pop-bottom', `${window.visualViewport.height - controlTop}px`);
+                if (isModule) {
+                    containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop}px`);
+                }
+                else {
+                    containerElement.style.setProperty('--comp-pop-bottom', `${window.innerHeight - controlTop - ((_d = window === null || window === void 0 ? void 0 : window.visualViewport) === null || _d === void 0 ? void 0 : _d.offsetTop) - window.scrollY}px`);
+                }
             }
             if (currentDirection === 'down') {
-                containerElement.style.setProperty('--comp-pop-top', `${controlBottom}px`);
+                if (isModule) {
+                    containerElement.style.setProperty('--comp-pop-top', `${controlBottom}px`);
+                }
+                else {
+                    containerElement.style.setProperty('--comp-pop-top', `${controlBottom + ((_f = (_e = window === null || window === void 0 ? void 0 : window.visualViewport) === null || _e === void 0 ? void 0 : _e.offsetTop) !== null && _f !== void 0 ? _f : 0) + window.scrollY}px`);
+                }
             }
             // Wait for one paint to prevent layout thrashing
             await waitForNextPaint();
@@ -73,7 +91,7 @@ export class Q2Popover {
             containerElement.style.setProperty('--comp-pop-opacity', '1');
         };
         this.direction = undefined;
-        this.align = undefined;
+        this.align = 'left';
         this.open = undefined;
         this.block = undefined;
         this.controlElement = undefined;
@@ -83,13 +101,25 @@ export class Q2Popover {
         this.show = false;
     }
     /// Lifecycle hooks ///
+    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();
     }
     disconnectedCallback() {
         this.removeViewportListeners();
+        this.containerElement.removeEventListener('toggle', this.handlePopoverToggleEvent);
+        this.containerElement = null;
+        this.contentElement = null;
+        this.controlElement = null;
     }
     /// Methods ///
     async toggle() {
@@ -108,7 +138,12 @@ export class Q2Popover {
         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();
         }
@@ -125,7 +160,7 @@ export class Q2Popover {
         event.stopPropagation();
     }
     /// Getters ///
-    get actualDirection() {
+    get providedDirection() {
         const { direction } = this;
         switch (direction) {
             case 'up':
@@ -141,23 +176,24 @@ export class Q2Popover {
         const hasPlatformDimensions = Object.keys((_b = (_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.platformDimensions) !== null && _b !== void 0 ? _b : {}).length > 0;
         return isIframe && hasPlatformDimensions;
     }
+    get supportsPopoverAPI() {
+        return Object.hasOwn(HTMLElement.prototype, 'popover');
+    }
     addViewportListeners() {
         var _a;
         window.addEventListener('resize', this.viewPortOrientationChanged);
-        // #region remove when Popover API is supported in iOS
+        visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener('resize', this.viewPortChanged);
         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('change', this.viewPortOrientationChanged);
+        (_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
     }
     removeViewportListeners() {
         var _a;
         window.removeEventListener('resize', this.viewPortOrientationChanged);
-        // #region remove when Popover API is supported in iOS
-        window.removeEventListener('scroll', this.viewPortChanged);
+        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
     }
     clearCSSProperties() {
         this.containerElement.style.removeProperty('--comp-pop-max-height');
@@ -175,17 +211,18 @@ export class Q2Popover {
         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();
+            this.setPopoverAPICSSProperties();
+            this.containerElement.showPopover();
         }
     }
     async determinePopDirection() {
         var _a, _b, _c;
-        const { containerElement, controlElement, actualDirection, displayBuffer } = this;
+        const { containerElement, controlElement, providedDirection, displayBuffer } = this;
         if (containerElement)
             containerElement.style.maxHeight = null;
         await waitForNextPaint();
@@ -220,7 +257,7 @@ export class Q2Popover {
         const shouldUpdateMaxHeight = !containerElement.style.getPropertyValue('--comp-pop-max-height') || this.orientationChanged;
         // we do not want to constantly update the max-height after an orientation change, so we switch this back to false
         this.orientationChanged = false;
-        const currentOrDetermineDirection = this.currentDirection || actualDirection || directionWithMostSpace;
+        const currentOrDetermineDirection = this.currentDirection || providedDirection || directionWithMostSpace;
         switch (currentOrDetermineDirection) {
             case 'up':
                 if (shouldUpdateMaxHeight) {
@@ -240,12 +277,14 @@ export class Q2Popover {
     }
     /// DOM ///
     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: '7d15b8b85048ea39fb00f350a4a66de5ac110793', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer" }, h("div", { key: 'f37b60229cf15c849a673f69a61dbc98b974670d', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '79860592d387238074f19b6d48e5f1fabe65a73d' }))));
+        return (h("div", { key: '0263b5ca206dd3bfd037de9db3c2ec4b4e38fca5', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "auto" }, h("div", { key: '993240fb13583b9ee143a4cbbac22034dced6019', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '4c7864fdb9795291c1adf918da1870a80a667bae' }))));
     }
     static get is() { return "q2-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -293,7 +332,8 @@ export class Q2Popover {
                     "text": "Aligns the popover to the left or right side of the control element."
                 },
                 "attribute": "align",
-                "reflect": true
+                "reflect": true,
+                "defaultValue": "'left'"
             },
             "open": {
                 "type": "boolean",