tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/components/tooltip.js

@@ -1,478 +1,342 @@
-/**
- * Tooltip Component
- *
- * Shows helpful content on hover/focus with smart positioning.
- * Follows the same shadow DOM pattern as other components.
- *
- * @example
- * <ty-tooltip placement="top" flavor="primary" delay="600">
- *   Helpful tooltip text
- * </ty-tooltip>
- */
-import { findBestPosition, placementPreferences } from '../utils/positioning.js';
+import { findBestPosition, preferenceChain } from '../utils/positioning.js';
 import { ensureStyles } from '../utils/styles.js';
 import { tooltipStyles } from '../styles/tooltip.js';
-// ============================================================================
-// WeakMaps for State Management
-// ============================================================================
 const autoUpdateCleanup = new WeakMap();
 const eventCleanup = new WeakMap();
 const timeoutState = new WeakMap();
 const popoverElements = new WeakMap();
-// Cached separately from getAnchorElement()/el.parentElement — by the time
-// disconnectedCallback fires the element has already been removed from the
-// DOM, so parentElement is null and cleanup() couldn't otherwise find the
-// anchor to strip its aria-describedby.
 const anchorElements = new WeakMap();
-// ============================================================================
-// Helper Functions
-// ============================================================================
-/**
- * Normalize the flavor attribute. Any plain identifier (with optional +/-
- * shade suffix) is accepted — built-ins and custom flavors alike get their
- * colors from tokens in applyFlavorStyles(). Anything else (including
- * would-be CSS injection through the attribute) falls back to 'dark'.
- */
 function validateFlavor(flavor) {
-    const full = flavor || 'dark';
-    const base = full.replace(/[+-]$/, '');
-    return /^[A-Za-z][A-Za-z0-9_-]*$/.test(base) ? full : 'dark';
+const full = flavor || 'dark';
+const base = full.replace(/[+-]$/, '');
+return /^[A-Za-z][A-Za-z0-9_-]*$/.test(base) ? full : 'dark';
 }
-/**
- * Get timeout state for element
- */
 function getTimeoutState(el) {
-    let state = timeoutState.get(el);
-    if (!state) {
-        state = { showTimeout: null, hideTimeout: null };
-        timeoutState.set(el, state);
-    }
-    return state;
-}
-/**
- * Parse boolean attribute
- */
+let state = timeoutState.get(el);
+if (!state) {
+state = { showTimeout: null, hideTimeout: null };
+timeoutState.set(el, state);
+}
+return state;
+}
 function parseBoolAttr(el, name) {
-    return el.hasAttribute(name);
+return el.hasAttribute(name);
 }
-/**
- * Parse integer attribute
- */
 function parseIntAttr(el, name, defaultValue) {
-    const value = el.getAttribute(name);
-    if (value === null)
-        return defaultValue;
-    const parsed = parseInt(value, 10);
-    return isNaN(parsed) ? defaultValue : parsed;
-}
-/**
- * Read all tooltip attributes from element
- */
+const value = el.getAttribute(name);
+if (value === null)
+return defaultValue;
+const parsed = parseInt(value, 10);
+return isNaN(parsed) ? defaultValue : parsed;
+}
 function getTooltipAttributes(el) {
-    return {
-        placement: (el.getAttribute('placement') || 'top'),
-        offset: parseIntAttr(el, 'offset', 8),
-        delay: parseIntAttr(el, 'delay', 600),
-        disabled: parseBoolAttr(el, 'disabled'),
-        flavor: validateFlavor(el.getAttribute('flavor')),
-    };
-}
-/**
- * Get the parent element (anchor)
- */
+return {
+placement: (el.getAttribute('placement') || 'top'),
+offset: parseIntAttr(el, 'offset', 8),
+delay: parseIntAttr(el, 'delay', 600),
+disabled: parseBoolAttr(el, 'disabled'),
+flavor: validateFlavor(el.getAttribute('flavor')),
+};
+}
 function getAnchorElement(el) {
-    return el.parentElement;
+return el.parentElement;
 }
-/**
- * Add `id` to the anchor's aria-describedby without clobbering a value the
- * consumer may already have set for something else (WAI-ARIA APG tooltip
- * pattern: append, don't overwrite).
- */
 function addDescribedBy(anchor, id) {
-    const ids = (anchor.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean);
-    if (!ids.includes(id)) {
-        ids.push(id);
-        anchor.setAttribute('aria-describedby', ids.join(' '));
-    }
+const ids = (anchor.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean);
+if (!ids.includes(id)) {
+ids.push(id);
+anchor.setAttribute('aria-describedby', ids.join(' '));
+}
 }
-/** Inverse of addDescribedBy — used on teardown. */
 function removeDescribedBy(anchor, id) {
-    const ids = (anchor.getAttribute('aria-describedby') || '').split(/\s+/).filter((x) => x && x !== id);
-    if (ids.length > 0) {
-        anchor.setAttribute('aria-describedby', ids.join(' '));
-    }
-    else {
-        anchor.removeAttribute('aria-describedby');
-    }
-}
-/**
- * Get or create popover element using Popover API
- * The popover is created in document.body for top-layer placement
- */
+const ids = (anchor.getAttribute('aria-describedby') || '').split(/\s+/).filter((x) => x && x !== id);
+if (ids.length > 0) {
+anchor.setAttribute('aria-describedby', ids.join(' '));
+}
+else {
+anchor.removeAttribute('aria-describedby');
+}
+}
+function ensureTooltipMotionStyles() {
+if (document.getElementById('ty-tooltip-motion'))
+return;
+const style = document.createElement('style');
+style.id = 'ty-tooltip-motion';
+style.textContent = `
+.ty-tooltip-popover:popover-open {
+transition:
+opacity var(--ty-tooltip-duration, 120ms) ease-out,
+translate var(--ty-tooltip-duration, 120ms) ease-out;
+}
+@starting-style {
+.ty-tooltip-popover:popover-open { opacity: 0; translate: 0 4px; }
+.ty-tooltip-popover:popover-open[data-side="bottom"] { translate: 0 -4px; }
+.ty-tooltip-popover:popover-open[data-side="left"] { translate: 4px 0; }
+.ty-tooltip-popover:popover-open[data-side="right"] { translate: -4px 0; }
+}
+`;
+document.head.appendChild(style);
+}
 function getOrCreatePopover(el) {
-    let popover = popoverElements.get(el);
-    if (!popover) {
-        // Create popover element
-        popover = document.createElement('div');
-        popover.id = `ty-tooltip-${Math.random().toString(36).slice(2, 11)}`;
-        popover.setAttribute('popover', 'manual');
-        // WAI-ARIA APG tooltip pattern: the popover needs role="tooltip" and
-        // the trigger needs aria-describedby pointing at it, or a keyboard/
-        // screen-reader user gets no indication the tooltip exists at all —
-        // hover-only visibility isn't enough on its own.
-        popover.setAttribute('role', 'tooltip');
-        popover.className = 'ty-tooltip-popover';
-        // Apply inline styles (since popover is outside shadow DOM, we need inline styles)
-        const styles = `
-      position: fixed;
-      margin: 0;
-      padding: 8px 12px;
-      background: var(--ty-tooltip-bg, #262626);
-      color: var(--ty-tooltip-color, #f5f5f5);
-      border: none;
-      border-radius: 6px;
-      font-size: var(--ty-font-xs, 12px);
-      font-weight: var(--ty-font-semibold, 600);
-      line-height: 1.5;
-      max-width: 250px;
-      text-align: center;
-      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-      user-select: none;
-      pointer-events: none;
-    `;
-        popover.style.cssText = styles;
-        // Append to body
-        document.body.appendChild(popover);
-        // Store reference
-        popoverElements.set(el, popover);
-        const anchor = anchorElements.get(el);
-        if (anchor)
-            addDescribedBy(anchor, popover.id);
-    }
-    // Resync on every call (not just creation) — content and flavor can
-    // change between shows, and this is eagerly called from connectedCallback
-    // (see below) so a keyboard user tabbing straight to the trigger gets a
-    // real aria-describedby target immediately, not one that only exists
-    // after the (default 600ms) hover delay has already elapsed.
-    const { flavor } = getTooltipAttributes(el);
-    popover.setAttribute('data-flavor', flavor);
-    // innerHTML, not textContent — the tooltip's own docs promise "Content is
-    // any HTML nested inside the ty-tooltip element"; textContent silently
-    // stripped it. Relocating the developer's own authored markup between two
-    // elements they control isn't a new trust boundary (same model ty-select
-    // already uses to clone rich option HTML into its trigger).
-    popover.innerHTML = el.innerHTML;
-    applyFlavorStyles(popover, flavor);
-    return popover;
-}
-/**
- * Apply flavor-specific styles to popover.
- *
- * dark / light / info are hand-written extras; every other flavor —
- * built-in semantic or custom — is one token formula, with neutral
- * fallbacks so a custom flavor with missing tokens degrades gracefully.
- * flavor has passed validateFlavor's identifier guard, so interpolating
- * it into var() names is safe.
- */
+ensureTooltipMotionStyles();
+let popover = popoverElements.get(el);
+if (!popover) {
+popover = document.createElement('div');
+popover.id = `ty-tooltip-${Math.random().toString(36).slice(2, 11)}`;
+popover.setAttribute('popover', 'manual');
+popover.setAttribute('role', 'tooltip');
+popover.className = 'ty-tooltip-popover';
+const styles = `
+position: fixed;
+margin: 0;
+padding: 8px 12px;
+background: var(--ty-tooltip-bg, #262626);
+color: var(--ty-tooltip-color, #f5f5f5);
+border: none;
+border-radius: 6px;
+font-size: var(--ty-font-xs, 12px);
+font-weight: var(--ty-font-semibold, 600);
+line-height: 1.5;
+max-width: 250px;
+text-align: center;
+box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+user-select: none;
+pointer-events: none;
+`;
+popover.style.cssText = styles;
+document.body.appendChild(popover);
+popoverElements.set(el, popover);
+const anchor = anchorElements.get(el);
+if (anchor)
+addDescribedBy(anchor, popover.id);
+}
+const { flavor } = getTooltipAttributes(el);
+popover.setAttribute('data-flavor', flavor);
+popover.innerHTML = el.innerHTML;
+applyFlavorStyles(popover, flavor);
+return popover;
+}
 function applyFlavorStyles(popover, flavor) {
-    // Reset to defaults first
-    popover.style.removeProperty('background');
-    popover.style.removeProperty('color');
-    popover.style.removeProperty('border-color');
-    switch (flavor) {
-        case 'dark':
-            // Default look — theme-INDEPENDENT on purpose (matches Material/
-            // Bootstrap/Ant/Shoelace: a tooltip stays a fixed dark chip whether
-            // the page is light or dark, so it always pops). Routed through the
-            // --ty-tooltip-* tokens (defined once in :root, not redeclared in
-            // html.dark) so consumers can retheme without a flavor.
-            popover.style.background = 'var(--ty-tooltip-bg, #262626)';
-            popover.style.color = 'var(--ty-tooltip-color, #f5f5f5)';
-            popover.style.borderColor = 'var(--ty-tooltip-border, #404040)';
-            break;
-        case 'light':
-            popover.style.background = 'var(--ty-surface-elevated, #ffffff)';
-            popover.style.color = 'var(--ty-text-strong, #111827)';
-            popover.style.borderColor = 'var(--ty-border, #e5e7eb)';
-            break;
-        case 'info':
-            popover.style.background = 'var(--ty-bg-info, #06b6d4)';
-            popover.style.color = 'var(--ty-text-strong, #f0f9ff)';
-            popover.style.borderColor = 'var(--ty-border-info, #22d3ee)';
-            break;
-        default: {
-            const base = flavor.replace(/[+-]$/, '');
-            const shade = flavor.slice(base.length);
-            const bgSfx = shade === '+' ? '-bold' : shade === '-' ? '-soft' : '';
-            popover.style.background = `var(--ty-bg-${base}${bgSfx}, var(--ty-bg-neutral))`;
-            popover.style.color = `var(--ty-color-${base}-strong, var(--ty-color-neutral-strong))`;
-            popover.style.borderColor = `var(--ty-border-${base}, var(--ty-color-${base}))`;
-            break;
-        }
-    }
-}
-/**
- * Update tooltip position based on current anchor/popover state
- */
+popover.style.removeProperty('background');
+popover.style.removeProperty('color');
+popover.style.removeProperty('border-color');
+switch (flavor) {
+case 'dark':
+popover.style.background = 'var(--ty-tooltip-bg, #262626)';
+popover.style.color = 'var(--ty-tooltip-color, #f5f5f5)';
+popover.style.borderColor = 'var(--ty-tooltip-border, #404040)';
+break;
+case 'light':
+popover.style.background = 'var(--ty-surface-elevated, #ffffff)';
+popover.style.color = 'var(--ty-text-strong, #111827)';
+popover.style.borderColor = 'var(--ty-border, #e5e7eb)';
+break;
+case 'info':
+popover.style.background = 'var(--ty-bg-info, #06b6d4)';
+popover.style.color = 'var(--ty-text-strong, #f0f9ff)';
+popover.style.borderColor = 'var(--ty-border-info, #22d3ee)';
+break;
+default: {
+const base = flavor.replace(/[+-]$/, '');
+const shade = flavor.slice(base.length);
+const bgSfx = shade === '+' ? '-bold' : shade === '-' ? '-soft' : '';
+popover.style.background = `var(--ty-bg-${base}${bgSfx}, var(--ty-bg-neutral))`;
+popover.style.color = `var(--ty-color-${base}-strong, var(--ty-color-neutral-strong))`;
+popover.style.borderColor = `var(--ty-border-${base}, var(--ty-color-${base}))`;
+break;
+}
+}
+}
 function updatePosition(el) {
-    const { placement, offset } = getTooltipAttributes(el);
-    const anchor = getAnchorElement(el);
-    const popover = popoverElements.get(el);
-    if (!anchor || !popover) {
-        console.warn('[ty-tooltip] updatePosition: missing anchor or popover');
-        return;
-    }
-    // Calculate preferences based on placement
-    const preferences = placement === 'top' ? placementPreferences.tooltip :
-        placement === 'bottom' ? ['bottom', 'top', 'left', 'right'] :
-            placement === 'left' ? ['left', 'right', 'top', 'bottom'] :
-                placement === 'right' ? ['right', 'left', 'top', 'bottom'] :
-                    placementPreferences.tooltip;
-    // Use positioning engine to find best position
-    const position = findBestPosition({
-        targetEl: anchor,
-        floatingEl: popover,
-        preferences,
-        offset,
-    });
-    // Apply position directly to popover
-    popover.style.left = `${position.x}px`;
-    popover.style.top = `${position.y}px`;
-}
-/**
- * Cleanup auto-update system
- */
+const { placement, offset } = getTooltipAttributes(el);
+const anchor = getAnchorElement(el);
+const popover = popoverElements.get(el);
+if (!anchor || !popover) {
+console.warn('[ty-tooltip] updatePosition: missing anchor or popover');
+return;
+}
+const preferences = preferenceChain(placement);
+const position = findBestPosition({
+targetEl: anchor,
+floatingEl: popover,
+preferences,
+offset,
+});
+popover.style.left = `${position.x}px`;
+popover.style.top = `${position.y}px`;
+popover.dataset.side = position.placement.split('-')[0];
+}
 function cleanupAutoUpdate(el) {
-    const cleanup = autoUpdateCleanup.get(el);
-    if (cleanup) {
-        cleanup();
-        autoUpdateCleanup.delete(el);
-    }
-}
-/**
- * Setup auto-update system for position tracking
- * Note: This does NOT calculate initial position - call updatePosition() separately
- */
+const cleanup = autoUpdateCleanup.get(el);
+if (cleanup) {
+cleanup();
+autoUpdateCleanup.delete(el);
+}
+}
 function setupAutoUpdate(el) {
-    const anchor = getAnchorElement(el);
-    const popover = popoverElements.get(el);
-    if (!anchor || !popover) {
-        console.warn('[ty-tooltip] setupAutoUpdate: missing anchor or popover');
-        return;
-    }
-    // Debounced update function
-    let timeoutId = null;
-    const debouncedUpdate = () => {
-        if (timeoutId !== null) {
-            clearTimeout(timeoutId);
-        }
-        timeoutId = window.setTimeout(() => {
-            timeoutId = null;
-            updatePosition(el);
-        }, 10);
-    };
-    // Setup ResizeObserver for anchor and popover
-    const resizeObserver = new ResizeObserver(debouncedUpdate);
-    resizeObserver.observe(anchor);
-    resizeObserver.observe(popover);
-    // Scroll handler with requestAnimationFrame
-    let scrollRafId = null;
-    const handleScroll = () => {
-        if (scrollRafId === null) {
-            scrollRafId = requestAnimationFrame(() => {
-                scrollRafId = null;
-                updatePosition(el);
-            });
-        }
-    };
-    // Listen for scroll and resize
-    window.addEventListener('scroll', handleScroll, true);
-    window.addEventListener('resize', debouncedUpdate);
-    // Store cleanup function
-    const cleanup = () => {
-        resizeObserver.disconnect();
-        window.removeEventListener('scroll', handleScroll, true);
-        window.removeEventListener('resize', debouncedUpdate);
-        if (timeoutId !== null) {
-            clearTimeout(timeoutId);
-        }
-        if (scrollRafId !== null) {
-            cancelAnimationFrame(scrollRafId);
-        }
-    };
-    autoUpdateCleanup.set(el, cleanup);
-}
-/**
- * Clear all timeouts
- */
+const anchor = getAnchorElement(el);
+const popover = popoverElements.get(el);
+if (!anchor || !popover) {
+console.warn('[ty-tooltip] setupAutoUpdate: missing anchor or popover');
+return;
+}
+let timeoutId = null;
+const debouncedUpdate = () => {
+if (timeoutId !== null) {
+clearTimeout(timeoutId);
+}
+timeoutId = window.setTimeout(() => {
+timeoutId = null;
+updatePosition(el);
+}, 10);
+};
+const resizeObserver = new ResizeObserver(debouncedUpdate);
+resizeObserver.observe(anchor);
+resizeObserver.observe(popover);
+let scrollRafId = null;
+const handleScroll = () => {
+if (scrollRafId === null) {
+scrollRafId = requestAnimationFrame(() => {
+scrollRafId = null;
+updatePosition(el);
+});
+}
+};
+window.addEventListener('scroll', handleScroll, true);
+window.addEventListener('resize', debouncedUpdate);
+const cleanup = () => {
+resizeObserver.disconnect();
+window.removeEventListener('scroll', handleScroll, true);
+window.removeEventListener('resize', debouncedUpdate);
+if (timeoutId !== null) {
+clearTimeout(timeoutId);
+}
+if (scrollRafId !== null) {
+cancelAnimationFrame(scrollRafId);
+}
+};
+autoUpdateCleanup.set(el, cleanup);
+}
 function clearTimeouts(el) {
-    const state = getTimeoutState(el);
-    if (state.showTimeout !== null) {
-        clearTimeout(state.showTimeout);
-        state.showTimeout = null;
-    }
-    if (state.hideTimeout !== null) {
-        clearTimeout(state.hideTimeout);
-        state.hideTimeout = null;
-    }
-}
-/**
- * Show tooltip immediately using Popover API
- */
+const state = getTimeoutState(el);
+if (state.showTimeout !== null) {
+clearTimeout(state.showTimeout);
+state.showTimeout = null;
+}
+if (state.hideTimeout !== null) {
+clearTimeout(state.hideTimeout);
+state.hideTimeout = null;
+}
+}
 function showTooltip(el) {
-    const { disabled } = getTooltipAttributes(el);
-    if (disabled)
-        return;
-    // Create popover if it doesn't exist
-    const popover = getOrCreatePopover(el);
-    try {
-        // Show using Popover API
-        popover.showPopover();
-        el._open = true;
-        // Position and setup observers
-        updatePosition(el);
-        setupAutoUpdate(el);
-    }
-    catch (e) {
-        console.warn('[ty-tooltip] Failed to show popover', e);
-    }
-}
-/**
- * Hide tooltip immediately using Popover API
- */
+const { disabled } = getTooltipAttributes(el);
+if (disabled)
+return;
+const popover = getOrCreatePopover(el);
+try {
+popover.showPopover();
+el._open = true;
+updatePosition(el);
+setupAutoUpdate(el);
+}
+catch (e) {
+console.warn('[ty-tooltip] Failed to show popover', e);
+}
+}
 function hideTooltip(el) {
-    const popover = popoverElements.get(el);
-    if (!popover)
-        return;
-    try {
-        popover.hidePopover();
-        el._open = false;
-        cleanupAutoUpdate(el);
-    }
-    catch (e) {
-        // Already hidden, ignore
-    }
-}
-/**
- * Schedule tooltip to show after delay
- */
+const popover = popoverElements.get(el);
+if (!popover)
+return;
+try {
+popover.hidePopover();
+el._open = false;
+cleanupAutoUpdate(el);
+}
+catch (e) {
+}
+}
 function scheduleShow(el) {
-    const state = getTimeoutState(el);
-    const { delay } = getTooltipAttributes(el);
-    clearTimeouts(el);
-    state.showTimeout = window.setTimeout(() => showTooltip(el), delay);
-}
-/**
- * Schedule tooltip to hide after delay
- */
+const state = getTimeoutState(el);
+const { delay } = getTooltipAttributes(el);
+clearTimeouts(el);
+state.showTimeout = window.setTimeout(() => showTooltip(el), delay);
+}
 function scheduleHide(el) {
-    const state = getTimeoutState(el);
-    clearTimeouts(el);
-    state.hideTimeout = window.setTimeout(() => hideTooltip(el), 200);
+const state = getTimeoutState(el);
+clearTimeouts(el);
+state.hideTimeout = window.setTimeout(() => hideTooltip(el), 200);
 }
-/**
- * Setup event listeners on anchor element
- */
 function setupEvents(el) {
-    const anchor = getAnchorElement(el);
-    if (!anchor)
-        return;
-    anchorElements.set(el, anchor);
-    const handleEnter = () => scheduleShow(el);
-    const handleLeave = () => scheduleHide(el);
-    const handleFocus = () => scheduleShow(el);
-    const handleBlur = () => scheduleHide(el);
-    // Add event listeners
-    anchor.addEventListener('mouseenter', handleEnter);
-    anchor.addEventListener('mouseleave', handleLeave);
-    anchor.addEventListener('focusin', handleFocus);
-    anchor.addEventListener('focusout', handleBlur);
-    // Store cleanup function
-    eventCleanup.set(el, () => {
-        anchor.removeEventListener('mouseenter', handleEnter);
-        anchor.removeEventListener('mouseleave', handleLeave);
-        anchor.removeEventListener('focusin', handleFocus);
-        anchor.removeEventListener('focusout', handleBlur);
-    });
-}
-/**
- * Cleanup all resources including popover element
- */
+const anchor = getAnchorElement(el);
+if (!anchor)
+return;
+anchorElements.set(el, anchor);
+const handleEnter = () => scheduleShow(el);
+const handleLeave = () => scheduleHide(el);
+const handleFocus = () => scheduleShow(el);
+const handleBlur = () => scheduleHide(el);
+anchor.addEventListener('mouseenter', handleEnter);
+anchor.addEventListener('mouseleave', handleLeave);
+anchor.addEventListener('focusin', handleFocus);
+anchor.addEventListener('focusout', handleBlur);
+eventCleanup.set(el, () => {
+anchor.removeEventListener('mouseenter', handleEnter);
+anchor.removeEventListener('mouseleave', handleLeave);
+anchor.removeEventListener('focusin', handleFocus);
+anchor.removeEventListener('focusout', handleBlur);
+});
+}
 function cleanup(el) {
-    clearTimeouts(el);
-    cleanupAutoUpdate(el);
-    const eventsCleanup = eventCleanup.get(el);
-    if (eventsCleanup) {
-        eventsCleanup();
-        eventCleanup.delete(el);
-    }
-    // Strip aria-describedby before removing the popover it points at — by
-    // this point (disconnectedCallback) el.parentElement is already null, so
-    // this must use the cached anchor, not getAnchorElement(el).
-    const popover = popoverElements.get(el);
-    const anchor = anchorElements.get(el);
-    if (popover && anchor) {
-        removeDescribedBy(anchor, popover.id);
-    }
-    if (popover) {
-        popover.remove();
-        popoverElements.delete(el);
-    }
-    anchorElements.delete(el);
-    timeoutState.delete(el);
-}
-// ============================================================================
-// Component Definition
-// ============================================================================
-/**
- * TyTooltip Web Component
- */
+clearTimeouts(el);
+cleanupAutoUpdate(el);
+const eventsCleanup = eventCleanup.get(el);
+if (eventsCleanup) {
+eventsCleanup();
+eventCleanup.delete(el);
+}
+const popover = popoverElements.get(el);
+const anchor = anchorElements.get(el);
+if (popover && anchor) {
+removeDescribedBy(anchor, popover.id);
+}
+if (popover) {
+popover.remove();
+popoverElements.delete(el);
+}
+anchorElements.delete(el);
+timeoutState.delete(el);
+}
 export class TyTooltip extends HTMLElement {
-    /** Observed attributes */
-    static get observedAttributes() {
-        return ['placement', 'offset', 'delay', 'disabled', 'flavor'];
-    }
-    constructor() {
-        super();
-        /** Internal open state */
-        this._open = false;
-        this.attachShadow({ mode: 'open' });
-    }
-    connectedCallback() {
-        // Initialize open state
-        this._open = false;
-        // Inject styles (for :host display: contents)
-        ensureStyles(this.shadowRoot, tooltipStyles);
-        // Setup events on anchor
-        setupEvents(this);
-        // Eagerly create the (hidden) popover so role="tooltip" + the anchor's
-        // aria-describedby exist from connect, not only after the first show —
-        // a keyboard user tabbing to the trigger must not wait out the hover
-        // delay just to get an accessible description.
-        getOrCreatePopover(this);
-    }
-    disconnectedCallback() {
-        cleanup(this);
-    }
-    attributeChangedCallback(name, _oldValue, newValue) {
-        // Restyle the popover on flavor change even while hidden — it's cached
-        // in popoverElements once created, so a change made while closed would
-        // otherwise be silently lost until the element is torn down.
-        if (name === 'flavor') {
-            const popover = popoverElements.get(this);
-            if (popover) {
-                const flavor = validateFlavor(newValue);
-                applyFlavorStyles(popover, flavor);
-            }
-        }
-        // Close tooltip if disabled
-        if (name === 'disabled' && newValue !== null) {
-            hideTooltip(this);
-        }
-    }
-}
-// Register the custom element
+static get observedAttributes() {
+return ['placement', 'offset', 'delay', 'disabled', 'flavor'];
+}
+constructor() {
+super();
+this._open = false;
+this.attachShadow({ mode: 'open' });
+}
+connectedCallback() {
+this._open = false;
+ensureStyles(this.shadowRoot, tooltipStyles);
+setupEvents(this);
+getOrCreatePopover(this);
+}
+disconnectedCallback() {
+cleanup(this);
+}
+attributeChangedCallback(name, _oldValue, newValue) {
+if (name === 'flavor') {
+const popover = popoverElements.get(this);
+if (popover) {
+const flavor = validateFlavor(newValue);
+applyFlavorStyles(popover, flavor);
+}
+}
+if (name === 'disabled' && newValue !== null) {
+hideTooltip(this);
+}
+}
+}
 if (!customElements.get('ty-tooltip')) {
-    customElements.define('ty-tooltip', TyTooltip);
+customElements.define('ty-tooltip', TyTooltip);
 }
-//# sourceMappingURL=tooltip.js.map