q2-tecton-elements 1.66.2 → 1.67.1

package/dist/collection/components/q2-tab-container/q2-tab-container.css

@@ -125,14 +125,19 @@ li button {
   padding: var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));
   color: var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));
   font-size: var(--tct-tab-font-size, var(--t-tab-font-size, 17px));
+  line-height: var(--tct-tab-line-height, 20px);
   display: block;
   transition: background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs);
 }
 :host([type=section]) li button {
   --comp-tab-section-padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));
-  font-size: var(--tct-tab-section-font-size, inherit);
+  font-size: var(--tct-tab-section-font-size, 14px);
+  line-height: var(--tct-tab-section-line-height, 18px);
   padding: var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)));
 }
+li button:focus-visible {
+  box-shadow: var(--tct-tab-focus-visible-box-shadow, var(--const-double-focus-ring));
+}
 li button:hover {
   color: var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));
   background: var(--tct-tab-hover-background, var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit)));
@@ -144,6 +149,7 @@ li button[aria-selected=true] {
   border-style: var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));
   width: var(--tct-tab-active-width, var(--t-tab-active-width, 100%));
   background: var(--tct-tab-active-background, var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit)));
+  text-decoration: var(--tct-tab-active-text-decoration, none);
 }
 :host([color=alt]) li button {
   color: var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit));

package/dist/collection/components/q2-tab-container/q2-tab-container.js

@@ -266,7 +266,7 @@ export class Q2TabContainer {
         return (h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${description}` }, tab.label, h("q2-badge", { value: tab.badgeCount, theme: theme, status: tab.badgeStatus })));
     }
     render() {
-        return (h(Fragment, { key: '2181b2505b4d48d9812b61d5414264425ff7f4af' }, h("div", { key: '0901678c9f074277414bf0dfd1b73cb3ec93cd6f', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: '3cc265f40d308947e07bb2ca7cf2496bf1f74d44' }, h("div", { key: '8b0606af29da80fb969e94b2708077bf2e4ef7e2', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: '2412d226cf903beae013965e345f0f56ca9991d6', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: 'edf2bf63eebe24832e529178fa185ad27c3a45ba', class: "btn-left", hidden: !this.showScrollLeft, onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: '7900b5426d1ec51880fe8c36d33a59873b1be508', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: '001628dae8b16b4c5aff651c8515cce25d08bbf2', class: "btn-right", hidden: !this.showScrollRight, onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: 'f4579ca37dd0e2908e3f68dc60eb923d4a3f314e', type: "chevron-right", label: "scroll right" })))), h("ul", { key: '53efc8ffaaf29dc1dfd9b86ee4105a87350aebfb', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '1e3d76467f667d04a488aacd5a51b641a0acbabc', class: "tab-content" }, h("slot", { key: '4384593fb9579c4187c50eee288517aba22c9ace', onSlotchange: () => this.onSlotChange() }))));
+        return (h(Fragment, { key: '1913175c15aecb5bf14cd1dbdc35e9c987fde9d4' }, h("div", { key: '635d91af2197e6ef1078cdc9bd6fcf8d4b135675', class: "tab-container" }, this.scrollEnabled && (h(Fragment, { key: '138d7b25a3644ccf9b14934a06ba515e04770bac' }, h("div", { key: 'a5e723731fb2c42a0c280cc15d7220a64f67b60b', class: "gradient-left", hidden: !this.showScrollLeft }), h("div", { key: 'bd13d0b8412a08277b112473aa4664e287bce7c4', class: "gradient-right", hidden: !this.showScrollRight }), h("q2-btn", { key: '7887ac9fcf831190abc8610cb6271839a662efd2', class: "btn-left", hidden: !this.showScrollLeft, onTctClick: () => this.onScrollBtnClick('left') }, h("q2-icon", { key: 'c7ef1331d91747e4c23f0ecdc48600ae2ca0d2ad', type: "chevron-left", label: "scroll left" })), h("q2-btn", { key: 'a8564bd1e158bef750300112d024933600f7f6ac', class: "btn-right", hidden: !this.showScrollRight, onTctClick: () => this.onScrollBtnClick('right') }, h("q2-icon", { key: '16dfc165369e2cc344d76e817b879d8c02d47b23', type: "chevron-right", label: "scroll right" })))), h("ul", { key: '660241dfc441a2f55328156e23c601061ff89c17', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), h("div", { key: '54fc457ab57a00bd13eac3ebdb019bd49bbd7a71', class: "tab-content" }, h("slot", { key: '479a982a16116bc5e82e28f171387c07a33bcb9c', onSlotchange: () => this.onSlotChange() }))));
     }
     static get is() { return "q2-tab-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-tab-pane/q2-tab-pane.js

@@ -19,7 +19,7 @@ export class Q2TabPane {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '1f9e5f993a4d548dade126f8acf05e9c958eddc0', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: 'd5eeb1c72d8c416b91851a661d3aa4736d17f16b' })));
+        return (h("div", { key: '6550750c490f276b314f5e10cba438aa5f458657', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: 'bc8b8e38e3d2635f61ccc06830c095cc743c235a' })));
     }
     static get is() { return "q2-tab-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -105,6 +105,9 @@ button {
   --comp-tag-color: var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #141414));
   --comp-tag-border-color: var(--tct-tag-tertiary-border-color, var(--t-tertiary, #e8f5fc));
 }
+.tag-wrapper:focus-visible {
+  box-shadow: var(--tct-tag-focus-visible-box-shadow, var(--const-double-focus-ring));
+}
 
 .tag {
   display: flex;

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

@@ -198,7 +198,7 @@ export class Q2Tag {
         if (this.optionCount)
             wrapperClassNames.push('has-options');
         const shouldShowOptions = this.optionCount > 0;
-        return (h(Host, { key: '2ce592e9fc8db8d547cad71623270837ec0539d6' }, h("click-elsewhere", { key: 'b0a0ad314e84ccae1e06b197bc6fec8f1c333349', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" }))), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: 'd67e1d087a62530ef3c013f070ae522531acd508', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '6c2484d7110eeff81dfebef4c05dec99adffe935', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: 'db0c912240b4e2425c16bce894abb8be42ab67e2' })))))));
+        return (h(Host, { key: '664af4451fdb556b1746ec0f1a0a66de86642a7a' }, h("click-elsewhere", { key: '8da25535a510070733d25fa1d63dedfa0865b7ab', onChange: this.onClickElsewhere }, shouldShowOptions ? (h(Fragment, null, h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": loc(this.label) }, h("div", { class: wrapperClassNames.join(' ') }, loc(this.label)), h("q2-icon", { type: "options" }))), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, h("slot", { name: "decorator" }), loc(this.label)))), shouldShowOptions && (h("q2-popover", { key: '28397ef79ce03d335959ad993a4de4278073a9ba', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '3379d0003bde9036485c06ff696a2f08fc599451', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '1cf6372351972e02563e74ba1e9cc79e261a9a2a' })))))));
     }
     static get is() { return "q2-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -195,6 +195,7 @@ textarea:not([cols]) {
   backdrop-filter: var(--tct-textarea-error-backdrop-filter, var(--comp-textarea-backdrop-filter));
   border-color: var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));
   background: var(--tct-textarea-error-background, var(--comp-textarea-background));
+  box-shadow: var(--tct-textarea-error-box-shadow, var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none)));
 }
 textarea:hover {
   border-color: var(--tct-textarea-hover-border-color, var(--comp-textarea-border-color));

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

@@ -277,7 +277,7 @@ export class Q2Textarea {
         ]))));
     }
     render() {
-        return (h("div", { key: 'a9b5fe04a27d30b849855d25b4ab470a6670827a', class: this.wrapperClasses }, renderLabel(this), h("div", { key: '73bb18321f257624ca7563572cee97d4d77a2879', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', renderMessages(this))));
+        return (h("div", { key: '1a53c8b1528031f5ccb957f2a2320f7a8a8f4607', class: this.wrapperClasses }, renderLabel(this), h("div", { key: '1de221d01fd339d749b557d408acabdc06c07ecc', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', renderMessages(this))));
     }
     static get is() { return "q2-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -118,7 +118,7 @@ button {
   word-wrap: break-word;
   white-space: pre;
   pointer-events: none;
-  content: attr(aria-label);
+  content: attr(data-label);
   background: var(--comp-background);
   border-radius: var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 4px)));
 }

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

@@ -20,8 +20,12 @@ export class Q2Tooltip {
     }
     // #endregion
     // #region Component Lifecycle Events
+    disconnectedCallback() {
+        this.clearTooltipOnChildren();
+    }
     componentDidLoad() {
         overrideFocus(this.hostElement);
+        this.propagateTooltip();
         if (this.persistent)
             this.adjustSide();
     }
@@ -62,6 +66,11 @@ export class Q2Tooltip {
         this.adjustSide();
     }
     // #endregion
+    // #region Watchers
+    labelChanged() {
+        this.propagateTooltip();
+    }
+    // #endregion
     // #region Local Methods
     get shouldBeVisible() {
         if (this.persistent)
@@ -120,6 +129,14 @@ export class Q2Tooltip {
         if (isKeyboardFocus)
             return;
     }
+    clearTooltipOnChildren() {
+        const children = Array.from(this.hostElement.children);
+        for (const child of children) {
+            if ('_tooltip' in child) {
+                child._tooltip = undefined;
+            }
+        }
+    }
     findFocusVisibleElement(element) {
         if (!element)
             return;
@@ -133,6 +150,16 @@ export class Q2Tooltip {
         else
             this.focusClass = null;
     }
+    propagateTooltip() {
+        if (this.focusable)
+            return;
+        const children = Array.from(this.hostElement.children);
+        for (const child of children) {
+            if ('_tooltip' in child) {
+                child._tooltip = this.label || undefined;
+            }
+        }
+    }
     // #endregion
     // #region Render Methods
     render() {
@@ -142,7 +169,7 @@ export class Q2Tooltip {
             classes.push(focusClass);
         if (this.persistOnHoverDismissed)
             classes.push('dismissed');
-        return this.label ? (h("div", { tabindex: this.focusable ? 0 : undefined, ref: el => (this.tooltipElement = el), class: classes.join(' '), "aria-label": this.label, onAnimationEnd: () => this.animationEndHandler(), role: "tooltip", "test-id": "tooltipContainer" }, h("slot", null))) : (h("slot", null));
+        return this.label ? (h("div", { tabindex: this.focusable ? 0 : undefined, ref: el => (this.tooltipElement = el), class: classes.join(' '), "aria-label": this.focusable ? this.label : undefined, "data-label": this.label, onAnimationEnd: () => this.animationEndHandler(), role: this.focusable ? 'tooltip' : undefined, "test-id": "tooltipContainer" }, h("slot", { onSlotchange: () => this.propagateTooltip() }))) : (h("slot", { onSlotchange: () => this.propagateTooltip() }));
     }
     static get is() { return "q2-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -324,6 +351,12 @@ export class Q2Tooltip {
         };
     }
     static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "label",
+                "methodName": "labelChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "focus",

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

@@ -1 +1 @@
-{"version":3,"file":"q2-tooltip.js","sourceRoot":"","sources":["../../../../src/components/q2-tooltip/q2-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Listen, State } from '@stencil/core';\nimport { isEventFromElement, overrideFocus } from 'src/utils';\n\n/**\n * @name Tooltip\n * @category Feedback\n * @summary Use for brief hints or explanations shown on hover or focus.\n */\n@Component({ tag: 'q2-tooltip', shadow: true, styleUrl: 'q2-tooltip.scss' })\nexport class Q2Tooltip implements ComponentInterface {\n    // #region Own Properties\n\n    animationEndCount = 0;\n    tooltipElement: HTMLDivElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    focusClass: 'has-keyboard-focus' | 'has-generic-focus' | 'has-generic-focus-out';\n\n    @State()\n    persistOnHoverDismissed: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Displays the element as a block, making it take up the full width of its container. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Makes the component focusable, thereby putting it in the tab order of the keyboard.\n     * @warning\n     * This is only meant to be used when the `q2-tooltip` is wrapped around an element that is not focusable (e.g., icons, static text, badges, etc.).\n     */\n    @Prop({ reflect: true })\n    focusable: boolean = false;\n\n    /** Whether to show the tooltip immediately upon hover. */\n    @Prop({ reflect: true })\n    immediate: boolean;\n\n    /** text that is displayed when the tooltip is activated. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Enables the use of multi-line tooltips with a default `max-width` of `200px`. */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /** Displays the tooltip persistently. */\n    @Prop({ reflect: true })\n    persistent: boolean;\n\n    /**\n     * Allows the tooltip bubble itself to be hovered.\n     * When enabled, the tooltip remains visible while moving between the trigger and the tooltip bubble.\n     */\n    @Prop({ reflect: true })\n    persistOnHover: boolean;\n\n    /** The position of the tooltip based on [cardinal and intercardinal directions](https://en.wikipedia.org/wiki/Cardinal_direction). */\n    @Prop({ reflect: true })\n    position: 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se' = 'n';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        if (this.persistent) this.adjustSide();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus', { capture: true })\n    focusCaptureHandler() {\n        this.checkFocusClass();\n    }\n\n    @Listen('focus')\n    focusHandler(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.focusable) return;\n        this.tooltipElement.focus();\n    }\n\n    @Listen('focusout')\n    focusOutHandler() {\n        if (this.shouldBeVisible) return;\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    // Escape must be handled on `document` so it still dismisses when the tooltip is visible by hover only and focus is not inside the tooltip host.\n    @Listen('keydown', { target: 'document' })\n    keyDownDocumentHandler(event: KeyboardEvent) {\n        if (!['Esc', 'Escape'].includes(event.key)) return;\n        if (!this.shouldBeVisible) return;\n        if (this.persistOnHover) this.persistOnHoverDismissed = true;\n        this.hideTooltip();\n    }\n\n    @Listen('mouseenter')\n    mouseEnterHandler() {\n        this.persistOnHoverDismissed = false;\n    }\n\n    @Listen('mouseover')\n    @Listen('mouseclick')\n    handleMouseOver() {\n        this.adjustSide();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get shouldBeVisible() {\n        if (this.persistent) return true;\n        return this.hostElement.matches(':hover, :focus-within') && !this.persistOnHoverDismissed;\n    }\n\n    adjustSide() {\n        const { left: hostLeft, right: hostRight, width: hostWidth } = this.hostElement.getBoundingClientRect();\n        if (!hostLeft || !hostWidth) return;\n\n        const { width, paddingLeft, paddingRight } = window.getComputedStyle(this.tooltipElement, '::after');\n\n        const tooltipWidth =\n            Number(width.replace(/[px]/g, '')) +\n            Number(paddingLeft.replace(/[px]/g, '')) +\n            Number(paddingRight.replace(/[px]/g, ''));\n        const extraMargin = ['se', 'sw', 'ne', 'nw'].includes(this.position) ? 0 : 15;\n\n        const distanceLeft = hostLeft + hostWidth / 2;\n        const distanceRight = window.innerWidth - hostRight + +hostWidth / 2;\n\n        if (['ne', 'se'].includes(this.position)) {\n            if (tooltipWidth > distanceRight) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `-${Math.round(tooltipWidth - distanceRight + extraMargin)}px`\n                );\n            }\n        } else if (['nw', 'sw'].includes(this.position)) {\n            if (tooltipWidth > distanceLeft) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `${Math.round(tooltipWidth - distanceLeft + extraMargin)}px`\n                );\n            }\n        } else if (['n', 's'].includes(this.position)) {\n            if (tooltipWidth / 2 > distanceLeft) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `${Math.round(tooltipWidth / 2 - distanceLeft + extraMargin)}px`\n                );\n            } else if (tooltipWidth / 2 > distanceRight) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `-${Math.round(tooltipWidth / 2 - distanceRight + extraMargin)}px`\n                );\n            } else {\n                this.tooltipElement.style.setProperty('--comp-offset-translate', `0px`);\n            }\n        }\n    }\n\n    animationEndHandler() {\n        this.animationEndCount = this.animationEndCount + 1;\n        const { focusClass, animationEndCount } = this;\n\n        // animationEnd is fired once for :before and once for :after pseudo elements\n        // there are multiple animations defined for .has-generic-focus\n        // so we need to wait for all of them to finish before we can remove the class\n        if (focusClass === 'has-generic-focus-out' || (focusClass === 'has-generic-focus' && animationEndCount === 4)) {\n            this.focusClass = null;\n            this.animationEndCount = 0;\n        }\n    }\n\n    checkFocusClass() {\n        if (!this.shouldBeVisible) return;\n        const isKeyboardFocus = !!this.findFocusVisibleElement(document.activeElement);\n        this.focusClass = isKeyboardFocus ? 'has-keyboard-focus' : 'has-generic-focus';\n        if (isKeyboardFocus) return;\n    }\n\n    findFocusVisibleElement(element: Element) {\n        if (!element) return;\n        if (element.shadowRoot) element = this.findFocusVisibleElement(element.shadowRoot.activeElement);\n        return element?.matches(':focus-visible') ? element : null;\n    }\n\n    hideTooltip() {\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { focusClass } = this;\n        const classes = ['tooltip'];\n        if (focusClass) classes.push(focusClass);\n        if (this.persistOnHoverDismissed) classes.push('dismissed');\n\n        return this.label ? (\n            <div\n                tabindex={this.focusable ? 0 : undefined}\n                ref={el => (this.tooltipElement = el)}\n                class={classes.join(' ')}\n                aria-label={this.label}\n                onAnimationEnd={() => this.animationEndHandler()}\n                role=\"tooltip\"\n                test-id=\"tooltipContainer\"\n            >\n                <slot />\n            </div>\n        ) : (\n            <slot />\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-tooltip.js","sourceRoot":"","sources":["../../../../src/components/q2-tooltip/q2-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Listen, State, Watch } from '@stencil/core';\nimport { isEventFromElement, overrideFocus } from 'src/utils';\n\n/**\n * @name Tooltip\n * @category Feedback\n * @summary Use for brief hints or explanations shown on hover or focus.\n */\n@Component({ tag: 'q2-tooltip', shadow: true, styleUrl: 'q2-tooltip.scss' })\nexport class Q2Tooltip implements ComponentInterface {\n    // #region Own Properties\n\n    animationEndCount = 0;\n    tooltipElement: HTMLDivElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    focusClass: 'has-keyboard-focus' | 'has-generic-focus' | 'has-generic-focus-out';\n\n    @State()\n    persistOnHoverDismissed: boolean;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Displays the element as a block, making it take up the full width of its container. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Makes the component focusable, thereby putting it in the tab order of the keyboard.\n     * @warning\n     * This is only meant to be used when the `q2-tooltip` is wrapped around an element that is not focusable (e.g., icons, static text, badges, etc.).\n     */\n    @Prop({ reflect: true })\n    focusable: boolean = false;\n\n    /** Whether to show the tooltip immediately upon hover. */\n    @Prop({ reflect: true })\n    immediate: boolean;\n\n    /** text that is displayed when the tooltip is activated. */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Enables the use of multi-line tooltips with a default `max-width` of `200px`. */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /** Displays the tooltip persistently. */\n    @Prop({ reflect: true })\n    persistent: boolean;\n\n    /**\n     * Allows the tooltip bubble itself to be hovered.\n     * When enabled, the tooltip remains visible while moving between the trigger and the tooltip bubble.\n     */\n    @Prop({ reflect: true })\n    persistOnHover: boolean;\n\n    /** The position of the tooltip based on [cardinal and intercardinal directions](https://en.wikipedia.org/wiki/Cardinal_direction). */\n    @Prop({ reflect: true })\n    position: 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se' = 'n';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.clearTooltipOnChildren();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.propagateTooltip();\n        if (this.persistent) this.adjustSide();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus', { capture: true })\n    focusCaptureHandler() {\n        this.checkFocusClass();\n    }\n\n    @Listen('focus')\n    focusHandler(event) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.focusable) return;\n        this.tooltipElement.focus();\n    }\n\n    @Listen('focusout')\n    focusOutHandler() {\n        if (this.shouldBeVisible) return;\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    // Escape must be handled on `document` so it still dismisses when the tooltip is visible by hover only and focus is not inside the tooltip host.\n    @Listen('keydown', { target: 'document' })\n    keyDownDocumentHandler(event: KeyboardEvent) {\n        if (!['Esc', 'Escape'].includes(event.key)) return;\n        if (!this.shouldBeVisible) return;\n        if (this.persistOnHover) this.persistOnHoverDismissed = true;\n        this.hideTooltip();\n    }\n\n    @Listen('mouseenter')\n    mouseEnterHandler() {\n        this.persistOnHoverDismissed = false;\n    }\n\n    @Listen('mouseover')\n    @Listen('mouseclick')\n    handleMouseOver() {\n        this.adjustSide();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('label')\n    labelChanged() {\n        this.propagateTooltip();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get shouldBeVisible() {\n        if (this.persistent) return true;\n        return this.hostElement.matches(':hover, :focus-within') && !this.persistOnHoverDismissed;\n    }\n\n    adjustSide() {\n        const { left: hostLeft, right: hostRight, width: hostWidth } = this.hostElement.getBoundingClientRect();\n        if (!hostLeft || !hostWidth) return;\n\n        const { width, paddingLeft, paddingRight } = window.getComputedStyle(this.tooltipElement, '::after');\n\n        const tooltipWidth =\n            Number(width.replace(/[px]/g, '')) +\n            Number(paddingLeft.replace(/[px]/g, '')) +\n            Number(paddingRight.replace(/[px]/g, ''));\n        const extraMargin = ['se', 'sw', 'ne', 'nw'].includes(this.position) ? 0 : 15;\n\n        const distanceLeft = hostLeft + hostWidth / 2;\n        const distanceRight = window.innerWidth - hostRight + +hostWidth / 2;\n\n        if (['ne', 'se'].includes(this.position)) {\n            if (tooltipWidth > distanceRight) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `-${Math.round(tooltipWidth - distanceRight + extraMargin)}px`\n                );\n            }\n        } else if (['nw', 'sw'].includes(this.position)) {\n            if (tooltipWidth > distanceLeft) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `${Math.round(tooltipWidth - distanceLeft + extraMargin)}px`\n                );\n            }\n        } else if (['n', 's'].includes(this.position)) {\n            if (tooltipWidth / 2 > distanceLeft) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `${Math.round(tooltipWidth / 2 - distanceLeft + extraMargin)}px`\n                );\n            } else if (tooltipWidth / 2 > distanceRight) {\n                this.tooltipElement.style.setProperty(\n                    '--comp-offset-translate',\n                    `-${Math.round(tooltipWidth / 2 - distanceRight + extraMargin)}px`\n                );\n            } else {\n                this.tooltipElement.style.setProperty('--comp-offset-translate', `0px`);\n            }\n        }\n    }\n\n    animationEndHandler() {\n        this.animationEndCount = this.animationEndCount + 1;\n        const { focusClass, animationEndCount } = this;\n\n        // animationEnd is fired once for :before and once for :after pseudo elements\n        // there are multiple animations defined for .has-generic-focus\n        // so we need to wait for all of them to finish before we can remove the class\n        if (focusClass === 'has-generic-focus-out' || (focusClass === 'has-generic-focus' && animationEndCount === 4)) {\n            this.focusClass = null;\n            this.animationEndCount = 0;\n        }\n    }\n\n    checkFocusClass() {\n        if (!this.shouldBeVisible) return;\n        const isKeyboardFocus = !!this.findFocusVisibleElement(document.activeElement);\n        this.focusClass = isKeyboardFocus ? 'has-keyboard-focus' : 'has-generic-focus';\n        if (isKeyboardFocus) return;\n    }\n\n    clearTooltipOnChildren() {\n        const children = Array.from(this.hostElement.children);\n        for (const child of children) {\n            if ('_tooltip' in child) {\n                (child as HTMLElement & { _tooltip: string })._tooltip = undefined;\n            }\n        }\n    }\n\n    findFocusVisibleElement(element: Element) {\n        if (!element) return;\n        if (element.shadowRoot) element = this.findFocusVisibleElement(element.shadowRoot.activeElement);\n        return element?.matches(':focus-visible') ? element : null;\n    }\n\n    hideTooltip() {\n        if (this.focusClass === 'has-generic-focus') this.focusClass = 'has-generic-focus-out';\n        else this.focusClass = null;\n    }\n\n    propagateTooltip() {\n        if (this.focusable) return;\n        const children = Array.from(this.hostElement.children);\n        for (const child of children) {\n            if ('_tooltip' in child) {\n                (child as HTMLElement & { _tooltip: string })._tooltip = this.label || undefined;\n            }\n        }\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const { focusClass } = this;\n        const classes = ['tooltip'];\n        if (focusClass) classes.push(focusClass);\n        if (this.persistOnHoverDismissed) classes.push('dismissed');\n\n        return this.label ? (\n            <div\n                tabindex={this.focusable ? 0 : undefined}\n                ref={el => (this.tooltipElement = el)}\n                class={classes.join(' ')}\n                aria-label={this.focusable ? this.label : undefined}\n                data-label={this.label}\n                onAnimationEnd={() => this.animationEndHandler()}\n                role={this.focusable ? 'tooltip' : undefined}\n                test-id=\"tooltipContainer\"\n            >\n                <slot onSlotchange={() => this.propagateTooltip()} />\n            </div>\n        ) : (\n            <slot onSlotchange={() => this.propagateTooltip()} />\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/tecton-tab-pane/tecton-tab-pane.js

@@ -49,9 +49,9 @@ export class TectonTabPane {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'ace595f724970ba699a0ca62c27b393de637d9ea', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (h("div", { key: 'ee8fe1eda2ed564d8afbfcbc2a80b9aa93b68d93' }, h("slot", { key: '9da63a65b251f15c84508eccf89c5457b4412de4', name: "loading-wrapper" }), h("iframe", { key: 'dd0b576edfa8ce64d864ab0215d6c51995841d57', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
+        return (h("div", { key: '7001a993b32e67644b26c0af1bd594c6e0bb9fd3', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, this.selected && this.provided !== undefined && !this.provided && (h("div", { key: '1e2cac90e08e633e5dd23ca2b1e7378ab77c1c03' }, h("slot", { key: '99ab7a254419bc59b7ee19afde9ad1d332d437be', name: "loading-wrapper" }), h("iframe", { key: '996630a2030f32a1d43cb574461b5c105934cec6', hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }), this._showForm && this.authPayload ? (h("form", { hidden: true, method: "post", action: this.url, target: this.moduleId, encType: "multipart/form-data" }, this.authPayload.map(element => {
             return (h("input", { type: "hidden", value: element.value, name: element.key }));
-        }))) : (''))), h("div", { key: '8a160438d70d8e488fa43815949cd4990dea2f5e', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: 'ac6d5a0e507221c1f2efa6b26506ebdb5eed7de1' }))));
+        }))) : (''))), h("div", { key: '4f8b8a32f0d6f1b5102745845ae83f04d913964d', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: '2bbda438ddd7355fedc37e04ec7707736ddb1f03' }))));
     }
     static get is() { return "tecton-tab-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/index.js

@@ -1,2 +1,3 @@
 export * from './components';
+export * from 'q2-tecton-common/lib/types/elements';
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,qCAAqC,CAAC","sourcesContent":["export * from './components';\nexport * from 'q2-tecton-common/lib/types/elements';\n"]}

package/dist/collection/utils/action-sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-sheet.js","sourceRoot":"","sources":["../../../src/utils/action-sheet.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n    ActionSheetSelectedOption,\n    ActionSheetListCloseData,\n    ActionSheetListData,\n    ActionSheetListOption,\n    ActionSheetListOptgroup,\n    ActionSheetStaticHtmlData,\n} from 'q2-tecton-common/lib/types/action-sheet';\n\ninterface IActionSheetComponent {\n    hoist: boolean;\n}\nexport const shouldShowActionSheet = (component: IActionSheetComponent, event?: KeyboardEvent | MouseEvent) => {\n    const isDialogSupported = 'open' in document.createElement('dialog');\n    if (!isDialogSupported) return false;\n\n    const canShowActionSheet = !!window.TectonElements?.showActionSheet;\n    if (!canShowActionSheet) return false;\n\n    const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End', 'Enter', ' '];\n    if (event) {\n        const eventIsKeyboardEvent = event instanceof KeyboardEvent;\n        const eventIsMouseEvent = event instanceof MouseEvent;\n        const keyboardEventShouldTriggerOpen = eventIsKeyboardEvent && keysThatTriggerOpen.includes(event.key);\n        const mouseEventShouldTriggerOpen = eventIsMouseEvent && event.type === 'click';\n        const eventShouldTriggerOpen = mouseEventShouldTriggerOpen || keyboardEventShouldTriggerOpen;\n        if (!eventShouldTriggerOpen) return false;\n    }\n\n    if (component.hoist) return true;\n    return false;\n};\n\nconst parseOptions = (options: (HTMLQ2OptgroupElement | HTMLQ2OptionElement | HTMLQ2DropdownItemElement)[]): any[] => {\n    const defaultOption = {\n        disabled: false,\n        separator: false,\n        display: '',\n        hidden: false,\n        multiline: false,\n        value: '',\n        innerHTML: '',\n    };\n    const optionPropsToGet = Object.keys(defaultOption);\n    const defaultOptgroup = {\n        disabled: false,\n        label: '',\n        options: [],\n    };\n    const optgroupPropsToGet = Object.keys(defaultOptgroup);\n    return options.map(option => {\n        if (option.tagName === 'Q2-OPTGROUP') {\n            const optgroup = option as HTMLQ2OptgroupElement;\n            return optgroupPropsToGet.reduce<ActionSheetListOptgroup>(\n                (acc, prop) => {\n                    if (prop === 'options') {\n                        const options = Array.from(option.children).filter(\n                            child => child.tagName === 'Q2-OPTION' || child.tagName === 'Q2-OPTGROUP'\n                        ) as HTMLQ2OptgroupElement[];\n\n                        acc[prop] = parseOptions(options);\n                    } else {\n                        acc[prop] = optgroup[prop];\n                    }\n                    return acc;\n                },\n                { ...defaultOptgroup }\n            );\n        } else if (option.tagName === 'Q2-OPTION' || option.tagName === 'Q2-DROPDOWN-ITEM') {\n            return optionPropsToGet.reduce<ActionSheetListOption>(\n                (acc, prop) => {\n                    if (option[prop] !== undefined) {\n                        acc[prop] = option[prop];\n                    }\n                    return acc;\n                },\n                { ...defaultOption }\n            );\n        }\n    });\n};\n\nexport const buildListData = async (\n    component: IActionSheetListComponent,\n    event?: MouseEvent | KeyboardEvent\n): Promise<ActionSheetListData> => {\n    return {\n        appearance: 'list',\n        title: component.label || '',\n        description: '',\n        event,\n        listProps: {\n            multiple: !!component.optionList.multiple,\n            selectedOptions: (component.optionList.selectedOptions as ActionSheetSelectedOption[]) || [],\n            noSelect: !!component.optionList.noSelect,\n        },\n        options: parseOptions(await component.optionList.getContents()),\n        // static html only\n        slotsHtml: (await component._getSlotsHtml?.()) || [],\n    };\n};\n\ninterface IActionSheetListComponent {\n    optionList: HTMLQ2OptionListElement;\n    label: string;\n    _getSlotsHtml?: () => Promise<ActionSheetStaticHtmlData[]>;\n}\nexport const showActionSheetList = async (\n    component: IActionSheetListComponent,\n    event?: MouseEvent | KeyboardEvent\n): Promise<ActionSheetListCloseData> => {\n    const listData = await buildListData(component, event);\n    return window.TectonElements?.showActionSheet(listData);\n};\n"]}
+{"version":3,"file":"action-sheet.js","sourceRoot":"","sources":["../../../src/utils/action-sheet.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n    ActionSheetSelectedOption,\n    ActionSheetListCloseData,\n    ActionSheetListData,\n    ActionSheetListOption,\n    ActionSheetListOptgroup,\n    ActionSheetStaticHtmlData,\n} from 'q2-tecton-common/lib/types/action-sheet';\n\ninterface ActionSheetComponent {\n    hoist: boolean;\n}\nexport const shouldShowActionSheet = (component: ActionSheetComponent, event?: KeyboardEvent | MouseEvent) => {\n    const isDialogSupported = 'open' in document.createElement('dialog');\n    if (!isDialogSupported) return false;\n\n    const canShowActionSheet = !!window.TectonElements?.showActionSheet;\n    if (!canShowActionSheet) return false;\n\n    const keysThatTriggerOpen = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp', 'Home', 'End', 'Enter', ' '];\n    if (event) {\n        const eventIsKeyboardEvent = event instanceof KeyboardEvent;\n        const eventIsMouseEvent = event instanceof MouseEvent;\n        const keyboardEventShouldTriggerOpen = eventIsKeyboardEvent && keysThatTriggerOpen.includes(event.key);\n        const mouseEventShouldTriggerOpen = eventIsMouseEvent && event.type === 'click';\n        const eventShouldTriggerOpen = mouseEventShouldTriggerOpen || keyboardEventShouldTriggerOpen;\n        if (!eventShouldTriggerOpen) return false;\n    }\n\n    if (component.hoist) return true;\n    return false;\n};\n\nconst parseOptions = (options: (HTMLQ2OptgroupElement | HTMLQ2OptionElement | HTMLQ2DropdownItemElement)[]): any[] => {\n    const defaultOption = {\n        disabled: false,\n        separator: false,\n        display: '',\n        hidden: false,\n        multiline: false,\n        value: '',\n        innerHTML: '',\n    };\n    const optionPropsToGet = Object.keys(defaultOption);\n    const defaultOptgroup = {\n        disabled: false,\n        label: '',\n        options: [],\n    };\n    const optgroupPropsToGet = Object.keys(defaultOptgroup);\n    return options.map(option => {\n        if (option.tagName === 'Q2-OPTGROUP') {\n            const optgroup = option as HTMLQ2OptgroupElement;\n            return optgroupPropsToGet.reduce<ActionSheetListOptgroup>(\n                (acc, prop) => {\n                    if (prop === 'options') {\n                        const options = Array.from(option.children).filter(\n                            child => child.tagName === 'Q2-OPTION' || child.tagName === 'Q2-OPTGROUP'\n                        ) as HTMLQ2OptgroupElement[];\n\n                        acc[prop] = parseOptions(options);\n                    } else {\n                        acc[prop] = optgroup[prop];\n                    }\n                    return acc;\n                },\n                { ...defaultOptgroup }\n            );\n        } else if (option.tagName === 'Q2-OPTION' || option.tagName === 'Q2-DROPDOWN-ITEM') {\n            return optionPropsToGet.reduce<ActionSheetListOption>(\n                (acc, prop) => {\n                    if (option[prop] !== undefined) {\n                        acc[prop] = option[prop];\n                    }\n                    return acc;\n                },\n                { ...defaultOption }\n            );\n        }\n    });\n};\n\nexport const buildListData = async (\n    component: ActionSheetListComponent,\n    event?: MouseEvent | KeyboardEvent\n): Promise<ActionSheetListData> => {\n    return {\n        appearance: 'list',\n        title: component.label || '',\n        description: '',\n        event,\n        listProps: {\n            multiple: !!component.optionList.multiple,\n            selectedOptions: (component.optionList.selectedOptions as ActionSheetSelectedOption[]) || [],\n            noSelect: !!component.optionList.noSelect,\n        },\n        options: parseOptions(await component.optionList.getContents()),\n        // static html only\n        slotsHtml: (await component._getSlotsHtml?.()) || [],\n    };\n};\n\ninterface ActionSheetListComponent {\n    optionList: HTMLQ2OptionListElement;\n    label: string;\n    _getSlotsHtml?: () => Promise<ActionSheetStaticHtmlData[]>;\n}\nexport const showActionSheetList = async (\n    component: ActionSheetListComponent,\n    event?: MouseEvent | KeyboardEvent\n): Promise<ActionSheetListCloseData> => {\n    const listData = await buildListData(component, event);\n    return window.TectonElements?.showActionSheet(listData);\n};\n"]}

package/dist/collection/utils/index.js

@@ -46,6 +46,11 @@ export function isInScrollableContainer(element) {
             return true;
         }
     }
+    // Check if the iframe itself is the scrolling container
+    const isIframe = window !== window.top;
+    if (isIframe && document.documentElement.scrollHeight > window.innerHeight) {
+        return true;
+    }
     return false;
 }
 export function isHostLosingFocus(event, hostElement) {
@@ -137,39 +142,74 @@ export function loc(key, subs) {
     }
     return (_c = (_b = window === null || window === void 0 ? void 0 : window.TectonElements) === null || _b === void 0 ? void 0 : _b.loc(key, subs)) !== null && _c !== void 0 ? _c : key;
 }
+/**
+ * Returns browser name, version, platform, and context (browser vs app WebView).
+ * Desktop Chrome:          Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36
+ * Desktop Safari:          Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.4 Safari/605.1.15
+ * Desktop Edge:            Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36 Edg/146.0.0.0
+ * Desktop Firefox:         Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:149.0) Gecko/20100101 Firefox/149.0
+ * Mobile app Android:      Mozilla/5.0 (Linux; Android 16; sdk_gphone64_arm64 Build/BE2A.250530.026.D1; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/146.0.7680.177 Mobile Safari/537.36
+ * Mobile browser Android:  Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Mobile Safari/537.36
+ * Mobile app iOS:          Mozilla/5.0 (iPhone; CPU iPhone OS 18_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148
+ * Mobile browser iOS:      Mozilla/5.0 (iPhone; CPU iPhone OS 18_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0.1 Mobile/15E148 Safari/604.1 -> 18.7 is the OS version, 26.0.1 is the Safari version
+ */
 export function getBrowserInfo() {
     const userAgent = navigator.userAgent;
-    let browserName = 'Unknown';
-    let browserVersion = 'Unknown';
-    if (userAgent.includes('Firefox')) {
-        browserName = 'Firefox';
-        const match = userAgent.match(/Firefox\/(\d+\.\d+)/);
-        if (match && match[1]) {
-            browserVersion = match[1];
+    let name = 'Unknown';
+    let version = 'Unknown';
+    // Detect platform
+    const isMobileDevice = /Android|iPhone|iPad|iPod/i.test(userAgent) || userAgent.includes(' iOS/');
+    const platform = isMobileDevice ? 'mobile' : 'desktop';
+    // Detect context — app (WebView) vs standalone browser
+    let context = 'browser';
+    if (isMobileDevice) {
+        const isAndroidWebView = userAgent.includes('; wv)');
+        const isIOSDevice = /iPhone|iPad|iPod/.test(userAgent) || userAgent.includes(' iOS/');
+        const isIOSWebView = isIOSDevice && !userAgent.includes('Safari');
+        if (isAndroidWebView || isIOSWebView) {
+            context = 'app';
         }
     }
-    else if (userAgent.includes('Chrome') && !userAgent.includes('Edg')) {
-        browserName = 'Chrome';
-        const match = userAgent.match(/Chrome\/(\d+\.\d+\.\d+\.\d+)/);
+    // Detect browser name and version — check mobile-specific patterns first
+    if (userAgent.includes(' iPhone OS') && !userAgent.includes('Safari')) {
+        // iOS app WebView — no "Safari" token in userAgent
+        name = 'Safari';
+        version = userAgent.split(' iPhone OS')[1].trim().split(/\s/)[0].replaceAll('_', '.');
+    }
+    else if (userAgent.includes(' iOS/')) {
+        // Alternate iOS app userAgent format (e.g. ngam-ios/26.5.0.107 arm64 iOS/26.4 CFNetwork/1.0 Darwin/25.4.0)
+        name = 'Safari';
+        version = userAgent.split(' iOS/')[1].split(/\s/)[0];
+    }
+    else if (userAgent.includes('Edg')) {
+        name = 'Edge';
+        const match = userAgent.match(/Edg\/(\d+(?:\.\d+)+)/);
         if (match && match[1]) {
-            browserVersion = match[1];
+            version = match[1];
         }
     }
-    else if (userAgent.includes('Safari') && !userAgent.includes('Chrome')) {
-        browserName = 'Safari';
-        const match = userAgent.match(/Version\/(\d+\.\d+)/);
+    else if (userAgent.includes('Firefox')) {
+        name = 'Firefox';
+        const match = userAgent.match(/Firefox\/(\d+\.\d+)/);
         if (match && match[1]) {
-            browserVersion = match[1];
+            version = match[1];
         }
     }
-    else if (userAgent.includes('Edg')) {
-        browserName = 'Edge';
+    else if (userAgent.includes('Chrome')) {
+        name = 'Chrome';
         const match = userAgent.match(/Chrome\/(\d+\.\d+\.\d+\.\d+)/);
         if (match && match[1]) {
-            browserVersion = match[1];
+            version = match[1];
+        }
+    }
+    else if (userAgent.includes('Safari')) {
+        name = 'Safari';
+        const match = userAgent.match(/Version\/(\d+(?:\.\d+)+)/);
+        if (match && match[1]) {
+            version = match[1];
         }
     }
-    return { name: browserName, version: browserVersion };
+    return { name, version, platform, context };
 }
 export function renderLabel(target) {
     const { label, hideLabel, optional, readonly } = target;