tyrell-components 1.0.0-RC10

package/lib/components/tooltip.js

@@ -0,0 +1,439 @@
+/**
+ * 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 { 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();
+// ============================================================================
+// Helper Functions
+// ============================================================================
+/**
+ * Validate and normalize flavor attribute
+ */
+function validateFlavor(flavor) {
+    const validFlavors = [
+        'dark', 'light', 'primary', 'secondary',
+        'success', 'danger', 'warning', 'info', 'neutral'
+    ];
+    const normalized = (flavor || 'dark');
+    if (!validFlavors.includes(normalized)) {
+        console.warn(`[ty-tooltip] Invalid flavor '${flavor}'. Using 'dark'. ` +
+            `Valid flavors: ${validFlavors.join(', ')}.`);
+        return 'dark';
+    }
+    return normalized;
+}
+/**
+ * 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
+ */
+function parseBoolAttr(el, 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
+ */
+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)
+ */
+function getAnchorElement(el) {
+    return el.parentElement;
+}
+/**
+ * Get or create popover element using Popover API
+ * The popover is created in document.body for top-layer placement
+ */
+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).substr(2, 9)}`;
+        popover.setAttribute('popover', 'manual');
+        popover.className = 'ty-tooltip-popover';
+        // Get initial attributes
+        const { flavor } = getTooltipAttributes(el);
+        popover.setAttribute('data-flavor', flavor);
+        // Copy content from slot
+        const content = el.textContent || '';
+        popover.textContent = content;
+        // 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, #1f2937);
+      color: #ffffff;
+      border: none;
+      border-radius: 6px;
+      font-size: var(--ty-font-sm, 14px);
+      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;
+        // Apply flavor-specific styles
+        applyFlavorStyles(popover, flavor);
+        // Append to body
+        document.body.appendChild(popover);
+        // Store reference
+        popoverElements.set(el, popover);
+    }
+    return popover;
+}
+/**
+ * Apply flavor-specific styles to popover
+ */
+function applyFlavorStyles(popover, flavor) {
+    // Reset to defaults first
+    popover.style.removeProperty('background');
+    popover.style.removeProperty('color');
+    popover.style.removeProperty('border-color');
+    // Apply flavor-specific styles
+    switch (flavor) {
+        case 'primary':
+            popover.style.background = 'var(--ty-bg-primary, #3b82f6)';
+            popover.style.color = 'var(--ty-color-primary-strong, #eff6ff)';
+            popover.style.borderColor = 'var(--ty-border-primary, #60a5fa)';
+            break;
+        case 'secondary':
+            popover.style.background = 'var(--ty-bg-secondary, #8b5cf6)';
+            popover.style.color = 'var(--ty-color-secondary-strong, #f5f3ff)';
+            popover.style.borderColor = 'var(--ty-border-secondary, #a78bfa)';
+            break;
+        case 'success':
+            popover.style.background = 'var(--ty-bg-success-bold, #10b981)';
+            popover.style.color = 'var(--ty-color-success-strong, #ecfdf5)';
+            popover.style.borderColor = 'var(--ty-border-success, #34d399)';
+            break;
+        case 'danger':
+            popover.style.background = 'var(--ty-bg-danger, #ef4444)';
+            popover.style.color = 'var(--ty-color-danger-strong, #fef2f2)';
+            popover.style.borderColor = 'var(--ty-border-danger, #f87171)';
+            break;
+        case 'warning':
+            popover.style.background = 'var(--ty-bg-warning, #f59e0b)';
+            popover.style.color = 'var(--ty-color-warning-strong, #fffbeb)';
+            popover.style.borderColor = 'var(--ty-border-warning, #fbbf24)';
+            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;
+        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 'neutral':
+            popover.style.background = 'var(--ty-bg-neutral, #6b7280)';
+            popover.style.color = 'var(--ty-color-neutral-strong, #f9fafb)';
+            popover.style.borderColor = 'var(--ty-border-neutral, #9ca3af)';
+            break;
+        case 'dark':
+        default:
+            popover.style.background = 'var(--ty-bg-neutral-soft, #4b5563)';
+            popover.style.color = 'var(--ty-color-neutral-strong, #f3f4f6)';
+            popover.style.borderColor = 'var(--ty-border-strong, #6b7280)';
+            break;
+    }
+}
+/**
+ * Update tooltip position based on current anchor/popover state
+ */
+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
+ */
+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
+ */
+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
+ */
+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
+ */
+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
+ */
+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
+ */
+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
+ */
+function scheduleHide(el) {
+    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;
+    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
+ */
+function cleanup(el) {
+    clearTimeouts(el);
+    cleanupAutoUpdate(el);
+    const cleanup = eventCleanup.get(el);
+    if (cleanup) {
+        cleanup();
+        eventCleanup.delete(el);
+    }
+    // Remove popover from body
+    const popover = popoverElements.get(el);
+    if (popover) {
+        popover.remove();
+        popoverElements.delete(el);
+    }
+    timeoutState.delete(el);
+}
+// ============================================================================
+// Component Definition
+// ============================================================================
+/**
+ * TyTooltip Web Component
+ */
+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);
+    }
+    disconnectedCallback() {
+        cleanup(this);
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        // Update flavor in real-time if tooltip is visible
+        if (name === 'flavor' && this._open) {
+            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
+if (!customElements.get('ty-tooltip')) {
+    customElements.define('ty-tooltip', TyTooltip);
+}
+//# sourceMappingURL=tooltip.js.map

package/lib/components/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../src/components/tooltip.ts"],"names":[],"mappings":"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"}

package/lib/components/wizard.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Wizard Component
+ *
+ * A carousel-based wizard/stepper component with smooth animations, progress tracking, and completion state.
+ * Features horizontal sliding transitions between steps, animated progress line, and step completion tracking.
+ * Behaves like tabs - a "dumb" component that only renders and fires events. All navigation and validation
+ * is controlled by the user.
+ *
+ * Features:
+ * - Carousel animation with smooth sliding transitions between steps
+ * - Fixed dimensions prevent layout shift between steps
+ * - Animated progress line showing completion status
+ * - Step indicators with completed/active/pending states
+ * - Rich indicator support via slots (icons, custom content)
+ * - Independent panel scrolling with scroll position reset
+ * - ResizeObserver for responsive percentage widths
+ * - Smart rendering - only updates DOM when necessary
+ * - Accessibility with ARIA roles and attributes
+ * - Fires events on step clicks - user controls navigation
+ *
+ * @example
+ * <!-- Basic wizard with text labels -->
+ * <ty-wizard width="900px" height="600px" active="welcome">
+ *   <ty-step id="welcome" label="Welcome">
+ *     <div class="p-6">
+ *       <h1>Welcome!</h1>
+ *       <button onclick="goToStep('account')">Next</button>
+ *     </div>
+ *   </ty-step>
+ *   <ty-step id="account" label="Account Setup">
+ *     <div class="p-6">
+ *       <h2>Account Setup</h2>
+ *       <button onclick="goToStep('welcome')">Previous</button>
+ *       <button onclick="goToStep('complete')">Next</button>
+ *     </div>
+ *   </ty-step>
+ * </ty-wizard>
+ *
+ * @example
+ * <!-- Wizard with custom indicators -->
+ * <ty-wizard width="100%" height="700px" active="welcome" completed="welcome,account">
+ *   <!-- Custom indicator icons -->
+ *   <div slot="indicator-welcome">
+ *     <ty-icon name="hand" size="sm"></ty-icon>
+ *   </div>
+ *   <div slot="indicator-account">
+ *     <span class="text-lg font-bold">1</span>
+ *   </div>
+ *
+ *   <ty-step id="welcome" label="Welcome">...</ty-step>
+ *   <ty-step id="account" label="Account">...</ty-step>
+ *   <ty-step id="profile" label="Profile">...</ty-step>
+ * </ty-wizard>
+ */
+/**
+ * Wizard container attributes configuration
+ */
+export interface WizardAttributes {
+    width: string;
+    height: string;
+    active: string | null;
+    completed: string;
+    orientation: 'horizontal' | 'vertical';
+}
+/**
+ * Wizard step change event detail
+ */
+export interface WizardStepChangeDetail {
+    activeId: string;
+    activeIndex: number;
+    previousId: string | null;
+    previousIndex: number | null;
+    direction: 'forward' | 'backward' | 'none';
+}
+/**
+ * TyWizard Web Component
+ */
+export declare class TyWizard extends HTMLElement {
+    /** Observed attributes */
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+//# sourceMappingURL=wizard.d.ts.map

package/lib/components/wizard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard.d.ts","sourceRoot":"","sources":["../../src/components/wizard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AASH;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;CACxC;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,SAAS,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;CAC5C;AAuoBD;;GAEG;AACH,qBAAa,QAAS,SAAQ,WAAW;IACvC,0BAA0B;IAC1B,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IAIjB,oBAAoB;IAIpB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;CAiBxF"}