q2-tecton-elements 1.67.2 → 1.68.0

package/dist/q2-tecton-elements/q2-toast.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2ToastCss","Q2Toast","constructor","hostRef","this","closeAnimationTimeMs","isClosing","isOpen","autoClose","closable","duration","hideIcon","showPersistent","size","type","onCloseClick","dismiss","disconnectedCallback","clearAutoClose","clearCloseTimer","componentDidLoad","startAutoClose","onAutoCloseChange","onShowPersistentChange","onSizeChange","ariaLive","resolvedType","ariaRole","hasIconSlot","hasSlotContent","hostElement","isLarge","resolvedIcon","icon","iconMap","success","warning","alert","info","shouldShowIcon","showFooter","hasActions","hasTime","time","srTypeLabel","labelMap","loc","default","toastClasses","classes","push","join","autoCloseTimer","clearTimeout","undefined","closeTimer","reason","toastEl","_a","shadowRoot","querySelector","height","Math","ceil","getBoundingClientRect","style","setProperty","setTimeout","tctClose","emit","renderIcon","h","name","render","class","role","tctTitle","onClick","message"],"sources":["src/components/q2-toast/q2-toast.scss?tag=q2-toast&encapsulation=shadow","src/components/q2-toast/q2-toast.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n\n.toast {\n    --comp-accent-width: 1px;\n    --comp-icon-size: 32px;\n    --comp-icon-bg: transparent;\n    --comp-text-color: #{var-list(--tct-toast-text, --tct-gray-2, --app-gray-2, #333333)};\n    --comp-subtle-color: #{var-list(--tct-toast-subtle, --tct-gray-5, --app-gray-5, #6b6b6b)};\n\n\n    --comp-color-success: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n    --comp-color-info: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n    --comp-color-warning:  #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n    --comp-color-alert: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n    --comp-color-default: white;\n\n    &.success {\n        border-color: var(--comp-color-success);\n        background-color: var(--comp-color-success);\n        --comp-icon-bg: #e7f5e3;\n    }\n\n    &.info {\n        border-color: var(--comp-color-info);\n        background-color: var(--comp-color-info);\n        --comp-icon-bg: #e6f1fb;\n    }\n\n    &.warning {\n        border-color: var(--comp-color-warning);\n        background-color: var(--comp-color-warning);\n        --comp-icon-bg: #fff0df;\n    }\n\n    &.alert {\n        border-color: var(--comp-color-alert);\n        background-color: var(--comp-color-alert);\n        --comp-icon-bg: #fde6e6;\n    }\n\n    display: flex;\n    flex-direction: column;\n    gap: var-list(--tct-toast-gap, --app-scale-2x, 10px);\n    padding-left: 3px;\n    border-radius: 5px;\n    border: 1px solid transparent;\n    background: var-list(--tct-toast-background, --tct-gray-14, --app-gray-l3, #ffffff);\n    color: var(--comp-text-color);\n    box-shadow: var-list(--tct-toast-shadow, --app-shadow-2, unquote('0 12px 24px rgb(0 0 0 / 0.12)'));\n    overflow:hidden;\n\n    &.is-closing{\n        animation-name: shrink;\n        animation-duration: 500ms;\n        animation-timing-function: linear;\n        animation-fill-mode: forwards;\n        transform-origin: top;\n        overflow: hidden;\n    }\n\n    &.small {\n\n        & .container{\n            padding: var-list(--tct-toast-padding-small, --app-scale-2x, 10px);\n        }\n    }\n\n    &.default {\n        --comp-border-color: #{var-list(--tct-toast-border, --tct-gray-9, --app-gray-4, #d1d1d1)};\n        --comp-icon-bg: #{var-list(--tct-toast-icon-bg, --tct-gray-12, --app-gray-l2, #f3f3f3)};\n        border-color: var(--comp-border-color);\n    }\n}\n\n.header {\n    display: grid;\n    grid-template-columns: var(--comp-icon-size) 1fr auto;\n    gap: var-list(--tct-toast-gap, --app-scale-2x, 10px);\n    align-items: center;\n}\n\n.toast.no-icon .header {\n    grid-template-columns: 1fr auto;\n}\n\n.icon {\n    width: var(--comp-icon-size);\n    height: var(--comp-icon-size);\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    background: var(--comp-icon-bg);\n}\n\n.icon q2-icon {\n    --tct-icon-size: calc(var(--comp-icon-size) - 6px);\n    --tct-icon-stroke-primary: var(--comp-border-color);\n    --tct-icon-stroke-secondary: var(--comp-border-color);\n    --tct-icon-fill: var(--comp-border-color);\n}\n\n.title {\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n}\n\n.title-text {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.content {\n    color: var(--comp-subtle-color);\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.footer {\n    margin-top: var-list(--tct-toast-footer-gap, --app-scale-2x, 10px);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var-list(--tct-toast-footer-spacing, --app-scale-2x, 10px);\n    color: var(--comp-subtle-color);\n    font-size: 0.875rem;\n}\n\n.time {\n    white-space: nowrap;\n}\n\n.actions {\n    display: inline-flex;\n    align-items: center;\n    gap: var-list(--tct-toast-actions-gap, --app-scale-2x, 10px);\n}\n\n.close {\n    border: none;\n    background: transparent;\n    padding: 2px;\n    margin-left: var-list(--tct-toast-close-offset, --app-scale-1x, 5px);\n    color: var(--comp-subtle-color);\n    cursor: pointer;\n}\n\n.close q2-icon {\n    --tct-icon-size: 18px;\n}\n\n.container {\n    padding: var-list(--tct-toast-padding, --app-scale-3x, 15px);\n    background-color: white;\n}\n\n@keyframes shrink {\n  from {\n    transform: scale(1);\n    height: var(--toast-close-height, 0px);\n    opacity: 1;\n  }\n\n  to {\n    transform:scale(0);\n    height: 0;\n    opacity: 0;\n  }\n}\n","import { Component, Prop, h, ComponentInterface, Event, EventEmitter, Element, State, Watch } from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\n/**\n * @slot icon - Optional slot for a custom icon.\n * @slot title - Optional slot for the title content.\n * @slot - Optional slot for the message content.\n * @slot time - Optional slot for the time marker.\n * @slot actions - Optional slot for action links in the footer.\n */\n@Component({ tag: 'q2-toast', shadow: true, styleUrl: 'q2-toast.scss' })\nexport class Q2Toast implements ComponentInterface {\n    // #region Own Properties\n\n    private autoCloseTimer?: ReturnType<typeof setTimeout>;\n    private closeAnimationTimeMs = 500;\n    private closeTimer?: ReturnType<typeof setTimeout>;\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    isClosing: boolean = false;\n\n    @State()\n    isOpen: boolean = true;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Enables automatic dismissal after a duration. */\n    @Prop({ reflect: true })\n    autoClose: boolean = false;\n\n    /** Controls whether the close button is displayed. */\n    @Prop({ reflect: true })\n    closable: boolean = true;\n\n    /** The duration in milliseconds before auto dismissal. */\n    @Prop({ reflect: true })\n    duration: number = 7000;\n\n    /** Manually hide the icon where it would otherwise appear. */\n    @Prop({ reflect: true })\n    hideIcon: boolean = false;\n\n    /** Optional icon type to display. */\n    @Prop()\n    icon: string;\n\n    /** Optional message for the toast body. */\n    @Prop()\n    message: string;\n\n    /**\n     * Convenience prop for persistent toasts. When true, sets autoClose to false and closable to true.\n     * Aligns with acceptance criteria for showPersistent behavior.\n     */\n    @Prop({ reflect: true })\n    showPersistent: boolean = false;\n\n    /** Controls the visual size of the toast. */\n    @Prop({ reflect: true })\n    size: 'large' | 'small' = 'large';\n\n    /** Optional title for the toast. */\n    @Prop()\n    tctTitle: string;\n\n    /** Optional time marker for the footer. */\n    @Prop()\n    time: string;\n\n    /** The visual status of the toast. */\n    @Prop({ reflect: true })\n    type: 'warning' | 'info' | 'alert' | 'success' | 'default' | 'error' = 'default';\n\n    // #endregion\n    // #region Events\n\n    /** Emitted when the toast is dismissed. */\n    @Event()\n    tctClose: EventEmitter<{ reason: 'close' | 'timeout' }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.clearAutoClose();\n        this.clearCloseTimer();\n    }\n\n    componentDidLoad(): void {\n        this.startAutoClose();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('autoClose')\n    @Watch('duration')\n    onAutoCloseChange() {\n        this.startAutoClose();\n    }\n\n    @Watch('showPersistent')\n    onShowPersistentChange() {\n        if (this.showPersistent) {\n            this.autoClose = false;\n            this.closable = true;\n        } else {\n            this.autoClose = true;\n        }\n    }\n\n    @Watch('size')\n    onSizeChange() {\n        if (this.size === 'large') {\n            this.showPersistent = true;\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get ariaLive(): 'assertive' | 'polite' {\n        // Alert/error/warning types should be assertive, others polite\n        return this.resolvedType === 'alert' || this.resolvedType === 'warning' ? 'assertive' : 'polite';\n    }\n\n    get ariaRole(): 'alert' | 'status' {\n        // Alert/error/warning types use \"alert\" role, others use \"status\"\n        return this.resolvedType === 'alert' || this.resolvedType === 'warning' ? 'alert' : 'status';\n    }\n\n    get hasIconSlot(): boolean {\n        return hasSlotContent(this.hostElement, 'icon');\n    }\n\n    get isLarge(): boolean {\n        return this.size !== 'small';\n    }\n\n    get resolvedIcon(): string {\n        if (this.icon) return this.icon;\n\n        const iconMap = {\n            success: 'success-filled',\n            warning: 'warning-filled',\n            alert: 'error-filled',\n            info: 'info-filled',\n        };\n\n        return iconMap[this.resolvedType];\n    }\n\n    get resolvedType(): 'warning' | 'info' | 'alert' | 'success' | 'default' {\n        return this.type === 'error' ? 'alert' : this.type;\n    }\n\n    get shouldShowIcon(): boolean {\n        return (this.hasIconSlot || !!this.resolvedIcon) && !this.hideIcon;\n    }\n\n    get showFooter(): boolean {\n        const hasActions = hasSlotContent(this.hostElement, 'actions');\n        const hasTime = hasSlotContent(this.hostElement, 'time') || !!this.time;\n        return this.isLarge && (hasActions || hasTime);\n    }\n\n    get srTypeLabel(): string {\n        // Screen reader label for toast type\n        const labelMap = {\n            success: loc('tecton.element.toast.type.success'),\n            warning: loc('tecton.element.toast.type.warning'),\n            alert: loc('tecton.element.toast.type.alert'),\n            info: loc('tecton.element.toast.type.info'),\n            default: loc('tecton.element.toast.type.default'),\n        };\n        return labelMap[this.resolvedType] || '';\n    }\n\n    get toastClasses(): string {\n        const classes = ['toast', this.resolvedType, this.size];\n        classes.push(this.shouldShowIcon ? 'has-icon' : 'no-icon');\n        if (this.isClosing) classes.push('is-closing');\n        return classes.join(' ');\n    }\n\n    clearAutoClose() {\n        if (!this.autoCloseTimer) return;\n        clearTimeout(this.autoCloseTimer);\n        this.autoCloseTimer = undefined;\n    }\n\n    clearCloseTimer() {\n        if (!this.closeTimer) return;\n        clearTimeout(this.closeTimer);\n        this.closeTimer = undefined;\n    }\n\n    dismiss(reason: 'close' | 'timeout') {\n        if (!this.isOpen || this.isClosing) return;\n        this.clearAutoClose();\n        this.clearCloseTimer();\n        const toastEl = this.hostElement.shadowRoot?.querySelector('.toast') as HTMLElement | null;\n        if (toastEl) {\n            const height = Math.ceil(toastEl.getBoundingClientRect().height);\n            this.hostElement.style.setProperty('--toast-close-height', `${height}px`);\n            this.hostElement.style.setProperty('margin-bottom', '0');\n        }\n        this.isClosing = true;\n        this.closeTimer = setTimeout(() => {\n            this.isOpen = false;\n            this.isClosing = false;\n            this.tctClose.emit({ reason });\n        }, this.closeAnimationTimeMs);\n    }\n\n    onCloseClick = () => {\n        this.dismiss('close');\n    };\n\n    startAutoClose() {\n        this.clearAutoClose();\n        if (!this.autoClose || !this.duration || this.duration <= 0 || !this.isOpen) return;\n        this.autoCloseTimer = setTimeout(() => {\n            this.dismiss('timeout');\n        }, this.duration);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderIcon() {\n        if (this.hideIcon) return null;\n        if (this.hasIconSlot) return <slot name=\"icon\"></slot>;\n        if (!this.resolvedIcon) return null;\n        return <q2-icon type={this.resolvedIcon} />;\n    }\n\n    render() {\n        if (!this.isOpen) return null;\n\n        return (\n            <div\n                class={this.toastClasses}\n                role={this.ariaRole}\n                aria-live={this.ariaLive}\n                aria-atomic=\"true\"\n                aria-relevant=\"all\"\n            >\n                {this.srTypeLabel && <span class=\"sr\">{this.srTypeLabel}</span>}\n                <div class=\"container\">\n                    <div class=\"header\">\n                        {this.shouldShowIcon && <div class=\"icon\">{this.renderIcon()}</div>}\n                        <div class=\"title\">\n                            <span class=\"title-text\">\n                                <slot name=\"title\">{this.tctTitle}</slot>\n                            </span>\n                        </div>\n                        {this.closable && (\n                            <button\n                                class=\"close\"\n                                type=\"button\"\n                                aria-label={loc('tecton.element.toast.close')}\n                                onClick={this.onCloseClick}\n                            >\n                                <q2-icon type=\"close\" />\n                            </button>\n                        )}\n                    </div>\n                    {this.isLarge && (\n                        <div class=\"content\">\n                            {this.message}\n                            <slot />\n                        </div>\n                    )}\n                    {this.showFooter && (\n                        <div class=\"footer\">\n                            <div class=\"time\">\n                                <slot name=\"time\">{this.time}</slot>\n                            </div>\n                            <div class=\"actions\">\n                                <slot name=\"actions\"></slot>\n                            </div>\n                        </div>\n                    )}\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["q2ToastCss","Q2Toast","constructor","hostRef","this","closeAnimationTimeMs","isClosing","isOpen","autoClose","closable","duration","hideIcon","showPersistent","size","type","onCloseClick","dismiss","disconnectedCallback","clearAutoClose","clearCloseTimer","componentDidLoad","startAutoClose","onAutoCloseChange","onShowPersistentChange","onSizeChange","ariaLive","resolvedType","ariaRole","hasIconSlot","hasSlotContent","hostElement","isLarge","resolvedIcon","icon","iconMap","success","warning","alert","info","shouldShowIcon","showFooter","hasActions","hasTime","time","srTypeLabel","labelMap","loc","default","toastClasses","classes","push","join","autoCloseTimer","clearTimeout","undefined","closeTimer","reason","toastEl","_a","shadowRoot","querySelector","height","Math","ceil","getBoundingClientRect","style","setProperty","setTimeout","tctClose","emit","renderIcon","h","name","render","class","role","tctTitle","onClick","message"],"sources":["src/components/q2-toast/q2-toast.scss?tag=q2-toast&encapsulation=shadow","src/components/q2-toast/q2-toast.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n    display: block;\n}\n\n\n.toast {\n    --comp-accent-width: 1px;\n    --comp-icon-size: 32px;\n    --comp-icon-bg: transparent;\n    --comp-text-color: #{var-list(--tct-toast-text, --tct-gray-2, --app-gray-2, #333333)};\n    --comp-subtle-color: #{var-list(--tct-toast-subtle, --tct-gray-5, --app-gray-5, #6b6b6b)};\n\n\n    --comp-color-success: #{var-list(--tct-stoplight-success, --const-stoplight-success, #0e8a00)};\n    --comp-color-info: #{var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1)};\n    --comp-color-warning:  #{var-list(--tct-stoplight-warning, --const-stoplight-warning, #c35500)};\n    --comp-color-alert: #{var-list(--tct-stoplight-alert, --const-stoplight-alert, #d20a0a)};\n    --comp-color-default: white;\n\n    &.success {\n        border-color: var(--comp-color-success);\n        background-color: var(--comp-color-success);\n        --comp-icon-bg: #e7f5e3;\n    }\n\n    &.info {\n        border-color: var(--comp-color-info);\n        background-color: var(--comp-color-info);\n        --comp-icon-bg: #e6f1fb;\n    }\n\n    &.warning {\n        border-color: var(--comp-color-warning);\n        background-color: var(--comp-color-warning);\n        --comp-icon-bg: #fff0df;\n    }\n\n    &.alert {\n        border-color: var(--comp-color-alert);\n        background-color: var(--comp-color-alert);\n        --comp-icon-bg: #fde6e6;\n    }\n\n    display: flex;\n    flex-direction: column;\n    gap: var-list(--tct-toast-gap, --app-scale-2x, 10px);\n    padding-left: 3px;\n    border-radius: 5px;\n    border: 1px solid transparent;\n    background: var-list(--tct-toast-background, --tct-gray-14, --app-gray-l3, #ffffff);\n    color: var(--comp-text-color);\n    box-shadow: var-list(--tct-toast-shadow, --app-shadow-2, unquote('0 12px 24px rgb(0 0 0 / 0.12)'));\n    overflow:hidden;\n\n    &.is-closing{\n        animation-name: shrink;\n        animation-duration: 500ms;\n        animation-timing-function: linear;\n        animation-fill-mode: forwards;\n        transform-origin: top;\n        overflow: hidden;\n    }\n\n    &.small {\n\n        & .container{\n            padding: var-list(--tct-toast-padding-small, --app-scale-2x, 10px);\n        }\n    }\n\n    &.default {\n        --comp-border-color: #{var-list(--tct-toast-border, --tct-gray-9, --app-gray-4, #d1d1d1)};\n        --comp-icon-bg: #{var-list(--tct-toast-icon-bg, --tct-gray-12, --app-gray-l2, #f3f3f3)};\n        border-color: var(--comp-border-color);\n    }\n}\n\n.header {\n    display: grid;\n    grid-template-columns: var(--comp-icon-size) 1fr auto;\n    gap: var-list(--tct-toast-gap, --app-scale-2x, 10px);\n    align-items: center;\n}\n\n.toast.no-icon .header {\n    grid-template-columns: 1fr auto;\n}\n\n.icon {\n    width: var(--comp-icon-size);\n    height: var(--comp-icon-size);\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    background: var(--comp-icon-bg);\n}\n\n.icon q2-icon {\n    --tct-icon-size: calc(var(--comp-icon-size) - 6px);\n    --tct-icon-stroke-primary: var(--comp-border-color);\n    --tct-icon-stroke-secondary: var(--comp-border-color);\n    --tct-icon-fill: var(--comp-border-color);\n}\n\n.title {\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n}\n\n.title-text {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.content {\n    color: var(--comp-subtle-color);\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.footer {\n    margin-top: var-list(--tct-toast-footer-gap, --app-scale-2x, 10px);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var-list(--tct-toast-footer-spacing, --app-scale-2x, 10px);\n    color: var(--comp-subtle-color);\n    font-size: 0.875rem;\n}\n\n.time {\n    white-space: nowrap;\n}\n\n.actions {\n    display: inline-flex;\n    align-items: center;\n    gap: var-list(--tct-toast-actions-gap, --app-scale-2x, 10px);\n}\n\n.close {\n    border: none;\n    background: transparent;\n    padding: 2px;\n    margin-left: var-list(--tct-toast-close-offset, --app-scale-1x, 5px);\n    color: var(--comp-subtle-color);\n    cursor: pointer;\n}\n\n.close q2-icon {\n    --tct-icon-size: 18px;\n}\n\n.container {\n    padding: var-list(--tct-toast-padding, --app-scale-3x, 15px);\n    background-color: white;\n}\n\n@keyframes shrink {\n  from {\n    transform: scale(1);\n    height: var(--toast-close-height, 0px);\n    opacity: 1;\n  }\n\n  to {\n    transform:scale(0);\n    height: 0;\n    opacity: 0;\n  }\n}\n","import { Component, Prop, h, ComponentInterface, Event, EventEmitter, Element, State, Watch } from '@stencil/core';\nimport { hasSlotContent, loc } from 'src/utils';\n\n/**\n * @slot icon - Optional slot for a custom icon.\n * @slot title - Optional slot for the title content.\n * @slot - Optional slot for the message content.\n * @slot time - Optional slot for the time marker.\n * @slot actions - Optional slot for action links in the footer.\n */\n@Component({ tag: 'q2-toast', shadow: true, styleUrl: 'q2-toast.scss' })\nexport class Q2Toast implements ComponentInterface {\n    // #region Own Properties\n\n    private autoCloseTimer?: ReturnType<typeof setTimeout>;\n    private closeAnimationTimeMs = 500;\n    private closeTimer?: ReturnType<typeof setTimeout>;\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    isClosing: boolean = false;\n\n    @State()\n    isOpen: boolean = true;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Enables automatic dismissal after a duration. */\n    @Prop({ reflect: true })\n    autoClose: boolean = false;\n\n    /** Controls whether the close button is displayed. */\n    @Prop({ reflect: true })\n    closable: boolean = true;\n\n    /** The duration in milliseconds before auto dismissal. */\n    @Prop({ reflect: true })\n    duration: number = 7000;\n\n    /** Manually hide the icon where it would otherwise appear. */\n    @Prop({ reflect: true })\n    hideIcon: boolean = false;\n\n    /** Optional icon type to display. */\n    @Prop()\n    icon: string;\n\n    /** Optional message for the toast body. */\n    @Prop()\n    message: string;\n\n    /**\n     * Convenience prop for persistent toasts. When true, sets autoClose to false and closable to true.\n     * Aligns with acceptance criteria for showPersistent behavior.\n     */\n    @Prop({ reflect: true })\n    showPersistent: boolean = false;\n\n    /** Controls the visual size of the toast. */\n    @Prop({ reflect: true })\n    size: 'large' | 'small' = 'large';\n\n    /** Optional title for the toast. */\n    @Prop()\n    tctTitle: string;\n\n    /** Optional time marker for the footer. */\n    @Prop()\n    time: string;\n\n    /** The visual status of the toast. */\n    @Prop({ reflect: true })\n    type: 'warning' | 'info' | 'alert' | 'success' | 'default' | 'error' = 'default';\n\n    // #endregion\n    // #region Events\n\n    /** Emitted when the toast is dismissed. */\n    @Event()\n    tctClose: EventEmitter<{ reason: 'close' | 'timeout' }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.clearAutoClose();\n        this.clearCloseTimer();\n    }\n\n    componentDidLoad(): void {\n        this.startAutoClose();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('autoClose')\n    @Watch('duration')\n    onAutoCloseChange() {\n        this.startAutoClose();\n    }\n\n    @Watch('showPersistent')\n    onShowPersistentChange() {\n        if (this.showPersistent) {\n            this.autoClose = false;\n            this.closable = true;\n        } else {\n            this.autoClose = true;\n        }\n    }\n\n    @Watch('size')\n    onSizeChange() {\n        if (this.size === 'large') {\n            this.showPersistent = true;\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get ariaLive(): 'assertive' | 'polite' {\n        // Alert/error/warning types should be assertive, others polite\n        return this.resolvedType === 'alert' || this.resolvedType === 'warning' ? 'assertive' : 'polite';\n    }\n\n    get ariaRole(): 'alert' | 'status' {\n        // Alert/error/warning types use \"alert\" role, others use \"status\"\n        return this.resolvedType === 'alert' || this.resolvedType === 'warning' ? 'alert' : 'status';\n    }\n\n    get hasIconSlot(): boolean {\n        return hasSlotContent(this.hostElement, 'icon');\n    }\n\n    get isLarge(): boolean {\n        return this.size !== 'small';\n    }\n\n    get resolvedIcon(): string {\n        if (this.icon) return this.icon;\n\n        const iconMap = {\n            success: 'success-filled',\n            warning: 'warning-filled',\n            alert: 'error-filled',\n            info: 'info-filled',\n        };\n\n        return iconMap[this.resolvedType];\n    }\n\n    get resolvedType(): 'warning' | 'info' | 'alert' | 'success' | 'default' {\n        return this.type === 'error' ? 'alert' : this.type;\n    }\n\n    get shouldShowIcon(): boolean {\n        return (this.hasIconSlot || !!this.resolvedIcon) && !this.hideIcon;\n    }\n\n    get showFooter(): boolean {\n        const hasActions = hasSlotContent(this.hostElement, 'actions');\n        const hasTime = hasSlotContent(this.hostElement, 'time') || !!this.time;\n        return this.isLarge && (hasActions || hasTime);\n    }\n\n    get srTypeLabel(): string {\n        // Screen reader label for toast type\n        const labelMap = {\n            success: loc('tecton.element.toast.type.success'),\n            warning: loc('tecton.element.toast.type.warning'),\n            alert: loc('tecton.element.toast.type.alert'),\n            info: loc('tecton.element.toast.type.info'),\n            default: loc('tecton.element.toast.type.default'),\n        };\n        return labelMap[this.resolvedType] || '';\n    }\n\n    get toastClasses(): string {\n        const classes = ['toast', this.resolvedType, this.size];\n        classes.push(this.shouldShowIcon ? 'has-icon' : 'no-icon');\n        if (this.isClosing) classes.push('is-closing');\n        return classes.join(' ');\n    }\n\n    clearAutoClose() {\n        if (!this.autoCloseTimer) return;\n        clearTimeout(this.autoCloseTimer);\n        this.autoCloseTimer = undefined;\n    }\n\n    clearCloseTimer() {\n        if (!this.closeTimer) return;\n        clearTimeout(this.closeTimer);\n        this.closeTimer = undefined;\n    }\n\n    dismiss(reason: 'close' | 'timeout') {\n        if (!this.isOpen || this.isClosing) return;\n        this.clearAutoClose();\n        this.clearCloseTimer();\n        const toastEl = this.hostElement.shadowRoot?.querySelector('.toast') as HTMLElement | null;\n        if (toastEl) {\n            const height = Math.ceil(toastEl.getBoundingClientRect().height);\n            this.hostElement.style.setProperty('--toast-close-height', `${height}px`);\n            this.hostElement.style.setProperty('margin-bottom', '0');\n        }\n        this.isClosing = true;\n        this.closeTimer = setTimeout(() => {\n            this.isOpen = false;\n            this.isClosing = false;\n            this.tctClose.emit({ reason });\n        }, this.closeAnimationTimeMs);\n    }\n\n    onCloseClick = () => {\n        this.dismiss('close');\n    };\n\n    startAutoClose() {\n        this.clearAutoClose();\n        if (!this.autoClose || !this.duration || this.duration <= 0 || !this.isOpen) return;\n        this.autoCloseTimer = setTimeout(() => {\n            this.dismiss('timeout');\n        }, this.duration);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderIcon() {\n        if (this.hideIcon) return null;\n        if (this.hasIconSlot) return <slot name=\"icon\"></slot>;\n        if (!this.resolvedIcon) return null;\n        return <q2-icon type={this.resolvedIcon} />;\n    }\n\n    render() {\n        if (!this.isOpen) return null;\n\n        return (\n            <div\n                class={this.toastClasses}\n                role={this.ariaRole}\n                aria-live={this.ariaLive}\n                aria-atomic=\"true\"\n                aria-relevant=\"all\"\n            >\n                {this.srTypeLabel && <span class=\"sr\">{this.srTypeLabel}</span>}\n                <div class=\"container\">\n                    <div class=\"header\">\n                        {this.shouldShowIcon && <div class=\"icon\">{this.renderIcon()}</div>}\n                        <div class=\"title\">\n                            <span class=\"title-text\">\n                                <slot name=\"title\">{this.tctTitle}</slot>\n                            </span>\n                        </div>\n                        {this.closable && (\n                            <button\n                                class=\"close\"\n                                type=\"button\"\n                                aria-label={loc('tecton.element.toast.close')}\n                                onClick={this.onCloseClick}\n                            >\n                                <q2-icon type=\"close\" />\n                            </button>\n                        )}\n                    </div>\n                    {this.isLarge && (\n                        <div class=\"content\">\n                            {this.message}\n                            <slot />\n                        </div>\n                    )}\n                    {this.showFooter && (\n                        <div class=\"footer\">\n                            <div class=\"time\">\n                                <slot name=\"time\">{this.time}</slot>\n                            </div>\n                            <div class=\"actions\">\n                                <slot name=\"actions\"></slot>\n                            </div>\n                        </div>\n                    )}\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/q2-tecton-elements/q2-tooltip.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-tooltip.entry.esm.js","sources":["src/components/q2-tooltip/q2-tooltip.scss?tag=q2-tooltip&encapsulation=shadow","src/components/q2-tooltip/q2-tooltip.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n:host([block]) {\n    display: block;\n}\n\n.tooltip {\n    --comp-background: #{var-list(\n            --tct-tooltip-background,\n            var-prefixer(tooltip-background-color),\n            --t-top-a3,\n            #0d0d0dd9\n        )};\n    --comp-offset-default: calc(var(--app-scale-1x, 5px) * -1);\n    --comp-offset: #{var-list(var-prefixer(tooltip-offset), --comp-offset-default)};\n    --comp-position: #{var-list(var-prefixer(tooltip-position), --app-scale-1x, 5px)};\n    --comp-body-offset-default: calc(var(--app-scale-3x, 15px) * -1);\n    --comp-body-offset: #{var-list(var-prefixer(tooltip-body-offset), --comp-body-offset-default)};\n    --comp-duration: #{var-list(var-prefixer(tooltip-transition-duration), --app-duration-1, 0.2s)};\n    --comp-visible-duration: #{var-list(var-prefixer(tooltip-transition-visible-duration), 2s)};\n    --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 0s)};\n\n    display: inline-block;\n    position: relative;\n\n    &:hover {\n        --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 1s)};\n\n        :host([immediate]:not([immediate='false'])) & {\n            --comp-delay: 0s;\n        }\n    }\n\n    // Tooltip arrow\n    &:before {\n        position: absolute;\n        z-index: 2;\n        width: 0;\n        height: 0;\n        color: var(--comp-background);\n        pointer-events: none;\n        content: '';\n        border: var-list(var-prefixer(tooltip-arrow-size), --app-scale-1x, 5px) solid transparent;\n    }\n\n    // Tooltip bubble\n    &:after {\n        --comp-padding: #{var-list(--app-scale-1x, 5px)} 8px;\n\n        position: absolute;\n        z-index: 1;\n        padding: var-list(var-prefixer(tooltip-padding), --comp-padding);\n        font-weight: var-list(var-prefixer(tooltip-font-weight), 600);\n        font-size: var-list(var-prefixer(tooltip-font-size), --app-font-size-small, 12px);\n        line-height: 1.5;\n        color: var-list(var-prefixer(tooltip-color), --app-white, #ffffff);\n        text-align: center;\n        text-decoration: none;\n        text-shadow: none;\n        text-transform: none;\n        word-wrap: break-word;\n        white-space: pre;\n        pointer-events: none;\n        content: attr(data-label);\n        background: var(--comp-background);\n        border-radius: var-list(var-prefixer(tooltip-border-radius), --app-border-radius-1, 4px);\n    }\n\n    &:before,\n    &:after {\n        display: inline-block;\n        visibility: hidden;\n        opacity: 0;\n        transition: all var(--comp-duration) ease-in-out var(--comp-delay);\n        transition-property: visibility, opacity;\n    }\n\n    :host([block]) & {\n        display: block;\n    }\n\n    :host([persist-on-hover]:not([persist-on-hover='false'])) & {\n        &:before,\n        &:after {\n            pointer-events: auto;\n        }\n    }\n\n    // When to show the tooltip\n    &:not(.dismissed):hover,\n    &:not(.dismissed).has-keyboard-focus:focus-within,\n    :host([persistent]:not([persistent='false'])) &:not(.dismissed) {\n        &:before,\n        &:after {\n            text-decoration: none;\n            visibility: visible;\n            opacity: 1;\n        }\n    }\n\n    @keyframes tooltippedFade {\n        from {\n            opacity: 0;\n        }\n\n        to {\n            opacity: 1;\n        }\n    }\n\n    &.has-generic-focus:focus-within {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade, tooltippedFade;\n            animation-direction: normal, reverse;\n            animation-duration: var(--comp-duration);\n            animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));\n        }\n    }\n    &.has-generic-focus-out {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade;\n            animation-direction: reverse;\n            animation-duration: var(--comp-duration);\n        }\n    }\n\n    :host([multiline]) & {\n        &:after {\n            width: max-content;\n            max-width: var-list(var-prefixer(tooltip-max-width), 200px);\n            word-break: break-word;\n            word-wrap: normal;\n            white-space: pre-line;\n            border-collapse: separate;\n            text-align: left;\n        }\n\n        :host([position='s']) &,\n        :host([position='n']) & {\n            &:after {\n                right: auto;\n                left: 50%;\n                transform: translateX(-50%);\n            }\n        }\n\n        :host([position='w']) &,\n        :host([position='e']) & {\n            &:after {\n                right: 100%;\n            }\n        }\n\n        &:hover,\n        &:active,\n        &:focus {\n            &:after {\n                display: table-cell;\n            }\n        }\n\n        &:focus-within {\n            &:after {\n                display: table-cell;\n            }\n        }\n    }\n\n    // Below\n    :host([position='s']) &,\n    :host([position='se']) &,\n    :host([position='sw']) & {\n        &:after {\n            top: 100%;\n            right: 50%;\n            margin-top: var(--comp-position);\n        }\n\n        &:before {\n            top: auto;\n            right: 50%;\n            bottom: var(--comp-offset);\n            margin-right: var(--comp-offset);\n            border-bottom-color: var(--comp-background);\n        }\n    }\n\n    // Above\n    :host([position='n']) &,\n    :host([position='ne']) &,\n    :host([position='nw']) & {\n        &:after {\n            right: 50%;\n            bottom: 100%;\n            margin-bottom: var(--comp-position);\n        }\n\n        &:before {\n            top: var(--comp-offset);\n            right: 50%;\n            bottom: auto;\n            margin-right: var(--comp-offset);\n            border-top-color: var(--comp-background);\n        }\n    }\n\n    :host([position='se']) &,\n    :host([position='ne']) & {\n        &:after {\n            right: auto;\n            left: 50%;\n            margin-left: var(--comp-body-offset);\n            margin-right: var(--comp-body-offset);\n            transform: #{translateX(#{var-list(--comp-offset-translate, 0)})};\n        }\n    }\n\n    :host([position='sw']) &,\n    :host([position='nw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n            margin-left: var(--comp-body-offset);\n            right: 50%;\n            transform: #{translateX(#{var-list(--comp-offset-translate, 0)})};\n        }\n    }\n\n    // Centered\n    :host([position='s']) &,\n    :host([position='n']) & {\n        &:after {\n            transform: #{translateX(calc(50% + #{var-list(--comp-offset-translate, 0)}))};\n        }\n    }\n\n    // Left side\n    :host([position='w']) & {\n        &:after {\n            right: 100%;\n            bottom: 50%;\n            margin-right: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            bottom: 50%;\n            left: var(--comp-offset);\n            margin-top: var(--comp-offset);\n            border-left-color: var(--comp-background);\n        }\n    }\n\n    // Right side\n    :host([position='e']) & {\n        &:after {\n            bottom: 50%;\n            left: 100%;\n            margin-left: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            right: var(--comp-offset);\n            bottom: 50%;\n            margin-top: var(--comp-offset);\n            border-right-color: var(--comp-background);\n        }\n    }\n}\n","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"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-tooltip.entry.esm.js","sources":["src/components/q2-tooltip/q2-tooltip.scss?tag=q2-tooltip&encapsulation=shadow","src/components/q2-tooltip/q2-tooltip.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n    display: inline-block;\n}\n\n:host([block]) {\n    display: block;\n}\n\n.tooltip {\n    --comp-background: #{var-list(\n            --tct-tooltip-background,\n            var-prefixer(tooltip-background-color),\n            --t-top-a3,\n            #0d0d0dd9\n        )};\n    --comp-offset-default: calc(var(--app-scale-1x, 5px) * -1);\n    --comp-offset: #{var-list(var-prefixer(tooltip-offset), --comp-offset-default)};\n    --comp-position: #{var-list(var-prefixer(tooltip-position), --app-scale-1x, 5px)};\n    --comp-body-offset-default: calc(var(--app-scale-3x, 15px) * -1);\n    --comp-body-offset: #{var-list(var-prefixer(tooltip-body-offset), --comp-body-offset-default)};\n    --comp-duration: #{var-list(var-prefixer(tooltip-transition-duration), --app-duration-1, 0.2s)};\n    --comp-visible-duration: #{var-list(var-prefixer(tooltip-transition-visible-duration), 2s)};\n    --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 0s)};\n\n    display: inline-block;\n    position: relative;\n\n    &:hover {\n        --comp-delay: #{var-list(var-prefixer(tooltip-transition-delay), 1s)};\n\n        :host([immediate]:not([immediate='false'])) & {\n            --comp-delay: 0s;\n        }\n    }\n\n    // Tooltip arrow\n    &:before {\n        position: absolute;\n        z-index: 2;\n        width: 0;\n        height: 0;\n        color: var(--comp-background);\n        pointer-events: none;\n        content: '';\n        border: var-list(var-prefixer(tooltip-arrow-size), --app-scale-1x, 5px) solid transparent;\n    }\n\n    // Tooltip bubble\n    &:after {\n        --comp-padding: #{var-list(--app-scale-1x, 5px)} 8px;\n\n        position: absolute;\n        z-index: 1;\n        padding: var-list(var-prefixer(tooltip-padding), --comp-padding);\n        font-weight: var-list(var-prefixer(tooltip-font-weight), 600);\n        font-size: var-list(var-prefixer(tooltip-font-size), --app-font-size-small, 12px);\n        line-height: 1.5;\n        color: var-list(var-prefixer(tooltip-color), --app-white, #ffffff);\n        text-align: center;\n        text-decoration: none;\n        text-shadow: none;\n        text-transform: none;\n        word-wrap: break-word;\n        white-space: pre;\n        pointer-events: none;\n        content: attr(data-label);\n        background: var(--comp-background);\n        border-radius: var-list(var-prefixer(tooltip-border-radius), --app-border-radius-1, 4px);\n    }\n\n    &:before,\n    &:after {\n        display: inline-block;\n        visibility: hidden;\n        opacity: 0;\n        transition: all var(--comp-duration) ease-in-out var(--comp-delay);\n        transition-property: visibility, opacity;\n    }\n\n    :host([block]) & {\n        display: block;\n    }\n\n    :host([persist-on-hover]:not([persist-on-hover='false'])) & {\n        &:before,\n        &:after {\n            pointer-events: auto;\n        }\n    }\n\n    // When to show the tooltip\n    &:not(.dismissed):hover,\n    &:not(.dismissed).has-keyboard-focus:focus-within,\n    :host([persistent]:not([persistent='false'])) &:not(.dismissed) {\n        &:before,\n        &:after {\n            text-decoration: none;\n            visibility: visible;\n            opacity: 1;\n        }\n    }\n\n    @keyframes tooltippedFade {\n        from {\n            opacity: 0;\n        }\n\n        to {\n            opacity: 1;\n        }\n    }\n\n    &.has-generic-focus:focus-within {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade, tooltippedFade;\n            animation-direction: normal, reverse;\n            animation-duration: var(--comp-duration);\n            animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));\n        }\n    }\n    &.has-generic-focus:hover:focus-within {\n        &:before,\n        &:after {\n            animation-name: tooltippedFade;\n            animation-direction: normal;\n            animation-delay: 0ms;\n        }\n    }\n    :host([persist-on-hover]:not([persist-on-hover='false'])) &.has-generic-focus:focus-within {\n        &:before,\n        &:after {\n            animation-name: tooltippedFade;\n            animation-direction: normal;\n            animation-delay: 0ms;\n        }\n    }\n    &.has-generic-focus-out {\n        &:before,\n        &:after {\n            visibility: visible;\n            opacity: 0;\n            transition: none;\n            animation-timing-function: ease-in-out;\n            animation-fill-mode: forwards;\n            animation-name: tooltippedFade;\n            animation-direction: reverse;\n            animation-duration: var(--comp-duration);\n        }\n    }\n    &.dismissed {\n        &:before,\n        &:after {\n            visibility: hidden;\n            opacity: 0;\n            animation-name: none;\n        }\n    }\n\n    :host([multiline]) & {\n        &:after {\n            width: max-content;\n            max-width: var-list(var-prefixer(tooltip-max-width), 200px);\n            word-break: break-word;\n            word-wrap: normal;\n            white-space: pre-line;\n            border-collapse: separate;\n            text-align: left;\n        }\n\n        :host([position='s']) &,\n        :host([position='n']) & {\n            &:after {\n                right: auto;\n                left: 50%;\n                transform: translateX(-50%);\n            }\n        }\n\n        :host([position='w']) &,\n        :host([position='e']) & {\n            &:after {\n                right: 100%;\n            }\n        }\n\n        &:hover,\n        &:active,\n        &:focus {\n            &:after {\n                display: table-cell;\n            }\n        }\n\n        &:focus-within {\n            &:after {\n                display: table-cell;\n            }\n        }\n    }\n\n    // Below\n    :host([position='s']) &,\n    :host([position='se']) &,\n    :host([position='sw']) & {\n        &:after {\n            top: 100%;\n            right: 50%;\n            margin-top: var(--comp-position);\n        }\n\n        &:before {\n            top: auto;\n            right: 50%;\n            bottom: var(--comp-offset);\n            margin-right: var(--comp-offset);\n            border-bottom-color: var(--comp-background);\n        }\n    }\n\n    // Above\n    :host([position='n']) &,\n    :host([position='ne']) &,\n    :host([position='nw']) & {\n        &:after {\n            right: 50%;\n            bottom: 100%;\n            margin-bottom: var(--comp-position);\n        }\n\n        &:before {\n            top: var(--comp-offset);\n            right: 50%;\n            bottom: auto;\n            margin-right: var(--comp-offset);\n            border-top-color: var(--comp-background);\n        }\n    }\n\n    :host([position='se']) &,\n    :host([position='ne']) & {\n        &:after {\n            right: auto;\n            left: 50%;\n            margin-left: var(--comp-body-offset);\n            margin-right: var(--comp-body-offset);\n            transform: #{translateX(#{var-list(--comp-offset-translate, 0)})};\n        }\n    }\n\n    :host([position='sw']) &,\n    :host([position='nw']) & {\n        &:after {\n            margin-right: var(--comp-body-offset);\n            margin-left: var(--comp-body-offset);\n            right: 50%;\n            transform: #{translateX(#{var-list(--comp-offset-translate, 0)})};\n        }\n    }\n\n    // Centered\n    :host([position='s']) &,\n    :host([position='n']) & {\n        &:after {\n            transform: #{translateX(calc(50% + #{var-list(--comp-offset-translate, 0)}))};\n        }\n    }\n\n    // Left side\n    :host([position='w']) & {\n        &:after {\n            right: 100%;\n            bottom: 50%;\n            margin-right: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            bottom: 50%;\n            left: var(--comp-offset);\n            margin-top: var(--comp-offset);\n            border-left-color: var(--comp-background);\n        }\n    }\n\n    // Right side\n    :host([position='e']) & {\n        &:after {\n            bottom: 50%;\n            left: 100%;\n            margin-left: var(--comp-position);\n            transform: translateY(50%);\n        }\n\n        &:before {\n            top: 50%;\n            right: var(--comp-offset);\n            bottom: 50%;\n            margin-top: var(--comp-offset);\n            border-right-color: var(--comp-background);\n        }\n    }\n}\n","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"],"names":[],"mappings":"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"}

package/dist/q2-tecton-elements/q2-tooltip.entry.js

@@ -1,14 +1,15 @@
 import { r as t, h as o, g as i } from "./index-CGkHOjh1.js";
 
-import { o as e, i as s } from "./index-C4PILj1_.js";
+import { o as e, i as s } from "./index-C5gj0T_3.js";
 
-const r = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background, var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.8509803922)))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}:host([immediate]:not([immediate=false])) .tooltip:hover{--comp-delay:0s}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:"";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;word-wrap:break-word;white-space:pre;pointer-events:none;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)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay);transition-property:visibility, opacity}:host([block]) .tooltip{display:block}:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip:before,:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip:after{pointer-events:auto}.tooltip:not(.dismissed):hover:before,.tooltip:not(.dismissed):hover:after,.tooltip:not(.dismissed).has-keyboard-focus:focus-within:before,.tooltip:not(.dismissed).has-keyboard-focus:focus-within:after,:host([persistent]:not([persistent=false])) .tooltip:not(.dismissed):before,:host([persistent]:not([persistent=false])) .tooltip:not(.dismissed):after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset);margin-right:var(--comp-body-offset);transform:translateX(var(--comp-offset-translate, 0))}:host([position=sw]) .tooltip:after,:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset);margin-left:var(--comp-body-offset);right:50%;transform:translateX(var(--comp-offset-translate, 0))}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(calc(50% + var(--comp-offset-translate, 0)))}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}';
+const n = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([block]){display:block}.tooltip{--comp-background:var(--tct-tooltip-background, var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.8509803922)))));--comp-offset-default:calc(var(--app-scale-1x, 5px) * -1);--comp-offset:var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));--comp-position:var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));--comp-body-offset-default:calc(var(--app-scale-3x, 15px) * -1);--comp-body-offset:var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));--comp-duration:var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));--comp-visible-duration:var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));display:inline-block;position:relative}.tooltip:hover{--comp-delay:var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 1s))}:host([immediate]:not([immediate=false])) .tooltip:hover{--comp-delay:0s}.tooltip:before{position:absolute;z-index:2;width:0;height:0;color:var(--comp-background);pointer-events:none;content:"";border:var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent}.tooltip:after{--comp-padding:var(--app-scale-1x, 5px) 8px;position:absolute;z-index:1;padding:var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));font-weight:var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));font-size:var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, 12px)));line-height:1.5;color:var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;word-wrap:break-word;white-space:pre;pointer-events:none;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)))}.tooltip:before,.tooltip:after{display:inline-block;visibility:hidden;opacity:0;transition:all var(--comp-duration) ease-in-out var(--comp-delay);transition-property:visibility, opacity}:host([block]) .tooltip{display:block}:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip:before,:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip:after{pointer-events:auto}.tooltip:not(.dismissed):hover:before,.tooltip:not(.dismissed):hover:after,.tooltip:not(.dismissed).has-keyboard-focus:focus-within:before,.tooltip:not(.dismissed).has-keyboard-focus:focus-within:after,:host([persistent]:not([persistent=false])) .tooltip:not(.dismissed):before,:host([persistent]:not([persistent=false])) .tooltip:not(.dismissed):after{text-decoration:none;visibility:visible;opacity:1}@keyframes tooltippedFade{from{opacity:0}to{opacity:1}}.tooltip.has-generic-focus:focus-within:before,.tooltip.has-generic-focus:focus-within:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade, tooltippedFade;animation-direction:normal, reverse;animation-duration:var(--comp-duration);animation-delay:0ms, calc(var(--comp-visible-duration) + var(--comp-duration))}.tooltip.has-generic-focus:hover:focus-within:before,.tooltip.has-generic-focus:hover:focus-within:after{animation-name:tooltippedFade;animation-direction:normal;animation-delay:0ms}:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip.has-generic-focus:focus-within:before,:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip.has-generic-focus:focus-within:after{animation-name:tooltippedFade;animation-direction:normal;animation-delay:0ms}.tooltip.has-generic-focus-out:before,.tooltip.has-generic-focus-out:after{visibility:visible;opacity:0;transition:none;animation-timing-function:ease-in-out;animation-fill-mode:forwards;animation-name:tooltippedFade;animation-direction:reverse;animation-duration:var(--comp-duration)}.tooltip.dismissed:before,.tooltip.dismissed:after{visibility:hidden;opacity:0;animation-name:none}:host([multiline]) .tooltip:after{width:max-content;max-width:var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate;text-align:left}:host([position=s]) :host([multiline]) .tooltip:after,:host([position=n]) :host([multiline]) .tooltip:after{right:auto;left:50%;transform:translateX(-50%)}:host([position=w]) :host([multiline]) .tooltip:after,:host([position=e]) :host([multiline]) .tooltip:after{right:100%}:host([multiline]) .tooltip:hover:after,:host([multiline]) .tooltip:active:after,:host([multiline]) .tooltip:focus:after{display:table-cell}:host([multiline]) .tooltip:focus-within:after{display:table-cell}:host([position=s]) .tooltip:after,:host([position=se]) .tooltip:after,:host([position=sw]) .tooltip:after{top:100%;right:50%;margin-top:var(--comp-position)}:host([position=s]) .tooltip:before,:host([position=se]) .tooltip:before,:host([position=sw]) .tooltip:before{top:auto;right:50%;bottom:var(--comp-offset);margin-right:var(--comp-offset);border-bottom-color:var(--comp-background)}:host([position=n]) .tooltip:after,:host([position=ne]) .tooltip:after,:host([position=nw]) .tooltip:after{right:50%;bottom:100%;margin-bottom:var(--comp-position)}:host([position=n]) .tooltip:before,:host([position=ne]) .tooltip:before,:host([position=nw]) .tooltip:before{top:var(--comp-offset);right:50%;bottom:auto;margin-right:var(--comp-offset);border-top-color:var(--comp-background)}:host([position=se]) .tooltip:after,:host([position=ne]) .tooltip:after{right:auto;left:50%;margin-left:var(--comp-body-offset);margin-right:var(--comp-body-offset);transform:translateX(var(--comp-offset-translate, 0))}:host([position=sw]) .tooltip:after,:host([position=nw]) .tooltip:after{margin-right:var(--comp-body-offset);margin-left:var(--comp-body-offset);right:50%;transform:translateX(var(--comp-offset-translate, 0))}:host([position=s]) .tooltip:after,:host([position=n]) .tooltip:after{transform:translateX(calc(50% + var(--comp-offset-translate, 0)))}:host([position=w]) .tooltip:after{right:100%;bottom:50%;margin-right:var(--comp-position);transform:translateY(50%)}:host([position=w]) .tooltip:before{top:50%;bottom:50%;left:var(--comp-offset);margin-top:var(--comp-offset);border-left-color:var(--comp-background)}:host([position=e]) .tooltip:after{bottom:50%;left:100%;margin-left:var(--comp-position);transform:translateY(50%)}:host([position=e]) .tooltip:before{top:50%;right:var(--comp-offset);bottom:50%;margin-top:var(--comp-offset);border-right-color:var(--comp-background)}';
 
-const a = class {
+const r = class {
   constructor(o) {
     t(this, o);
     // #region Own Properties
         this.animationEndCount = 0;
+    this.cachedTooltipHeight = null;
     /**
          * Makes the component focusable, thereby putting it in the tab order of the keyboard.
          * @warning
@@ -28,6 +29,17 @@ const a = class {
   }
   // #endregion
   // #region Listeners
+  documentPointerHandler(t) {
+    var o;
+    if (!this.focusClass || this.persistent) return;
+    const i = ((o = t.composedPath) === null || o === void 0 ? void 0 : o.call(t).includes(this.hostElement)) || t.target instanceof Node && this.hostElement.contains(t.target);
+    if (i) {
+      this.persistOnHoverDismissed = false;
+      return;
+    }
+    this.persistOnHoverDismissed = true;
+    this.hideTooltip();
+  }
   focusCaptureHandler() {
     this.checkFocusClass();
   }
@@ -57,6 +69,11 @@ const a = class {
   // #region Watchers
   labelChanged() {
     this.propagateTooltip();
+    this.cachedTooltipHeight = null;
+ // Invalidate cache
+        if (this.shouldBeVisible || this.persistent) {
+      this.adjustSide();
+    }
   }
   // #endregion
   // #region Local Methods
@@ -65,30 +82,63 @@ const a = class {
     return this.hostElement.matches(":hover, :focus-within") && !this.persistOnHoverDismissed;
   }
   adjustSide() {
-    const {left: t, right: o, width: i} = this.hostElement.getBoundingClientRect();
+    const {left: t, right: o, width: i, top: e, bottom: s} = this.hostElement.getBoundingClientRect();
     if (!t || !i) return;
-    const {width: e, paddingLeft: s, paddingRight: r} = window.getComputedStyle(this.tooltipElement, "::after");
-    const a = Number(e.replace(/[px]/g, "")) + Number(s.replace(/[px]/g, "")) + Number(r.replace(/[px]/g, ""));
-    const n = [ "se", "sw", "ne", "nw" ].includes(this.position) ? 0 : 15;
-    const p = t + i / 2;
-    const l = window.innerWidth - o + +i / 2;
-    if ([ "ne", "se" ].includes(this.position)) {
-      if (a > l) {
-        this.tooltipElement.style.setProperty("--comp-offset-translate", `-${Math.round(a - l + n)}px`);
+    // Find the constraining container (modal, dialog, or any overflow:hidden ancestor)
+        const n = this.findConstrainingContainer();
+    const r = n.getBoundingClientRect();
+    const {width: a, paddingLeft: l, paddingRight: p} = window.getComputedStyle(this.tooltipElement, "::after");
+    const h = Number(a.replace(/[px]/g, "")) + Number(l.replace(/[px]/g, "")) + Number(p.replace(/[px]/g, ""));
+    const f = [ "se", "sw", "ne", "nw" ].includes(this.position) ? 0 : 15;
+    // Calculate available space relative to constraining container
+        const c = t - r.left + i / 2;
+    const d = r.right - o + i / 2;
+    const u = e - r.top;
+    const m = r.bottom - s;
+    // Calculate tooltip height dynamically
+        const b = this.calculateTooltipHeight();
+    // Check if we need to flip vertical position
+        if ([ "n", "ne", "nw" ].includes(this.position) && u < b) {
+      // Not enough space above, try flipping to bottom
+      if (m >= b) {
+        this.position = this.position.replace("n", "s");
+      }
+    } else if ([ "s", "se", "sw" ].includes(this.position) && m < b) {
+      // Not enough space below, try flipping to top
+      if (u >= b) {
+        this.position = this.position.replace("s", "n");
+      }
+    }
+    // Adjust horizontal positioning
+        if ([ "ne", "se" ].includes(this.position)) {
+      if (h > d) {
+        this.tooltipElement.style.setProperty("--comp-offset-translate", `-${Math.round(h - d + f)}px`);
       }
     } else if ([ "nw", "sw" ].includes(this.position)) {
-      if (a > p) {
-        this.tooltipElement.style.setProperty("--comp-offset-translate", `${Math.round(a - p + n)}px`);
+      if (h > c) {
+        this.tooltipElement.style.setProperty("--comp-offset-translate", `${Math.round(h - c + f)}px`);
       }
     } else if ([ "n", "s" ].includes(this.position)) {
-      if (a / 2 > p) {
-        this.tooltipElement.style.setProperty("--comp-offset-translate", `${Math.round(a / 2 - p + n)}px`);
-      } else if (a / 2 > l) {
-        this.tooltipElement.style.setProperty("--comp-offset-translate", `-${Math.round(a / 2 - l + n)}px`);
+      if (h / 2 > c) {
+        this.tooltipElement.style.setProperty("--comp-offset-translate", `${Math.round(h / 2 - c + f)}px`);
+      } else if (h / 2 > d) {
+        this.tooltipElement.style.setProperty("--comp-offset-translate", `-${Math.round(h / 2 - d + f)}px`);
       } else {
         this.tooltipElement.style.setProperty("--comp-offset-translate", `0px`);
       }
     }
+    // Handle east/west positioning
+        if (this.position === "e" && h > d) {
+      // Not enough space on right, flip to left
+      if (c >= h) {
+        this.position = "w";
+      }
+    } else if (this.position === "w" && h > c) {
+      // Not enough space on left, flip to right
+      if (d >= h) {
+        this.position = "e";
+      }
+    }
   }
   animationEndHandler() {
     this.animationEndCount = this.animationEndCount + 1;
@@ -101,6 +151,54 @@ const a = class {
       this.animationEndCount = 0;
     }
   }
+  calculateTooltipHeight() {
+    if (this.cachedTooltipHeight !== null) {
+      return this.cachedTooltipHeight;
+    }
+    try {
+      const t = window.getComputedStyle(this.tooltipElement, "::after");
+      // Try to get computed height first
+            const o = t.height;
+      if (o && o !== "auto" && o !== "0px") {
+        const i = Number(o.replace(/px/g, ""));
+        const e = Number(t.paddingTop.replace(/px/g, ""));
+        const s = Number(t.paddingBottom.replace(/px/g, ""));
+        this.cachedTooltipHeight = i + e + s;
+        return this.cachedTooltipHeight;
+      }
+      // Fallback: Calculate based on text and wrapping
+            const i = Number(t.width.replace(/px/g, ""));
+      const e = Number(t.paddingLeft.replace(/px/g, ""));
+      const s = Number(t.paddingRight.replace(/px/g, ""));
+      const n = Number(t.paddingTop.replace(/px/g, ""));
+      const r = Number(t.paddingBottom.replace(/px/g, ""));
+      const a = Number(t.fontSize.replace(/px/g, ""));
+      const l = t.lineHeight;
+      const p = l === "normal" ? a * 1.5 : Number(l.replace(/px/g, ""));
+      const h = i - e - s;
+      const f = t.whiteSpace;
+      // Single-line tooltip (white-space: pre)
+            if (f === "pre" || !this.multiline) {
+        return p + n + r;
+      }
+      // Multi-line tooltip: estimate line count
+            const c = this.label || "";
+      const d = a * .5;
+ // Approximation for character width
+            const u = Math.floor(h / d);
+      const m = Math.max(1, Math.ceil(c.length / u));
+      const b = m * p + n + r;
+      // Add some buffer for safety (10px)
+            this.cachedTooltipHeight = Math.ceil(b) + 10;
+      return this.cachedTooltipHeight;
+    } catch (t) {
+      console.warn("Failed to calculate tooltip height, using fallback", t);
+      // Fallback based on multiline mode
+            const o = this.multiline ? 80 : 50;
+      this.cachedTooltipHeight = o;
+      return o;
+    }
+  }
   checkFocusClass() {
     if (!this.shouldBeVisible) return;
     const t = !!this.findFocusVisibleElement(document.activeElement);
@@ -115,6 +213,24 @@ const a = class {
       }
     }
   }
+  findConstrainingContainer() {
+    let t = this.hostElement.parentElement;
+    while (t && t !== document.body) {
+      const o = window.getComputedStyle(t);
+      const i = o.overflow + o.overflowX + o.overflowY;
+      // Check if this element constrains overflow
+            if (i.includes("hidden") || i.includes("auto") || i.includes("scroll")) {
+        return t;
+      }
+      // Check for q2-modal interior element
+            if (t.tagName === "DIALOG" || t.classList.contains("interior")) {
+        return t;
+      }
+      t = t.parentElement;
+    }
+    // If no constraining container found, use the viewport
+        return document.documentElement;
+  }
   findFocusVisibleElement(t) {
     if (!t) return;
     if (t.shadowRoot) t = this.findFocusVisibleElement(t.shadowRoot.activeElement);
@@ -164,8 +280,8 @@ const a = class {
   }
 };
 
-a.style = r;
+r.style = n;
 
-export { a as q2_tooltip };
+export { r as q2_tooltip };
 //# sourceMappingURL=q2-tooltip.entry.esm.js.map
 //# sourceMappingURL=q2-tooltip.entry.js.map