q2-tecton-elements 1.45.3 → 1.45.4

package/dist/components/q2-icon2.js.map

@@ -1 +1 @@
-{"file":"q2-icon2.js","mappings":"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","names":[],"sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    height: var(--tct-icon-size, 24px);\n    width: var(--tct-icon-size, 24px);\n    position: relative;\n    fill: none;\n}\n\n:host([inline]) {\n    height: 1em;\n    width: 1em;\n}\n\nsvg {\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, 1.5);\n    stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n    stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n    transition: var(--tct-icon-transition, none);\n}\n\n.stroke-primary {\n    stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n    stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n    fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n    fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n    transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","import { Component, ComponentInterface, Prop, h, Element, Watch, getAssetPath, State, Fragment } 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=\"img\"\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-icon2.js","mappings":"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","names":[],"sources":["src/components/q2-icon/q2-icon.scss?tag=q2-icon&encapsulation=shadow","src/components/q2-icon/q2-icon.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    height: var(--tct-icon-size, 24px);\n    width: var(--tct-icon-size, 24px);\n    position: relative;\n    fill: none;\n}\n\n:host([inline]) {\n    height: 1em;\n    width: 1em;\n}\n\nsvg {\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    stroke-width: var-list(--tct-icon-stroke-width, --t-icon-stroke-width, 1.5);\n    stroke-linecap: var-list(--tct-icon-cap, --t-icon-cap, round);\n    stroke-linejoin: var-list(--tct-icon-cap, --t-icon-cap, round);\n    transition: var(--tct-icon-transition, none);\n}\n\n.stroke-primary {\n    stroke: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.stroke-secondary {\n    stroke: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.fill-primary {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n.fill-secondary {\n    fill: var-list(--tct-icon-stroke-secondary, --t-icon-stroke-secondary, --t-text, currentcolor);\n    transition: var(--tct-icon-stroke-secondary-transition, none);\n}\n\n.filled {\n    fill: var-list(--tct-icon-fill, --comp-icon-fill, --t-icon-fill, none);\n    transition: var(--tct-icon-fill-transition, none);\n}\n\n.uniform {\n    fill: var-list(--tct-icon-stroke-primary, --t-icon-stroke-primary, currentcolor);\n    transition: var(--tct-icon-stroke-primary-transition, none);\n}\n\n:host([type='info']),\n:host([type='info-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n}\n\n:host([type='success']),\n:host([type='success-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n}\n\n:host([type='warning']),\n:host([type='warning-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n}\n\n:host([type='error']),\n:host([type='error-filled']) {\n    --tct-icon-stroke-primary: transparent;\n    --comp-status-color: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n}\n","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=\"img\"\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}

package/dist/components/q2-input2.js

@@ -3424,7 +3424,7 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
     }
     /////// VIEW METHODS ///////
     render() {
-        return (h("div", { key: '165e2173dc173450c6c08b4a9527d54d4d2e5cc2', class: this.wrapperClasses }, h("div", { key: '51d61f7ef98d0ffa36502469b7a341222a8d3865', class: "label-wrapper" }, labelDOM(this), this.countDOM()), this.inputContainerDOM(), messagesDOM(this)));
+        return (h("div", { key: 'c9df59c45fbcc09f728eb6e3d8641e054c894f09', class: this.wrapperClasses }, h("div", { key: '44012c671d9d2d80ad0c8f748767c65d5dfac2bb', class: "label-wrapper" }, labelDOM(this), this.countDOM()), this.inputContainerDOM(), messagesDOM(this)));
     }
     countDOM() {
         if (!this.showCount)

package/dist/components/q2-item.js

@@ -107,7 +107,7 @@ const Q2Item$1 = /*@__PURE__*/ proxyCustomElement(class Q2Item extends HTMLEleme
     // #region Render methods
     render() {
         this.setClickable();
-        return (h(Fragment, { key: 'd5ba951c9454ce295806c0c12381c97d766010c6' }, h("div", { key: 'ce49d5fbe107d66f77a0eae1e6719c2567fd52c8', class: this.itemClasses, ref: el => (this.itemElement = el) }, this.hasBulletSlotContent && (h("div", { key: '4fb7c74d6e4da51c9c40e4eac1b86557d8498f0f', class: this.bulletClasses }, h("slot", { key: 'f9029c81cc4b955c04fcd7e2445cd8b4a9dc1807', name: "bullet" }))), h("div", { key: 'eeef4eb04e2f636b8fbc10c7629a1d1e90ce9867', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: 'eedc08d67609dba329306406b19323989496fa30', class: "header" }, h("slot", { key: '7ca6467804317ef7b54ca4b7893def703aa0a07a', name: "header" }))), this.hasBodySlotContent && (h("div", { key: 'cb7e3fb9eae10c3d3481975563edb7b1a9615fbf', class: "body" }, h("slot", { key: '9fd0a9a4b82671a47ec02ca87ae3512f54f0aeb4', name: "body" })))), this.hasActionSlotContent && (h("div", { key: 'e20c1a4c400f607dfe5299a9e564b1937870e5a8', class: this.actionClasses }, h("slot", { key: '9fe4231d6af81ba6e69de4c00da41d8d4ca7ae89', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '08afea866e6750c4c3ea06a004e2e4fef50e2a7f', class: this.footerClasses }, h("slot", { key: 'a0502cd05cc9af67a3c1496e11fa23235e887be3', name: "footer" }))))));
+        return (h(Fragment, { key: 'f28dc0f9497401dcb4ce1555bdab9223ff8ff3c7' }, h("div", { key: 'e498f45dca4844c91513997588a622bdb42a7fdf', class: this.itemClasses, ref: el => (this.itemElement = el) }, this.hasBulletSlotContent && (h("div", { key: '8ef1521965ac07d9e177d53e07ede1203c806ffd', class: this.bulletClasses }, h("slot", { key: 'caaccc58516682cda4f9bb26ea48678064b06c65', name: "bullet" }))), h("div", { key: '498610fb3d75898770db8bb3b791f459f7a40a69', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: 'f30bf8cdc5730ec4ba0c2d7cea8e8207738011a6', class: "header" }, h("slot", { key: '440d538606c5ff5140b3b561d63a2fd673d47138', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '4cd651689d95d10ddc56eb3e92dddc678ffefdb5', class: "body" }, h("slot", { key: 'f84f0ba303f82f44a1c57250ee31e07a62dd8e93', name: "body" })))), this.hasActionSlotContent && (h("div", { key: 'c7fbf9263d98030d8a6f9df86e930084e1b7e2e0', class: this.actionClasses }, h("slot", { key: '276fcb727912add5340348acf041a8e44fd7a922', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '36183283d76c09c6568451ce899698ffdb2f7821', class: this.footerClasses }, h("slot", { key: 'b3033c9de3a3aa4f7d92f287668ae45ce2d5cab3', name: "footer" }))))));
     }
     get hostElement() { return this; }
     static get style() { return Q2ItemStyle0; }

package/dist/components/q2-list.js

@@ -71,7 +71,7 @@ const Q2List$1 = /*@__PURE__*/ proxyCustomElement(class Q2List extends HTMLEleme
     // #endregion
     // #region Render methods
     render() {
-        return (h("div", { key: '37b0671ca94200f7e753f2b5e02a3dfd00efc6a3', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: 'a00b89d9153d707f5b7a3c0aaea857e5d489caff', class: this.headerClasses }, h("div", { key: '6ab05c1b898d8340526e9c45b457eb1920d37431', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: 'cb491e1700fc4312aa65016f897c35501ada01ff', name: "filter" }))), h("div", { key: 'b5af288fd5a3b233f981f67156bf1fbb59e1326d', role: "list" }, h("slot", { key: '3c48768066b42cecfc998506537a9447b5b61ff5' }))));
+        return (h("div", { key: 'ef12e85cdf00655dd1e4de9842cfe1119e1b2f07', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: 'e59c5a8f2b902da65aeb04068729272ea7ea5dfa', class: this.headerClasses }, h("div", { key: '0b47ebe4bda1c7659860391999040fb03c347bec', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '5425288c72956ce7f6aef8dfaaed6e6082438b37', name: "filter" }))), h("div", { key: '5c9127ab0857bf561221e7e9c93122f02c6225ff', role: "list" }, h("slot", { key: '1fbbf5b970907686f0c6098d48aa0d5802ecdb06' }))));
     }
     get hostElement() { return this; }
     static get style() { return Q2ListStyle0; }

package/dist/components/q2-loc.js

@@ -13,7 +13,7 @@ const Q2Loc$1 = /*@__PURE__*/ proxyCustomElement(class Q2Loc extends HTMLElement
         this.value = undefined;
     }
     render() {
-        return h("span", { key: '3b8059b85a21870fc1b8e9ff9d89cad6afe2df36' }, loc(this.value, this.substitutions));
+        return h("span", { key: '9329056c18d32c584e00169de61e49e63b6c1c64' }, loc(this.value, this.substitutions));
     }
     static get style() { return Q2LocStyle0; }
 }, [1, "q2-loc", {

package/dist/components/q2-message2.js

@@ -44,7 +44,7 @@ const Q2Message = /*@__PURE__*/ proxyCustomElement(class Q2Message extends HTMLE
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: 'dc36daa38d71e2adb1b5926531fa3c6864a8e7a4', 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: '41ea931afc6d551e6618f3041a77fc8c67fa23ea', class: "sr" }), h("div", { key: 'f77d9ae560914108eda454c0d4b4eb04302ba558', class: "sr message-label" }, messageLabel), h("div", { key: '6fb809b83d5de60625da2f9799bdbbcf2eb96eef', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: 'b03b23335c2b650f82a57abc8b2830353c5d8ae9' }))));
+        return (h("div", { key: 'd3ac196456bf95aef66663216c8d3732467d02af', 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: '86be85177e1d14f38466083a2726c8a8a16b8e0f', class: "sr" }), h("div", { key: '8b387b4815f0e01790d5fc82e23b8217b59571a4', class: "sr message-label" }, messageLabel), h("div", { key: 'b2486149d3c03d2af4c494ce3b9004890270e4b6', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '444300376f7085926dada56b71b44631dd0e1af2' }))));
     }
     messageIcon(type) {
         const iconMap = {

package/dist/components/q2-month-picker.js

@@ -139,10 +139,10 @@ const Q2MonthPicker$1 = /*@__PURE__*/ proxyCustomElement(class Q2MonthPicker ext
         overrideFocus(this.hostElement);
     }
     render() {
-        return (h("div", { key: '9a58edaff34f92a675f9df129f843c21cb0d271d', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '0903f95ddacd18a43ca7219bc4cf610dd6386304', class: "navigation" }, h("q2-btn", { key: '54df6360507c598ab40592eb63e2412e8f571fb3', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (h("div", { key: '40462c486de4c00ec98af8e8a021d878b5d18617', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '44694fbe172115218b0ddf0085d7778a030b8e7f', class: "navigation" }, h("q2-btn", { key: 'dedfdcc6e6cf89f5467d30a124e5bcea507f87ae', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, h("span", { key: 'bbb1a38a4e5a7a22a449700d2b9cb1ceadf52c29', class: "year" }, this.year), h("q2-icon", { key: 'eeccf64f25a569491e1a02f248e160e9ff8e769b', class: "year-icon off", type: "chevron-down" })), h("div", { key: 'de47dff959e5f3459c716e2f5d54aa911007e97e', class: "month-controller" }, h("div", { key: '5f8fcd7cce3a14e3f4edb0b060ba72d429a44cea', class: "cal-year-prev-next" }, h("q2-btn", { key: '18482f30f6905d858f59f00a073622b3fe40d45c', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: '5daeea35c3a1af290bc65468f3f423b4765eb624', type: "arrow-left" })), h("q2-btn", { key: 'a2ea40ba55c61c7a80e50fc205e12940f40dd3e8', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: '05df41c89607c8efa7d645108c0ac6101a35f114', type: "arrow-right" }))))), h("div", { key: 'd46cba38180a70b7f1468fa34bafd6c04c5dd487', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: '24a1512f07d15a78ca900e6e5625fed2eda76ab7', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, h("span", { key: '0a15bed1946b1751d817b0ff447a70637a98e79f', class: "year" }, this.year), h("q2-icon", { key: '6e2086593a5c4494cee2fe3e97a74cb2764159c5', class: "year-icon off", type: "chevron-down" })), h("div", { key: 'ca2967da7d891974e39f0bad6ad65eecf508aa8a', class: "month-controller" }, h("div", { key: '4bc0cc50ec1eb084bad404a8b4173ed16644d99c', class: "cal-year-prev-next" }, h("q2-btn", { key: 'dcb43f067ee807ce10cd013cd1a658ce39982b0b', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: '7a293700c3c5e9579abed00a017e13531bd9d25c', type: "arrow-left" })), h("q2-btn", { key: '2b4964e124d514a05697f44aa0c88071be3c8b29', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: 'fab7dd9246253a50df0eb6a5713749f20da51a75', type: "arrow-right" }))))), h("div", { key: 'ea3eb812f453f6c482283876354723883f8ca72b', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: '212f3484b4479d4dee521216525738f3f3c4e806', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
     }
     get hostElement() { return this; }
     static get style() { return Q2MonthPickerStyle0; }

package/dist/components/q2-optgroup2.js

@@ -43,7 +43,7 @@ const Q2Optgroup = /*@__PURE__*/ proxyCustomElement(class Q2Optgroup extends HTM
         });
     }
     render() {
-        return (h("div", { key: 'f90275607d9a96d441d38a0580ce1b93e662634e', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'd7ebce6b9dca35f1a41c500942f6b21b6277d7b8', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '1f617b24906eb0ebe0e14520a45ae5de2e6757b5', class: "q2-optgroup-options" }, h("slot", { key: 'b90f24f7d8c10e3289041cb948587436c75a19f2' }))));
+        return (h("div", { key: '3aaf75a370b64b14656b77ff6327bfa33f12527b', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'c480fcf81bab561cdf28caeef8873b6ecab4e561', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '30690c2cc216d5d5a75c7a4a2bbdab34582bcb63', class: "q2-optgroup-options" }, h("slot", { key: '24f7a4146ef0f779724916e9b6461cb113228a14' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -538,7 +538,7 @@ const Q2OptionList = /*@__PURE__*/ proxyCustomElement(class Q2OptionList extends
     }
     /// 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' })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-option2.js

@@ -59,7 +59,7 @@ const Q2Option = /*@__PURE__*/ proxyCustomElement(class Q2Option extends HTMLEle
     render() {
         const { disabled, disabledGroup, selected, _multiSelectHidden } = this;
         const isDisabled = disabled || disabledGroup;
-        return (h(Host, { key: 'b6ca0e5f1a15c594a6577769c7549369573541bd', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: 'd4ddab403a45207e8f7e1c2b3611fd9ad5eafa52', type: "checkmark" }), h("div", { key: '4d10f04c3cc686a21f7e6e5d19106b61af89f6f2', class: "content" }, h("slot", { key: '2290b5fe8bbce6a3cb64c70d31df2376d51dd129' }))));
+        return (h(Host, { key: '58f6fc4577543593b533107e116a679fd7a849f4', tabindex: "-1", "aria-disabled": isDisabled ? 'true' : undefined, "aria-selected": `${!!selected}`, "aria-hidden": _multiSelectHidden ? 'true' : undefined, display: this.display }, this.selected && h("q2-icon", { key: '8b754bbdc9d4048e1eca3cb80f31d759532ae465', type: "checkmark" }), h("div", { key: '5423d2646598552abb242551d02084f2bf037130', class: "content" }, h("slot", { key: 'cf874a77a90191d16bb4d824573e290c9492218c' }))));
     }
     get hostElement() { return this; }
     static get style() { return Q2OptionStyle0; }

package/dist/components/q2-pagination.js

@@ -163,7 +163,7 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
                 total,
             });
         }
-        return (h("nav", { key: '74561394c7bdb496d306e959ad5b1e5361e42ec7', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '2500a292e1823d4d24136be40a4fa4f9346bc9c8', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: 'e1ec87b7e948c6cc5a24d3928c2b1998fcb6a37b', class: "container", ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '785482436c658141a8aa6624cbfc6eca11775f8b', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -172,7 +172,7 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: '653ee492dfd5b7e80d8d1e1eb680364cbdb13f17', class: "btn-group" }, h("q2-btn", { key: '512e60ac934efaa54a87862ab81677956d80c7dc', label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '7c0c57fbb28c7221467457ced6e2f196f5c0c41a', type: "chevron-double-left" })), h("q2-btn", { key: '5a3ad7135ac650be29b2dcbd0f4e2dd1e0303a14', label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '9955d71cb14f809d7794022aff67c4403dd59e0c', type: "chevron-left" }))), h("div", { key: 'b7bbe334d869c527093f50b61419cd680dad7205', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '778f9842501854d5427f481e02924b2f967f8ec7', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '2761c3e8acd7150aba435d86c545e0903482163d', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '00e1cfc6c391311920928694844875715ed2fd97', 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: 'f14e720d12dcf4deb0b1ccf1b290f8ef1b3f9dab', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '6acb2c32ca833bdd68fe0e09cee75df7c8abaae3', class: "btn-group" }, h("q2-btn", { key: '0ac42aecaf056348a8c2e2729d1e35e7db44750b', label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'f1c87ff1bc99dc529a2e5efdaad614f1b1c4b520', type: "chevron-right" })), h("q2-btn", { key: '2f6d47cc2805f3e9e3215448e5c6ca0909b7ad80', label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '88a16778a20430935b7cc5d23393897f426d4548', type: "chevron-double-right" })))));
+            })), h("div", { key: '0d0fb36e3b5082f0b2c4babc35016daa7a0bed54', class: "btn-group" }, h("q2-btn", { key: 'cacf48e70afc16726e46dc9e65d253552df63ed3', label: loc('tecton.element.pagination.goToFirstPage'), disabled: onFirstPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '3f68f9da819aff69266171a341a90416a2548f0b', type: "chevron-double-left" })), h("q2-btn", { key: '14ed8f3c64f9ea326fc3d3e2127612e797623f89', label: prevButtonLabel, disabled: onFirstPage, onClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '5dd7a5508bac7fd75998e53ebd7e60bf6609d16f', type: "chevron-left" }))), h("div", { key: 'bb69ef01ab83a147db8a4fa816009a3f9193afbd', class: "controls", hidden: isFullViewHidden, "test-id": "controls" }, h("span", { key: '85539bd9b93c3ebdaaf019093d94146497f68650', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '555009e905094269eb19f97c6f0667e427257c27', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: 'e5e0035da111f8c4a4415dc88d9b1ec79431012d', 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: 'f6601292c021519efcc37056e62dd7f613064ae1', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '3d39cdaaabce849a11e1eb26ecd54372243fc794', class: "btn-group" }, h("q2-btn", { key: '57b30b51688f893d099e44c4cd92fa9470098903', label: nextButtonLabel, disabled: onLastPage, onClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: 'f26e80134b0689b0ea5220499ee05df32a41a9c5', type: "chevron-right" })), h("q2-btn", { key: '599e370274f82d9d352723468468dbb3ee281017', label: "tecton.element.pagination.goToLastPage", disabled: onLastPage, hidden: isFullViewHidden, onClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '3bccd266db36da8dc0ce1911f1cb13299c4eab78', type: "chevron-double-right" })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-pill.js

@@ -266,7 +266,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: '752d0feff9bd565302610c81ce63280196edb43f', onChange: this.onClickElsewhere }, h("div", { key: '4edb21febc2216235832c4b13c638e1f2f8f59a0', class: wrapperClassNames.join(' ') }, h("div", { key: 'c29234f319bf1046b68c41a7375b9a216f12fbbd', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '420e70da1b2f7f9db59b3e403e4bafc405ccc65f', class: "btn-primary", "test-id": "btn-control", type: "button", role: "combobox", 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', "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '4cc237dbfeaeba74b265b4118018d06c45b7f7a5', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon(), this.generateHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '018056177363dba5b2eb5345a3f0b9504e68bcde', 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: '0cf2c285a470d38bd0ec9c76c42d463c4b8ed02e', 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: 'cf56015e6aa133d5df2e671ec2d6b862cd634e91' }))))));
+        return (h("click-elsewhere", { key: 'd10640befcd58192331ec2794e6c3edc1f8b6d00', onChange: this.onClickElsewhere }, h("div", { key: '60a4b94f080ce67c0e29bb62b0bcc0da9c4a3d21', class: wrapperClassNames.join(' ') }, h("div", { key: '06b6205a155cf8c5b9ede8368c0fa50de1a476a8', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '3eeb0fcb5a51723feba81be1ef033c5fd149b73c', class: "btn-primary", "test-id": "btn-control", type: "button", role: "combobox", 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', "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.maxLength && this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '15a0040c251a1e0e25946618dfdcbee0775d61b7', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.generateIcon(), this.generateHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: 'ffa8513b720fd3aa501283a3e7a3c9a175665e6f', 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: 'ecfcc0859cdb2e3b689ebca0f063f77074af7512', 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: 'ce61a8e233cfbb0957f9c7b3934d4284dff36ddd' }))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-popover2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { k as handleDeprecationWarning, w as waitForNextPaint } from './index2.js';
 
-const q2PopoverCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.container{display:none}.show{display:block;position:fixed;z-index:var(--tct-popover-z-index, 50);margin:0;padding:0;overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));color:var(--tct-popover-font-color, var(--t-text, #4d4d4d));min-width:var(--tct-popover-min-width, 135px);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}:host([block]) .show{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:host([align=left]) .show{left:var(--comp-pop-left);right:unset}:host([align=right]) .show{right:var(--comp-pop-right);left:unset}.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}.show.up{top:unset;bottom:var(--comp-pop-bottom)}.show.legacy{position:absolute}.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}";
+const q2PopoverCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.legacy.container{display:none}.legacy.show{display:block;z-index:var(--tct-popover-z-index, 50)}:popover-open,.show{position:absolute;margin:0;padding:0;overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));color:var(--tct-popover-font-color, var(--t-text, #4d4d4d));min-width:var(--tct-popover-min-width, 135px);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}:popover-open.block,.show.block{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:popover-open.left,.show.left{left:var(--comp-pop-left);right:unset}:popover-open.right,.show.right{right:var(--comp-pop-right);left:unset}:popover-open.down,.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}:popover-open.up,.show.up{top:unset;bottom:var(--comp-pop-bottom)}:popover-open::-webkit-scrollbar,.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}:popover-open::-webkit-scrollbar-thumb,.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}:popover-open::-webkit-scrollbar-track,.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}";
 const Q2PopoverStyle0 = q2PopoverCss;
 
 const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLElement {
@@ -14,7 +14,6 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
          * 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 = () => {
@@ -22,6 +21,9 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
                 handleDeprecationWarning(this, 'minHeight', 'prop');
             }
         };
+        this.handlePopoverToggleEvent = (event) => {
+            this.popoverStateChanged.emit({ open: event.newState === 'open' });
+        };
         this.viewPortChanged = () => {
             if (!this.open)
                 return;
@@ -31,9 +33,9 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
             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,
@@ -41,16 +43,32 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
                 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();
@@ -81,7 +99,7 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
             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;
@@ -91,13 +109,25 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         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() {
@@ -116,7 +146,12 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         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();
         }
@@ -133,7 +168,7 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         event.stopPropagation();
     }
     /// Getters ///
-    get actualDirection() {
+    get providedDirection() {
         const { direction } = this;
         switch (direction) {
             case 'up':
@@ -149,23 +184,24 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         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
+        visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.removeEventListener('resize', this.viewPortChanged);
         window.removeEventListener('scroll', this.viewPortChanged);
         (_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');
@@ -183,17 +219,18 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         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();
@@ -206,16 +243,14 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         let maxSpaceAbove;
         let maxSpaceBelow;
         if (isModule) {
-            const platformDimensions = (_c = window.Tecton) === null || _c === void 0 ? void 0 : _c.platformDimensions;
+            const { outletOffset = 0, innerHeight = window.innerHeight } = ((_c = window.Tecton) === null || _c === void 0 ? void 0 : _c.platformDimensions) || {};
             const distanceToIframeBottom = window.visualViewport.height - controlBottom;
-            const viewableSpaceBelow = platformDimensions.innerHeight - (platformDimensions.outletOffset + controlBottom);
+            const viewableSpaceBelow = innerHeight - (outletOffset + controlBottom);
             const isIframeShorterThanWindow = distanceToIframeBottom < viewableSpaceBelow;
-            windowHeight = platformDimensions.innerHeight;
+            windowHeight = innerHeight;
             // If the top of the module is below the top of the window we just use the controlTop
             // Otherwise we need to add the outletOffset to the controlTop
-            maxSpaceAbove =
-                (platformDimensions.outletOffset > 0 ? controlTop : controlTop + platformDimensions.outletOffset) -
-                    displayBuffer;
+            maxSpaceAbove = (outletOffset > 0 ? controlTop : controlTop + outletOffset) - displayBuffer;
             maxSpaceBelow = isIframeShorterThanWindow
                 ? distanceToIframeBottom - displayBuffer
                 : viewableSpaceBelow - displayBuffer;
@@ -230,7 +265,7 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
         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) {
@@ -248,12 +283,14 @@ const Q2Popover = /*@__PURE__*/ proxyCustomElement(class Q2Popover extends HTMLE
     }
     /// 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: 'a96d0c6516ae6d7c279aa7b550cb5c41260ea618', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer" }, h("div", { key: '8700a956386ec2c0580be9751673fec1cb2f6b20', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: 'aeb04e94b887bd1af446ce443fb492a29bb9e0d6' }))));
+        return (h("div", { key: '614ba5a1899298de8704a4496d6f35b033ee273c', ref: el => (this.containerElement = el), class: containerClasses.join(' '), "test-id": "outerContainer", tabIndex: -1, popover: "auto" }, h("div", { key: '0f56f5850fad033e7ce7d93f8562d7e1355354a9', ref: el => (this.contentElement = el), class: "content" }, h("slot", { key: '68aceadd8c4be1f9eff1384ad21f611b51bcdfdb' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {