q2-tecton-elements 1.67.2 → 1.68.0

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

@@ -9,6 +9,7 @@ export class Q2Tooltip {
     constructor() {
         // #region Own Properties
         this.animationEndCount = 0;
+        this.cachedTooltipHeight = null;
         /**
          * Makes the component focusable, thereby putting it in the tab order of the keyboard.
          * @warning
@@ -31,6 +32,19 @@ export class Q2Tooltip {
     }
     // #endregion
     // #region Listeners
+    documentPointerHandler(event) {
+        var _a;
+        if (!this.focusClass || this.persistent)
+            return;
+        const isEventInsideTooltip = ((_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event).includes(this.hostElement)) ||
+            (event.target instanceof Node && this.hostElement.contains(event.target));
+        if (isEventInsideTooltip) {
+            this.persistOnHoverDismissed = false;
+            return;
+        }
+        this.persistOnHoverDismissed = true;
+        this.hideTooltip();
+    }
     focusCaptureHandler() {
         this.checkFocusClass();
     }
@@ -69,6 +83,10 @@ export class Q2Tooltip {
     // #region Watchers
     labelChanged() {
         this.propagateTooltip();
+        this.cachedTooltipHeight = null; // Invalidate cache
+        if (this.shouldBeVisible || this.persistent) {
+            this.adjustSide();
+        }
     }
     // #endregion
     // #region Local Methods
@@ -78,16 +96,38 @@ export class Q2Tooltip {
         return this.hostElement.matches(':hover, :focus-within') && !this.persistOnHoverDismissed;
     }
     adjustSide() {
-        const { left: hostLeft, right: hostRight, width: hostWidth } = this.hostElement.getBoundingClientRect();
+        const { left: hostLeft, right: hostRight, width: hostWidth, top: hostTop, bottom: hostBottom, } = this.hostElement.getBoundingClientRect();
         if (!hostLeft || !hostWidth)
             return;
+        // Find the constraining container (modal, dialog, or any overflow:hidden ancestor)
+        const constrainingContainer = this.findConstrainingContainer();
+        const containerRect = constrainingContainer.getBoundingClientRect();
         const { width, paddingLeft, paddingRight } = window.getComputedStyle(this.tooltipElement, '::after');
         const tooltipWidth = Number(width.replace(/[px]/g, '')) +
             Number(paddingLeft.replace(/[px]/g, '')) +
             Number(paddingRight.replace(/[px]/g, ''));
         const extraMargin = ['se', 'sw', 'ne', 'nw'].includes(this.position) ? 0 : 15;
-        const distanceLeft = hostLeft + hostWidth / 2;
-        const distanceRight = window.innerWidth - hostRight + +hostWidth / 2;
+        // Calculate available space relative to constraining container
+        const distanceLeft = hostLeft - containerRect.left + hostWidth / 2;
+        const distanceRight = containerRect.right - hostRight + hostWidth / 2;
+        const distanceTop = hostTop - containerRect.top;
+        const distanceBottom = containerRect.bottom - hostBottom;
+        // Calculate tooltip height dynamically
+        const tooltipHeight = this.calculateTooltipHeight();
+        // Check if we need to flip vertical position
+        if (['n', 'ne', 'nw'].includes(this.position) && distanceTop < tooltipHeight) {
+            // Not enough space above, try flipping to bottom
+            if (distanceBottom >= tooltipHeight) {
+                this.position = this.position.replace('n', 's');
+            }
+        }
+        else if (['s', 'se', 'sw'].includes(this.position) && distanceBottom < tooltipHeight) {
+            // Not enough space below, try flipping to top
+            if (distanceTop >= tooltipHeight) {
+                this.position = this.position.replace('s', 'n');
+            }
+        }
+        // Adjust horizontal positioning
         if (['ne', 'se'].includes(this.position)) {
             if (tooltipWidth > distanceRight) {
                 this.tooltipElement.style.setProperty('--comp-offset-translate', `-${Math.round(tooltipWidth - distanceRight + extraMargin)}px`);
@@ -109,6 +149,19 @@ export class Q2Tooltip {
                 this.tooltipElement.style.setProperty('--comp-offset-translate', `0px`);
             }
         }
+        // Handle east/west positioning
+        if (this.position === 'e' && tooltipWidth > distanceRight) {
+            // Not enough space on right, flip to left
+            if (distanceLeft >= tooltipWidth) {
+                this.position = 'w';
+            }
+        }
+        else if (this.position === 'w' && tooltipWidth > distanceLeft) {
+            // Not enough space on left, flip to right
+            if (distanceRight >= tooltipWidth) {
+                this.position = 'e';
+            }
+        }
     }
     animationEndHandler() {
         this.animationEndCount = this.animationEndCount + 1;
@@ -121,6 +174,54 @@ export class Q2Tooltip {
             this.animationEndCount = 0;
         }
     }
+    calculateTooltipHeight() {
+        if (this.cachedTooltipHeight !== null) {
+            return this.cachedTooltipHeight;
+        }
+        try {
+            const styles = window.getComputedStyle(this.tooltipElement, '::after');
+            // Try to get computed height first
+            const computedHeight = styles.height;
+            if (computedHeight && computedHeight !== 'auto' && computedHeight !== '0px') {
+                const height = Number(computedHeight.replace(/px/g, ''));
+                const paddingTop = Number(styles.paddingTop.replace(/px/g, ''));
+                const paddingBottom = Number(styles.paddingBottom.replace(/px/g, ''));
+                this.cachedTooltipHeight = height + paddingTop + paddingBottom;
+                return this.cachedTooltipHeight;
+            }
+            // Fallback: Calculate based on text and wrapping
+            const width = Number(styles.width.replace(/px/g, ''));
+            const paddingLeft = Number(styles.paddingLeft.replace(/px/g, ''));
+            const paddingRight = Number(styles.paddingRight.replace(/px/g, ''));
+            const paddingTop = Number(styles.paddingTop.replace(/px/g, ''));
+            const paddingBottom = Number(styles.paddingBottom.replace(/px/g, ''));
+            const fontSize = Number(styles.fontSize.replace(/px/g, ''));
+            const lineHeightStr = styles.lineHeight;
+            const lineHeight = lineHeightStr === 'normal' ? fontSize * 1.5 : Number(lineHeightStr.replace(/px/g, ''));
+            const contentWidth = width - paddingLeft - paddingRight;
+            const whiteSpace = styles.whiteSpace;
+            // Single-line tooltip (white-space: pre)
+            if (whiteSpace === 'pre' || !this.multiline) {
+                return lineHeight + paddingTop + paddingBottom;
+            }
+            // Multi-line tooltip: estimate line count
+            const text = this.label || '';
+            const avgCharWidth = fontSize * 0.5; // Approximation for character width
+            const charsPerLine = Math.floor(contentWidth / avgCharWidth);
+            const estimatedLines = Math.max(1, Math.ceil(text.length / charsPerLine));
+            const totalHeight = estimatedLines * lineHeight + paddingTop + paddingBottom;
+            // Add some buffer for safety (10px)
+            this.cachedTooltipHeight = Math.ceil(totalHeight) + 10;
+            return this.cachedTooltipHeight;
+        }
+        catch (error) {
+            console.warn('Failed to calculate tooltip height, using fallback', error);
+            // Fallback based on multiline mode
+            const fallbackHeight = this.multiline ? 80 : 50;
+            this.cachedTooltipHeight = fallbackHeight;
+            return fallbackHeight;
+        }
+    }
     checkFocusClass() {
         if (!this.shouldBeVisible)
             return;
@@ -137,6 +238,24 @@ export class Q2Tooltip {
             }
         }
     }
+    findConstrainingContainer() {
+        let element = this.hostElement.parentElement;
+        while (element && element !== document.body) {
+            const style = window.getComputedStyle(element);
+            const overflow = style.overflow + style.overflowX + style.overflowY;
+            // Check if this element constrains overflow
+            if (overflow.includes('hidden') || overflow.includes('auto') || overflow.includes('scroll')) {
+                return element;
+            }
+            // Check for q2-modal interior element
+            if (element.tagName === 'DIALOG' || element.classList.contains('interior')) {
+                return element;
+            }
+            element = element.parentElement;
+        }
+        // If no constraining container found, use the viewport
+        return document.documentElement;
+    }
     findFocusVisibleElement(element) {
         if (!element)
             return;
@@ -359,6 +478,18 @@ export class Q2Tooltip {
     }
     static get listeners() {
         return [{
+                "name": "click",
+                "method": "documentPointerHandler",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "touchstart",
+                "method": "documentPointerHandler",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
                 "name": "focus",
                 "method": "focusCaptureHandler",
                 "target": undefined,
@@ -395,7 +526,7 @@ export class Q2Tooltip {
                 "capture": false,
                 "passive": true
             }, {
-                "name": "mouseclick",
+                "name": "click",
                 "method": "handleMouseOver",
                 "target": undefined,
                 "capture": false,

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, 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"]}
+{"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    cachedTooltipHeight: number | null = null;\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('click', { target: 'document' })\n    @Listen('touchstart', { target: 'document' })\n    documentPointerHandler(event: Event) {\n        if (!this.focusClass || this.persistent) return;\n        const isEventInsideTooltip =\n            event.composedPath?.().includes(this.hostElement) ||\n            (event.target instanceof Node && this.hostElement.contains(event.target));\n        if (isEventInsideTooltip) {\n            this.persistOnHoverDismissed = false;\n            return;\n        }\n        this.persistOnHoverDismissed = true;\n        this.hideTooltip();\n    }\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('click')\n    handleMouseOver() {\n        this.adjustSide();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('label')\n    labelChanged() {\n        this.propagateTooltip();\n        this.cachedTooltipHeight = null; // Invalidate cache\n        if (this.shouldBeVisible || this.persistent) {\n            this.adjustSide();\n        }\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 {\n            left: hostLeft,\n            right: hostRight,\n            width: hostWidth,\n            top: hostTop,\n            bottom: hostBottom,\n        } = this.hostElement.getBoundingClientRect();\n        if (!hostLeft || !hostWidth) return;\n\n        // Find the constraining container (modal, dialog, or any overflow:hidden ancestor)\n        const constrainingContainer = this.findConstrainingContainer();\n        const containerRect = constrainingContainer.getBoundingClientRect();\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        // Calculate available space relative to constraining container\n        const distanceLeft = hostLeft - containerRect.left + hostWidth / 2;\n        const distanceRight = containerRect.right - hostRight + hostWidth / 2;\n        const distanceTop = hostTop - containerRect.top;\n        const distanceBottom = containerRect.bottom - hostBottom;\n\n        // Calculate tooltip height dynamically\n        const tooltipHeight = this.calculateTooltipHeight();\n\n        // Check if we need to flip vertical position\n        if (['n', 'ne', 'nw'].includes(this.position) && distanceTop < tooltipHeight) {\n            // Not enough space above, try flipping to bottom\n            if (distanceBottom >= tooltipHeight) {\n                this.position = this.position.replace('n', 's') as any;\n            }\n        } else if (['s', 'se', 'sw'].includes(this.position) && distanceBottom < tooltipHeight) {\n            // Not enough space below, try flipping to top\n            if (distanceTop >= tooltipHeight) {\n                this.position = this.position.replace('s', 'n') as any;\n            }\n        }\n\n        // Adjust horizontal positioning\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        // Handle east/west positioning\n        if (this.position === 'e' && tooltipWidth > distanceRight) {\n            // Not enough space on right, flip to left\n            if (distanceLeft >= tooltipWidth) {\n                this.position = 'w';\n            }\n        } else if (this.position === 'w' && tooltipWidth > distanceLeft) {\n            // Not enough space on left, flip to right\n            if (distanceRight >= tooltipWidth) {\n                this.position = 'e';\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    calculateTooltipHeight(): number {\n        if (this.cachedTooltipHeight !== null) {\n            return this.cachedTooltipHeight;\n        }\n\n        try {\n            const styles = window.getComputedStyle(this.tooltipElement, '::after');\n\n            // Try to get computed height first\n            const computedHeight = styles.height;\n            if (computedHeight && computedHeight !== 'auto' && computedHeight !== '0px') {\n                const height = Number(computedHeight.replace(/px/g, ''));\n                const paddingTop = Number(styles.paddingTop.replace(/px/g, ''));\n                const paddingBottom = Number(styles.paddingBottom.replace(/px/g, ''));\n                this.cachedTooltipHeight = height + paddingTop + paddingBottom;\n                return this.cachedTooltipHeight;\n            }\n\n            // Fallback: Calculate based on text and wrapping\n            const width = Number(styles.width.replace(/px/g, ''));\n            const paddingLeft = Number(styles.paddingLeft.replace(/px/g, ''));\n            const paddingRight = Number(styles.paddingRight.replace(/px/g, ''));\n            const paddingTop = Number(styles.paddingTop.replace(/px/g, ''));\n            const paddingBottom = Number(styles.paddingBottom.replace(/px/g, ''));\n\n            const fontSize = Number(styles.fontSize.replace(/px/g, ''));\n            const lineHeightStr = styles.lineHeight;\n            const lineHeight = lineHeightStr === 'normal' ? fontSize * 1.5 : Number(lineHeightStr.replace(/px/g, ''));\n\n            const contentWidth = width - paddingLeft - paddingRight;\n            const whiteSpace = styles.whiteSpace;\n\n            // Single-line tooltip (white-space: pre)\n            if (whiteSpace === 'pre' || !this.multiline) {\n                return lineHeight + paddingTop + paddingBottom;\n            }\n\n            // Multi-line tooltip: estimate line count\n            const text = this.label || '';\n            const avgCharWidth = fontSize * 0.5; // Approximation for character width\n            const charsPerLine = Math.floor(contentWidth / avgCharWidth);\n            const estimatedLines = Math.max(1, Math.ceil(text.length / charsPerLine));\n\n            const totalHeight = estimatedLines * lineHeight + paddingTop + paddingBottom;\n\n            // Add some buffer for safety (10px)\n            this.cachedTooltipHeight = Math.ceil(totalHeight) + 10;\n            return this.cachedTooltipHeight;\n        } catch (error) {\n            console.warn('Failed to calculate tooltip height, using fallback', error);\n            // Fallback based on multiline mode\n            const fallbackHeight = this.multiline ? 80 : 50;\n            this.cachedTooltipHeight = fallbackHeight;\n            return fallbackHeight;\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    findConstrainingContainer(): Element {\n        let element: Element = this.hostElement.parentElement;\n\n        while (element && element !== document.body) {\n            const style = window.getComputedStyle(element);\n            const overflow = style.overflow + style.overflowX + style.overflowY;\n\n            // Check if this element constrains overflow\n            if (overflow.includes('hidden') || overflow.includes('auto') || overflow.includes('scroll')) {\n                return element;\n            }\n\n            // Check for q2-modal interior element\n            if (element.tagName === 'DIALOG' || element.classList.contains('interior')) {\n                return element;\n            }\n\n            element = element.parentElement;\n        }\n\n        // If no constraining container found, use the viewport\n        return document.documentElement;\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/q2-tooltip/test/q2-tooltip-test.vr.js

@@ -0,0 +1,76 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const TRIGGER = `<q2-btn intent="workflow-primary"><span>Trigger</span></q2-btn>`;
+// Pad the wrapper so the tooltip has room to render in any direction without clipping.
+const wrap = (inner) => `<div style="padding: 80px; display: inline-block;">${inner}</div>`;
+// Use `immediate` so hover doesn't have to wait through the 1s delay before the
+// tooltip appears. Don't use `persistent` — it skips animation but also doesn't
+// trigger the same render path as a real hover, which causes positioning bugs.
+const tooltipHtml = (position, label = 'Tooltip text') => wrap(`<q2-tooltip label="${label}" position="${position}" immediate>${TRIGGER}</q2-tooltip>`);
+const VARIANTS = [
+    { name: 'position-n', html: tooltipHtml('n'), states: ['resting'] },
+    { name: 'position-s', html: tooltipHtml('s'), states: ['resting'] },
+    { name: 'position-e', html: tooltipHtml('e'), states: ['resting'] },
+    { name: 'position-w', html: tooltipHtml('w'), states: ['resting'] },
+    { name: 'position-ne', html: tooltipHtml('ne'), states: ['resting'] },
+    { name: 'position-nw', html: tooltipHtml('nw'), states: ['resting'] },
+    { name: 'position-se', html: tooltipHtml('se'), states: ['resting'] },
+    { name: 'position-sw', html: tooltipHtml('sw'), states: ['resting'] },
+    {
+        name: 'multiline',
+        html: wrap(`<q2-tooltip label="A long tooltip that wraps across multiple lines for readability." position="n" immediate multiline>${TRIGGER}</q2-tooltip>`),
+        states: ['resting'],
+        multiline: true,
+    },
+    {
+        name: 'block',
+        html: `<div style="padding: 80px;"><q2-tooltip label="Block tooltip" position="n" immediate block>${TRIGGER}</q2-tooltip></div>`,
+        states: ['resting'],
+        block: true,
+    },
+    {
+        name: 'focusable',
+        html: wrap(`<q2-tooltip label="Focusable tooltip" position="n" focusable><span>Static text</span></q2-tooltip>`),
+        states: ['focus'],
+    },
+];
+// Hover the q2-tooltip host element to surface the bubble. waitForFunction
+// confirms the bubble is visible (opacity > 0) before snapshotting.
+const hoverToShow = async (page) => {
+    await page.locator('q2-tooltip').first().hover();
+    await page.waitForFunction(() => {
+        var _a;
+        const tt = document.querySelector('q2-tooltip');
+        const bubble = (_a = tt === null || tt === void 0 ? void 0 : tt.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tooltip');
+        if (!bubble)
+            return false;
+        const after = window.getComputedStyle(bubble, '::after');
+        return after.opacity === '1' && after.visibility === 'visible';
+    });
+};
+const restingCase = (variant, theme) => {
+    test(`q2-tooltip--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await hoverToShow(page);
+        await expect(page).toHaveScreenshot(`q2-tooltip--${variant.name}--resting--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-tooltip--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, variant.html, { theme });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-tooltip--${variant.name}--focus--${theme}.png`);
+    });
+};
+test.describe('q2-tooltip — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            if (variant.states.includes('resting'))
+                restingCase(variant, theme);
+            if (variant.states.includes('focus'))
+                focusCase(variant, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-tooltip-test.vr.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-tooltip-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-tooltip/test/q2-tooltip-test.vr.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\ntype State = 'resting' | 'focus';\ntype Variant = { name: string; html: string; states: State[]; multiline?: boolean; block?: boolean };\n\nconst TRIGGER = `<q2-btn intent=\"workflow-primary\"><span>Trigger</span></q2-btn>`;\n\n// Pad the wrapper so the tooltip has room to render in any direction without clipping.\nconst wrap = (inner: string) => `<div style=\"padding: 80px; display: inline-block;\">${inner}</div>`;\n\n// Use `immediate` so hover doesn't have to wait through the 1s delay before the\n// tooltip appears. Don't use `persistent` — it skips animation but also doesn't\n// trigger the same render path as a real hover, which causes positioning bugs.\nconst tooltipHtml = (position: string, label = 'Tooltip text') =>\n    wrap(`<q2-tooltip label=\"${label}\" position=\"${position}\" immediate>${TRIGGER}</q2-tooltip>`);\n\nconst VARIANTS: Variant[] = [\n    { name: 'position-n', html: tooltipHtml('n'), states: ['resting'] },\n    { name: 'position-s', html: tooltipHtml('s'), states: ['resting'] },\n    { name: 'position-e', html: tooltipHtml('e'), states: ['resting'] },\n    { name: 'position-w', html: tooltipHtml('w'), states: ['resting'] },\n    { name: 'position-ne', html: tooltipHtml('ne'), states: ['resting'] },\n    { name: 'position-nw', html: tooltipHtml('nw'), states: ['resting'] },\n    { name: 'position-se', html: tooltipHtml('se'), states: ['resting'] },\n    { name: 'position-sw', html: tooltipHtml('sw'), states: ['resting'] },\n    {\n        name: 'multiline',\n        html: wrap(\n            `<q2-tooltip label=\"A long tooltip that wraps across multiple lines for readability.\" position=\"n\" immediate multiline>${TRIGGER}</q2-tooltip>`\n        ),\n        states: ['resting'],\n        multiline: true,\n    },\n    {\n        name: 'block',\n        html: `<div style=\"padding: 80px;\"><q2-tooltip label=\"Block tooltip\" position=\"n\" immediate block>${TRIGGER}</q2-tooltip></div>`,\n        states: ['resting'],\n        block: true,\n    },\n    {\n        name: 'focusable',\n        html: wrap(\n            `<q2-tooltip label=\"Focusable tooltip\" position=\"n\" focusable><span>Static text</span></q2-tooltip>`\n        ),\n        states: ['focus'],\n    },\n];\n\n// Hover the q2-tooltip host element to surface the bubble. waitForFunction\n// confirms the bubble is visible (opacity > 0) before snapshotting.\nconst hoverToShow = async (page: import('@playwright/test').Page) => {\n    await page.locator('q2-tooltip').first().hover();\n    await page.waitForFunction(() => {\n        const tt = document.querySelector('q2-tooltip');\n        const bubble = tt?.shadowRoot?.querySelector<HTMLElement>('.tooltip');\n        if (!bubble) return false;\n        const after = window.getComputedStyle(bubble, '::after');\n        return after.opacity === '1' && after.visibility === 'visible';\n    });\n};\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-tooltip--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await hoverToShow(page);\n        await expect(page).toHaveScreenshot(`q2-tooltip--${variant.name}--resting--${theme}.png`);\n    });\n};\n\nconst focusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-tooltip--${variant.name}--focus — ${theme}`, async ({ page }) => {\n        await setupPage(page, variant.html, { theme });\n        await page.keyboard.press('Tab');\n        await expect(page).toHaveScreenshot(`q2-tooltip--${variant.name}--focus--${theme}.png`);\n    });\n};\n\ntest.describe('q2-tooltip — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            if (variant.states.includes('resting')) restingCase(variant, theme);\n            if (variant.states.includes('focus')) focusCase(variant, theme);\n        }\n    }\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: '58a67b201accff4cdb0cf19172f3a91a6c8effd5', 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: '14ea6040e9a7c5c019d982e3f9e84227f0144d19' }, h("slot", { key: '2f23163c833f14e5b787f35d7af3fe162a6d3fb7', name: "loading-wrapper" }), h("iframe", { key: '9bdaf2ad2df5d0a0763aae906c7227d7e05052b7', 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: '064545f0fed8a7d7b7aac0ec36179d745fc350af', 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: 'b74988726b4e15f377d76d9af1921a0c68027d8d' }, h("slot", { key: 'e4e020b962bc6d21520a5d394a4b0a4ecc060476', name: "loading-wrapper" }), h("iframe", { key: 'c33f35f9c4a49e23bfe5ee9b1ad2100a746e2a1f', 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: '8aeea96ffde0dfb337dd84e0346951d075b4d233', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: 'c81c5ad3f2c93436284fe928be54b58836ff0fff' }))));
+        }))) : (''))), h("div", { key: 'c6e4e3295cbf6dbdcddb7f8109a19bfe3a4975dd', class: "slot-wrapper", hidden: this.selected && this.provided !== undefined && !this.provided }, h("slot", { key: 'd2db52e88ddfe939b119217ca3c69ed93e9d4e38' }))));
     }
     static get is() { return "tecton-tab-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/component.js

@@ -8,7 +8,13 @@ export const hasValidParent = (hostElement, requiredParents) => {
 };
 export const hasValidAncestor = (hostElement, requiredParents) => {
     const selector = Array.isArray(requiredParents) ? requiredParents.join(',').toLowerCase() : requiredParents;
-    const isValid = !!hostElement.closest(selector);
+    // First try closest() for direct ancestors (works for non-shadow cases)
+    let isValid = !!hostElement.closest(selector);
+    // If not found and element is slotted, check the slot's parent
+    if (!isValid && hostElement.assignedSlot) {
+        // Walk up from the slot through its ancestors
+        isValid = !!hostElement.assignedSlot.closest(selector);
+    }
     if (!isValid) {
         console.warn(`${hostElement.tagName} requires ${selector} as a parent`);
     }

package/dist/collection/utils/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/utils/component.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,WAAoB,EAAE,eAAkC,EAAW,EAAE;IAChG,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC;IAC5G,MAAM,OAAO,GAAG,CAAC,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC9D,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,OAAO,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,OAAO,aAAa,QAAQ,cAAc,CAAC,CAAC;IAC5E,CAAC;IACD,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,WAAoB,EAAE,eAAkC,EAAW,EAAE;IAClG,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC;IAC5G,MAAM,OAAO,GAAG,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAChD,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,OAAO,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,OAAO,aAAa,QAAQ,cAAc,CAAC,CAAC;IAC5E,CAAC;IACD,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,OAAgB,EAAE,eAAkC,EAAW,EAAE;IAC9F,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC;QACtC,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAC3C,CAAC,CAAC,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC,CAAC;IACtC,MAAM,OAAO,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;IAChG,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,OAAO,iBAAiB,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACjF,CAAC;IACD,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,OAAgB,EAAE,eAAkC,EAAQ,EAAE;IACzF,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC;QACtC,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAC3C,CAAC,CAAC,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC,CAAC;IAEtC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;QACtC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC;YAC1C,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,OAAO,iCAAiC,OAAO,CAAC,OAAO,wBAAwB,CAAC,CAAC;YACpG,EAAE,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;IACL,CAAC,CAAC,CAAC;AACP,CAAC,CAAC","sourcesContent":["export const hasValidParent = (hostElement: Element, requiredParents: string | string[]): boolean => {\n    const selector = Array.isArray(requiredParents) ? requiredParents.join(',').toLowerCase() : requiredParents;\n    const isValid = !!hostElement.parentElement.matches(selector);\n    if (!isValid) {\n        console.warn(`${hostElement.tagName} requires ${selector} as a parent`);\n    }\n    return isValid;\n};\n\nexport const hasValidAncestor = (hostElement: Element, requiredParents: string | string[]): boolean => {\n    const selector = Array.isArray(requiredParents) ? requiredParents.join(',').toLowerCase() : requiredParents;\n    const isValid = !!hostElement.closest(selector);\n    if (!isValid) {\n        console.warn(`${hostElement.tagName} requires ${selector} as a parent`);\n    }\n    return isValid;\n};\n\nexport const hasValidChildren = (element: Element, allowedChildren: string | string[]): boolean => {\n    const app = Array.isArray(allowedChildren)\n        ? allowedChildren.map(x => x.toLowerCase())\n        : [allowedChildren.toLowerCase()];\n    const isValid = !Array.from(element.children).some(x => !app.includes(x.tagName.toLowerCase()));\n    if (!isValid) {\n        console.warn(`${element.tagName} expects only ${app.join(',')} as children`);\n    }\n    return isValid;\n};\n\nexport const filterChildren = (element: Element, allowedChildren: string | string[]): void => {\n    const app = Array.isArray(allowedChildren)\n        ? allowedChildren.map(x => x.toLowerCase())\n        : [allowedChildren.toLowerCase()];\n\n    Array.from(element.children).forEach(el => {\n        if (!app.includes(el.tagName.toLowerCase())) {\n            console.warn(`${el.tagName} is not allowed as a child of ${element.tagName} and has been removed.`);\n            el.remove();\n        }\n    });\n};\n"]}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/utils/component.ts"],"names":[],"mappings":"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","sourcesContent":["export const hasValidParent = (hostElement: Element, requiredParents: string | string[]): boolean => {\n    const selector = Array.isArray(requiredParents) ? requiredParents.join(',').toLowerCase() : requiredParents;\n    const isValid = !!hostElement.parentElement.matches(selector);\n    if (!isValid) {\n        console.warn(`${hostElement.tagName} requires ${selector} as a parent`);\n    }\n    return isValid;\n};\n\nexport const hasValidAncestor = (hostElement: HTMLElement, requiredParents: string | string[]): boolean => {\n    const selector = Array.isArray(requiredParents) ? requiredParents.join(',').toLowerCase() : requiredParents;\n\n    // First try closest() for direct ancestors (works for non-shadow cases)\n    let isValid = !!hostElement.closest(selector);\n\n    // If not found and element is slotted, check the slot's parent\n    if (!isValid && hostElement.assignedSlot) {\n        // Walk up from the slot through its ancestors\n        isValid = !!hostElement.assignedSlot.closest(selector);\n    }\n\n    if (!isValid) {\n        console.warn(`${hostElement.tagName} requires ${selector} as a parent`);\n    }\n    return isValid;\n};\n\nexport const hasValidChildren = (element: Element, allowedChildren: string | string[]): boolean => {\n    const app = Array.isArray(allowedChildren)\n        ? allowedChildren.map(x => x.toLowerCase())\n        : [allowedChildren.toLowerCase()];\n    const isValid = !Array.from(element.children).some(x => !app.includes(x.tagName.toLowerCase()));\n    if (!isValid) {\n        console.warn(`${element.tagName} expects only ${app.join(',')} as children`);\n    }\n    return isValid;\n};\n\nexport const filterChildren = (element: Element, allowedChildren: string | string[]): void => {\n    const app = Array.isArray(allowedChildren)\n        ? allowedChildren.map(x => x.toLowerCase())\n        : [allowedChildren.toLowerCase()];\n\n    Array.from(element.children).forEach(el => {\n        if (!app.includes(el.tagName.toLowerCase())) {\n            console.warn(`${el.tagName} is not allowed as a child of ${element.tagName} and has been removed.`);\n            el.remove();\n        }\n    });\n};\n"]}

package/dist/collection/utils/index.js

@@ -174,7 +174,7 @@ export function getBrowserInfo() {
     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('_', '.');
+        version = userAgent.split(' iPhone OS')[1].trim().split(/\s/)[0].replace(/_/g, '.');
     }
     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)