tyrell-components 1.0.0-RC14 → 1.0.0-RC15

package/lib/components/tooltip.js

@@ -7,336 +7,336 @@ const timeoutState = new WeakMap();
 const popoverElements = new WeakMap();
 const anchorElements = new WeakMap();
 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';
 }
 function getTimeoutState(el) {
-    let state = timeoutState.get(el);
-    if (!state) {
-        state = { showTimeout: null, hideTimeout: null };
-        timeoutState.set(el, state);
-    }
-    return state;
+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);
 }
 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;
+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')),
-    };
+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;
 }
 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(' '));
+}
 }
 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');
-    }
+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 = `
+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;
+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; }
+.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);
+document.head.appendChild(style);
 }
 function getOrCreatePopover(el) {
-    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;
+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) {
-    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;
-        }
-    }
+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;
-    }
-    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];
+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);
-    }
+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;
-    }
-    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);
+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;
-    }
+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;
-    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);
-    }
+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) {
-    }
+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);
+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);
 }
 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);
-    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);
-    });
+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);
-    }
-    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);
+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 {
-    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);
-        }
-    }
+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);
 }