@sc4rfurryx/proteusjs 1.1.0 → 1.1.1

package/dist/proteus.js

@@ -1,5 +1,5 @@
 /*!
- * ProteusJS v1.1.0
+ * ProteusJS v1.1.1
  * Shape-shifting responsive design that adapts like the sea god himself
  * (c) 2025 sc4rfurry
  * Released under the MIT License
@@ -16511,6 +16511,7 @@
             setupJSFallback();
         }
         return {
+            update: updatePosition,
             destroy
         };
     }
@@ -17089,504 +17090,59 @@
 
     /**
      * @sc4rfurryx/proteusjs/a11y-audit
-     * Accessibility audits for development (dev-only)
+     * Lightweight accessibility audits for development
      *
      * @version 1.1.0
      * @author sc4rfurry
      * @license MIT
      */
-    /**
-     * Run accessibility audits with actionable output
-     * DEV-ONLY: This module should be tree-shaken in production
-     */
     async function audit(target = document, options = {}) {
-        // Ensure this only runs in development
-        if (process.env['NODE_ENV'] === 'production') {
-            console.warn('a11y-audit should not be used in production');
-            return {
-                violations: [],
-                passes: 0,
-                incomplete: 0,
-                timestamp: Date.now(),
-                url: window.location.href
-            };
+        if (typeof window === 'undefined' || process.env['NODE_ENV'] === 'production') {
+            return { violations: [], passes: 0, timestamp: Date.now(), url: '' };
         }
-        const { rules = ['color-contrast', 'heading-order', 'image-alt', 'label', 'link-name', 'button-name'], format = 'console', openInBrowser = false } = options;
+        const { rules = ['images', 'headings', 'forms'], format = 'console' } = options;
         const violations = [];
         let passes = 0;
-        let incomplete = 0;
-        // Basic accessibility checks
-        const checks = {
-            'color-contrast': checkColorContrast,
-            'heading-order': checkHeadingOrder,
-            'image-alt': checkImageAlt,
-            'label': checkFormLabels,
-            'link-name': checkLinkNames,
-            'button-name': checkButtonNames,
-            'focus-visible': checkFocusVisible,
-            'aria-labels': checkAriaLabels,
-            'landmark-roles': checkLandmarkRoles,
-            'skip-links': checkSkipLinks
-        };
-        // Run selected checks
-        for (const ruleId of rules) {
-            if (checks[ruleId]) {
-                try {
-                    const result = await checks[ruleId](target);
-                    if (result.violations.length > 0) {
-                        violations.push(...result.violations);
-                    }
-                    else {
-                        passes++;
-                    }
-                }
-                catch (error) {
-                    incomplete++;
-                    console.warn(`Failed to run accessibility check: ${ruleId}`, error);
-                }
-            }
-        }
-        const report = {
-            violations,
-            passes,
-            incomplete,
-            timestamp: Date.now(),
-            url: window.location.href
-        };
-        // Output results
-        if (format === 'console') {
-            outputToConsole(report);
-        }
-        if (openInBrowser) {
-            openReportInBrowser(report);
-        }
-        return report;
-    }
-    // Individual check functions
-    async function checkColorContrast(target) {
-        const violations = [];
-        const elements = target.querySelectorAll('*');
-        elements.forEach(element => {
-            const style = getComputedStyle(element);
-            const color = style.color;
-            const backgroundColor = style.backgroundColor;
-            // Simple contrast check (would need more sophisticated implementation)
-            if (color && backgroundColor && color !== 'rgba(0, 0, 0, 0)' && backgroundColor !== 'rgba(0, 0, 0, 0)') {
-                const contrast = calculateContrast(color, backgroundColor);
-                if (contrast < 4.5) {
-                    violations.push({
-                        id: 'color-contrast',
-                        impact: 'serious',
-                        nodes: 1,
-                        help: 'Elements must have sufficient color contrast',
-                        fix: `Increase contrast ratio to at least 4.5:1. Current: ${contrast.toFixed(2)}:1`,
-                        elements: [element]
-                    });
-                }
-            }
-        });
-        return { violations };
-    }
-    async function checkHeadingOrder(target) {
-        const violations = [];
-        const headings = target.querySelectorAll('h1, h2, h3, h4, h5, h6');
-        let lastLevel = 0;
-        headings.forEach(heading => {
-            const level = parseInt(heading.tagName.charAt(1));
-            if (level > lastLevel + 1) {
+        if (rules.includes('images')) {
+            const imgs = target.querySelectorAll('img:not([alt])');
+            if (imgs.length > 0) {
                 violations.push({
-                    id: 'heading-order',
-                    impact: 'moderate',
-                    nodes: 1,
-                    help: 'Heading levels should only increase by one',
-                    fix: `Change ${heading.tagName} to H${lastLevel + 1} or add intermediate headings`,
-                    elements: [heading]
+                    id: 'image-alt', impact: 'critical', nodes: imgs.length, help: 'Images need alt text'
                 });
             }
-            lastLevel = level;
-        });
-        return { violations };
-    }
-    async function checkImageAlt(target) {
-        const violations = [];
-        const images = target.querySelectorAll('img');
-        images.forEach(img => {
-            if (!img.hasAttribute('alt')) {
-                violations.push({
-                    id: 'image-alt',
-                    impact: 'critical',
-                    nodes: 1,
-                    help: 'Images must have alternative text',
-                    fix: 'Add alt attribute with descriptive text or alt="" for decorative images',
-                    elements: [img]
-                });
-            }
-        });
-        return { violations };
-    }
-    async function checkFormLabels(target) {
-        const violations = [];
-        const inputs = target.querySelectorAll('input, select, textarea');
-        inputs.forEach(input => {
-            const hasLabel = input.hasAttribute('aria-label') ||
-                input.hasAttribute('aria-labelledby') ||
-                target.querySelector(`label[for="${input.id}"]`) ||
-                input.closest('label');
-            if (!hasLabel) {
-                violations.push({
-                    id: 'label',
-                    impact: 'critical',
-                    nodes: 1,
-                    help: 'Form elements must have labels',
-                    fix: 'Add a label element, aria-label, or aria-labelledby attribute',
-                    elements: [input]
-                });
-            }
-        });
-        return { violations };
-    }
-    async function checkLinkNames(target) {
-        const violations = [];
-        const links = target.querySelectorAll('a[href]');
-        links.forEach(link => {
-            const text = link.textContent?.trim();
-            const ariaLabel = link.getAttribute('aria-label');
-            if (!text && !ariaLabel) {
-                violations.push({
-                    id: 'link-name',
-                    impact: 'serious',
-                    nodes: 1,
-                    help: 'Links must have discernible text',
-                    fix: 'Add descriptive text content or aria-label attribute',
-                    elements: [link]
-                });
-            }
-        });
-        return { violations };
-    }
-    async function checkButtonNames(target) {
-        const violations = [];
-        const buttons = target.querySelectorAll('button, input[type="button"], input[type="submit"]');
-        buttons.forEach(button => {
-            const text = button.textContent?.trim();
-            const ariaLabel = button.getAttribute('aria-label');
-            const value = button.getAttribute('value');
-            if (!text && !ariaLabel && !value) {
-                violations.push({
-                    id: 'button-name',
-                    impact: 'serious',
-                    nodes: 1,
-                    help: 'Buttons must have discernible text',
-                    fix: 'Add text content, aria-label, or value attribute',
-                    elements: [button]
-                });
-            }
-        });
-        return { violations };
-    }
-    async function checkFocusVisible(target) {
-        const violations = [];
-        const focusableElements = target.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-        focusableElements.forEach(element => {
-            const styles = getComputedStyle(element);
-            const hasVisibleFocus = styles.outline !== 'none' && styles.outline !== '0px' &&
-                styles.outline !== '0' && styles.outlineWidth !== '0px';
-            // Check if element has custom focus styles
-            const hasCustomFocus = styles.boxShadow.includes('inset') ||
-                styles.border !== styles.borderColor ||
-                element.hasAttribute('data-focus-visible');
-            if (!hasVisibleFocus && !hasCustomFocus) {
-                violations.push({
-                    id: 'focus-visible',
-                    impact: 'serious',
-                    nodes: 1,
-                    help: 'Interactive elements must have visible focus indicators',
-                    fix: 'Add outline, box-shadow, or other visible focus styles',
-                    elements: [element]
-                });
-            }
-        });
-        return { violations };
-    }
-    async function checkAriaLabels(target) {
-        const violations = [];
-        // Check for aria-labelledby pointing to non-existent elements
-        const elementsWithLabelledBy = target.querySelectorAll('[aria-labelledby]');
-        elementsWithLabelledBy.forEach(element => {
-            const labelledBy = element.getAttribute('aria-labelledby');
-            if (labelledBy) {
-                const labelIds = labelledBy.split(' ');
-                const missingIds = labelIds.filter(id => !target.querySelector(`#${id}`));
-                if (missingIds.length > 0) {
-                    violations.push({
-                        id: 'aria-labelledby-invalid',
-                        impact: 'serious',
-                        nodes: 1,
-                        help: 'aria-labelledby must reference existing elements',
-                        fix: `Fix or remove references to missing IDs: ${missingIds.join(', ')}`,
-                        elements: [element]
-                    });
-                }
-            }
-        });
-        // Check for aria-describedby pointing to non-existent elements
-        const elementsWithDescribedBy = target.querySelectorAll('[aria-describedby]');
-        elementsWithDescribedBy.forEach(element => {
-            const describedBy = element.getAttribute('aria-describedby');
-            if (describedBy) {
-                const descriptionIds = describedBy.split(' ');
-                const missingIds = descriptionIds.filter(id => !target.querySelector(`#${id}`));
-                if (missingIds.length > 0) {
-                    violations.push({
-                        id: 'aria-describedby-invalid',
-                        impact: 'moderate',
-                        nodes: 1,
-                        help: 'aria-describedby must reference existing elements',
-                        fix: `Fix or remove references to missing IDs: ${missingIds.join(', ')}`,
-                        elements: [element]
-                    });
-                }
-            }
-        });
-        return { violations };
-    }
-    async function checkLandmarkRoles(target) {
-        const violations = [];
-        // Check for missing main landmark
-        const mainElements = target.querySelectorAll('main, [role="main"]');
-        if (mainElements.length === 0) {
-            violations.push({
-                id: 'landmark-main-missing',
-                impact: 'moderate',
-                nodes: 0,
-                help: 'Page should have a main landmark',
-                fix: 'Add a <main> element or role="main" to identify the main content area'
-            });
-        }
-        else if (mainElements.length > 1) {
-            violations.push({
-                id: 'landmark-main-multiple',
-                impact: 'moderate',
-                nodes: mainElements.length,
-                help: 'Page should have only one main landmark',
-                fix: 'Ensure only one main element or role="main" exists per page',
-                elements: Array.from(mainElements)
-            });
-        }
-        // Check for navigation landmarks without labels when multiple exist
-        const navElements = target.querySelectorAll('nav, [role="navigation"]');
-        if (navElements.length > 1) {
-            navElements.forEach(nav => {
-                const hasLabel = nav.hasAttribute('aria-label') ||
-                    nav.hasAttribute('aria-labelledby') ||
-                    nav.querySelector('h1, h2, h3, h4, h5, h6');
-                if (!hasLabel) {
-                    violations.push({
-                        id: 'landmark-nav-unlabeled',
-                        impact: 'moderate',
-                        nodes: 1,
-                        help: 'Multiple navigation landmarks should be labeled',
-                        fix: 'Add aria-label or aria-labelledby to distinguish navigation areas',
-                        elements: [nav]
-                    });
-                }
-            });
+            passes += target.querySelectorAll('img[alt]').length;
         }
-        return { violations };
-    }
-    async function checkSkipLinks(target) {
-        const violations = [];
-        // Check for skip links in documents with navigation
-        const navElements = target.querySelectorAll('nav, [role="navigation"]');
-        const mainElement = target.querySelector('main, [role="main"]');
-        if (navElements.length > 0 && mainElement) {
-            const skipLinks = target.querySelectorAll('a[href^="#"]');
-            const hasSkipToMain = Array.from(skipLinks).some(link => {
-                const href = link.getAttribute('href');
-                return href && (href === '#main' ||
-                    href === `#${mainElement.id}` ||
-                    link.textContent?.toLowerCase().includes('skip to main') ||
-                    link.textContent?.toLowerCase().includes('skip to content'));
-            });
-            if (!hasSkipToMain) {
+        if (rules.includes('headings')) {
+            const h1s = target.querySelectorAll('h1');
+            if (h1s.length !== 1) {
                 violations.push({
-                    id: 'skip-link-missing',
-                    impact: 'moderate',
-                    nodes: 0,
-                    help: 'Page with navigation should have skip links',
-                    fix: 'Add a skip link to the main content area for keyboard users'
+                    id: 'heading-structure', impact: 'moderate', nodes: h1s.length, help: 'Page should have exactly one h1'
                 });
             }
+            else
+                passes++;
         }
-        // Check that skip links are properly positioned (should be first focusable element)
-        const firstFocusable = target.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-        if (firstFocusable && firstFocusable.tagName === 'A') {
-            const href = firstFocusable.getAttribute('href');
-            if (!href?.startsWith('#')) {
+        if (rules.includes('forms')) {
+            const unlabeled = target.querySelectorAll('input:not([aria-label]):not([aria-labelledby])');
+            if (unlabeled.length > 0) {
                 violations.push({
-                    id: 'skip-link-not-first',
-                    impact: 'minor',
-                    nodes: 1,
-                    help: 'Skip links should be the first focusable elements',
-                    fix: 'Move skip links to the beginning of the document',
-                    elements: [firstFocusable]
+                    id: 'form-labels', impact: 'critical', nodes: unlabeled.length, help: 'Form inputs need labels'
                 });
             }
+            passes += target.querySelectorAll('input[aria-label], input[aria-labelledby]').length;
         }
-        return { violations };
-    }
-    // Utility functions
-    function calculateContrast(color1, color2) {
-        // Convert colors to RGB values
-        const rgb1 = parseColor(color1);
-        const rgb2 = parseColor(color2);
-        if (!rgb1 || !rgb2)
-            return 4.5; // Fallback if parsing fails
-        // Calculate relative luminance
-        const l1 = getRelativeLuminance(rgb1);
-        const l2 = getRelativeLuminance(rgb2);
-        // Calculate contrast ratio
-        const lighter = Math.max(l1, l2);
-        const darker = Math.min(l1, l2);
-        return (lighter + 0.05) / (darker + 0.05);
-    }
-    function parseColor(color) {
-        // Handle rgb() format
-        const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
-        if (rgbMatch && rgbMatch[1] && rgbMatch[2] && rgbMatch[3]) {
-            return {
-                r: parseInt(rgbMatch[1], 10),
-                g: parseInt(rgbMatch[2], 10),
-                b: parseInt(rgbMatch[3], 10)
-            };
-        }
-        // Handle hex format
-        const hexMatch = color.match(/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
-        if (hexMatch && hexMatch[1] && hexMatch[2] && hexMatch[3]) {
-            return {
-                r: parseInt(hexMatch[1], 16),
-                g: parseInt(hexMatch[2], 16),
-                b: parseInt(hexMatch[3], 16)
-            };
-        }
-        // Handle named colors (basic set)
-        const namedColors = {
-            'black': { r: 0, g: 0, b: 0 },
-            'white': { r: 255, g: 255, b: 255 },
-            'red': { r: 255, g: 0, b: 0 },
-            'green': { r: 0, g: 128, b: 0 },
-            'blue': { r: 0, g: 0, b: 255 }
+        const report = {
+            violations, passes, timestamp: Date.now(),
+            url: typeof window !== 'undefined' ? window.location.href : ''
         };
-        return namedColors[color.toLowerCase()] || null;
-    }
-    function getRelativeLuminance(rgb) {
-        const { r, g, b } = rgb;
-        // Convert to sRGB
-        const rsRGB = r / 255;
-        const gsRGB = g / 255;
-        const bsRGB = b / 255;
-        // Apply gamma correction
-        const rLinear = rsRGB <= 0.03928 ? rsRGB / 12.92 : Math.pow((rsRGB + 0.055) / 1.055, 2.4);
-        const gLinear = gsRGB <= 0.03928 ? gsRGB / 12.92 : Math.pow((gsRGB + 0.055) / 1.055, 2.4);
-        const bLinear = bsRGB <= 0.03928 ? bsRGB / 12.92 : Math.pow((bsRGB + 0.055) / 1.055, 2.4);
-        // Calculate relative luminance
-        return 0.2126 * rLinear + 0.7152 * gLinear + 0.0722 * bLinear;
-    }
-    function outputToConsole(report) {
-        console.group('🔍 Accessibility Audit Results');
-        if (report.violations.length === 0) {
-            console.log('✅ No accessibility violations found!');
-        }
-        else {
-            console.log(`❌ Found ${report.violations.length} accessibility violations:`);
-            report.violations.forEach(violation => {
-                const emoji = violation.impact === 'critical' ? '🚨' :
-                    violation.impact === 'serious' ? '⚠️' :
-                        violation.impact === 'moderate' ? '⚡' : 'ℹ️';
-                console.group(`${emoji} ${violation.help}`);
-                console.log(`Impact: ${violation.impact}`);
-                console.log(`Fix: ${violation.fix}`);
-                if (violation.elements) {
-                    console.log('Elements:', violation.elements);
-                }
-                console.groupEnd();
-            });
-        }
-        console.log(`✅ ${report.passes} checks passed`);
-        if (report.incomplete > 0) {
-            console.log(`⚠️ ${report.incomplete} checks incomplete`);
+        if (format === 'console' && violations.length > 0) {
+            console.group('🔍 A11y Audit Results');
+            violations.forEach(v => console.warn(`${v.impact}: ${v.help}`));
+            console.groupEnd();
         }
-        console.groupEnd();
-    }
-    function openReportInBrowser(report) {
-        const html = generateHTMLReport(report);
-        const blob = new Blob([html], { type: 'text/html' });
-        const url = URL.createObjectURL(blob);
-        const newWindow = window.open(url, '_blank');
-        if (!newWindow) {
-            console.warn('Could not open report in new window. Please check popup blocker settings.');
-            // Fallback: download the report
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = `proteus-a11y-report-${Date.now()}.html`;
-            link.click();
-        }
-        // Clean up the blob URL after a delay
-        setTimeout(() => URL.revokeObjectURL(url), 1000);
-    }
-    function generateHTMLReport(report) {
-        const violationsList = report.violations.map(violation => `
-    <div class="violation violation--${violation.impact}">
-      <h3>${violation.help}</h3>
-      <p><strong>Impact:</strong> ${violation.impact}</p>
-      <p><strong>Fix:</strong> ${violation.fix}</p>
-      <p><strong>Affected elements:</strong> ${violation.nodes}</p>
-    </div>
-  `).join('');
-        return `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ProteusJS Accessibility Report</title>
-    <style>
-        body { font-family: system-ui, sans-serif; margin: 2rem; line-height: 1.6; }
-        .header { border-bottom: 2px solid #e5e7eb; padding-bottom: 1rem; margin-bottom: 2rem; }
-        .summary { background: #f3f4f6; padding: 1rem; border-radius: 8px; margin-bottom: 2rem; }
-        .violation { border-left: 4px solid #ef4444; padding: 1rem; margin-bottom: 1rem; background: #fef2f2; }
-        .violation--critical { border-color: #dc2626; background: #fef2f2; }
-        .violation--serious { border-color: #ea580c; background: #fff7ed; }
-        .violation--moderate { border-color: #d97706; background: #fffbeb; }
-        .violation--minor { border-color: #65a30d; background: #f7fee7; }
-        .violation h3 { margin-top: 0; color: #374151; }
-        .no-violations { text-align: center; color: #059669; font-size: 1.25rem; padding: 2rem; }
-    </style>
-</head>
-<body>
-    <div class="header">
-        <h1>🌊 ProteusJS Accessibility Report</h1>
-        <p>Generated on ${new Date(report.timestamp).toLocaleString()}</p>
-        <p>URL: ${report.url}</p>
-    </div>
-
-    <div class="summary">
-        <h2>Summary</h2>
-        <p><strong>Violations:</strong> ${report.violations.length}</p>
-        <p><strong>Checks passed:</strong> ${report.passes}</p>
-        <p><strong>Incomplete checks:</strong> ${report.incomplete}</p>
-    </div>
-
-    ${report.violations.length === 0 ?
-        '<div class="no-violations">✅ No accessibility violations found!</div>' :
-        `<h2>Violations</h2>${violationsList}`}
-</body>
-</html>`;
+        return report;
     }
-    // Export default object for convenience
-    var index$4 = {
-        audit
-    };
+    var index$4 = { audit };
 
     var index$5 = /*#__PURE__*/Object.freeze({
         __proto__: null,
@@ -17596,450 +17152,116 @@
 
     /**
      * @sc4rfurryx/proteusjs/a11y-primitives
-     * Headless accessibility patterns (no styles)
+     * Lightweight accessibility patterns
      *
      * @version 1.1.0
      * @author sc4rfurry
      * @license MIT
      */
-    /**
-     * Dialog primitive with proper ARIA and focus management
-     */
     function dialog(root, opts = {}) {
-        const rootEl = typeof root === 'string' ? document.querySelector(root) : root;
-        if (!rootEl)
-            throw new Error('Dialog root element not found');
+        const el = typeof root === 'string' ? document.querySelector(root) : root;
+        if (!el)
+            throw new Error('Dialog element not found');
         const { modal = true, restoreFocus = true } = opts;
-        let isOpen = false;
-        const setup = () => {
-            rootEl.setAttribute('role', 'dialog');
-            if (modal) {
-                rootEl.setAttribute('aria-modal', 'true');
-            }
-            // Ensure dialog is initially hidden
-            if (!rootEl.hasAttribute('hidden')) {
-                rootEl.setAttribute('hidden', '');
-            }
-        };
-        const handleKeyDown = (e) => {
-            if (e.key === 'Escape' && isOpen) ;
-        };
-        setup();
-        document.addEventListener('keydown', handleKeyDown);
-        return {
-            destroy: () => {
-                document.removeEventListener('keydown', handleKeyDown);
-            }
+        const close = () => {
         };
+        return { destroy: () => close() };
     }
-    /**
-     * Tooltip primitive with delay and proper ARIA
-     */
-    function tooltip(trigger, panel, opts = {}) {
-        const triggerEl = typeof trigger === 'string' ? document.querySelector(trigger) : trigger;
-        const panelEl = typeof panel === 'string' ? document.querySelector(panel) : panel;
-        if (!triggerEl || !panelEl) {
-            throw new Error('Both trigger and panel elements must exist');
-        }
-        const { delay = 500 } = opts;
-        let timeoutId = null;
-        let isVisible = false;
-        const setup = () => {
-            const tooltipId = panelEl.id || `tooltip-${Math.random().toString(36).substring(2, 11)}`;
-            panelEl.id = tooltipId;
-            panelEl.setAttribute('role', 'tooltip');
-            triggerEl.setAttribute('aria-describedby', tooltipId);
-            // Initially hidden
-            panelEl.style.display = 'none';
-        };
+    function tooltip(trigger, content, opts = {}) {
+        const { delay = 300 } = opts;
+        let timeout;
         const show = () => {
-            if (isVisible)
-                return;
-            panelEl.style.display = 'block';
-            isVisible = true;
+            clearTimeout(timeout);
+            timeout = window.setTimeout(() => {
+                content.setAttribute('role', 'tooltip');
+                trigger.setAttribute('aria-describedby', content.id || 'tooltip');
+                content.style.display = 'block';
+            }, delay);
         };
         const hide = () => {
-            if (!isVisible)
-                return;
-            panelEl.style.display = 'none';
-            isVisible = false;
+            clearTimeout(timeout);
+            content.style.display = 'none';
+            trigger.removeAttribute('aria-describedby');
         };
-        const handleMouseEnter = () => {
-            if (timeoutId)
-                clearTimeout(timeoutId);
-            timeoutId = window.setTimeout(show, delay);
-        };
-        const handleMouseLeave = () => {
-            if (timeoutId) {
-                clearTimeout(timeoutId);
-                timeoutId = null;
-            }
-            hide();
-        };
-        const handleFocus = () => {
-            show();
-        };
-        const handleBlur = () => {
-            hide();
-        };
-        setup();
-        triggerEl.addEventListener('mouseenter', handleMouseEnter);
-        triggerEl.addEventListener('mouseleave', handleMouseLeave);
-        triggerEl.addEventListener('focus', handleFocus);
-        triggerEl.addEventListener('blur', handleBlur);
+        trigger.addEventListener('mouseenter', show);
+        trigger.addEventListener('mouseleave', hide);
+        trigger.addEventListener('focus', show);
+        trigger.addEventListener('blur', hide);
         return {
             destroy: () => {
-                if (timeoutId)
-                    clearTimeout(timeoutId);
-                triggerEl.removeEventListener('mouseenter', handleMouseEnter);
-                triggerEl.removeEventListener('mouseleave', handleMouseLeave);
-                triggerEl.removeEventListener('focus', handleFocus);
-                triggerEl.removeEventListener('blur', handleBlur);
-                hide();
+                clearTimeout(timeout);
+                trigger.removeEventListener('mouseenter', show);
+                trigger.removeEventListener('mouseleave', hide);
+                trigger.removeEventListener('focus', show);
+                trigger.removeEventListener('blur', hide);
             }
         };
     }
-    /**
-     * Listbox primitive with keyboard navigation
-     */
-    function listbox(root, opts = {}) {
-        const rootEl = typeof root === 'string' ? document.querySelector(root) : root;
-        if (!rootEl)
-            throw new Error('Listbox root element not found');
-        const { multiselect = false } = opts;
-        let currentIndex = -1;
-        const setup = () => {
-            rootEl.setAttribute('role', 'listbox');
-            if (multiselect) {
-                rootEl.setAttribute('aria-multiselectable', 'true');
-            }
-            // Set up options
-            const options = rootEl.querySelectorAll('[role="option"]');
-            options.forEach((option, _index) => {
-                option.setAttribute('aria-selected', 'false');
-                option.setAttribute('tabindex', '-1');
-            });
-            if (options.length > 0) {
-                options[0]?.setAttribute('tabindex', '0');
-                currentIndex = 0;
-            }
-        };
-        const getOptions = () => rootEl.querySelectorAll('[role="option"]');
-        const setCurrentIndex = (index) => {
-            const options = getOptions();
-            if (index < 0 || index >= options.length)
-                return;
-            // Remove tabindex from all options
-            options.forEach(option => option.setAttribute('tabindex', '-1'));
-            // Set current option
-            currentIndex = index;
-            options[currentIndex]?.setAttribute('tabindex', '0');
-            options[currentIndex]?.focus();
-        };
-        const selectOption = (index) => {
-            const options = getOptions();
-            if (index < 0 || index >= options.length)
-                return;
-            if (multiselect) {
-                const isSelected = options[index]?.getAttribute('aria-selected') === 'true';
-                options[index]?.setAttribute('aria-selected', (!isSelected).toString());
-            }
-            else {
-                // Single select - clear all others
-                options.forEach(option => option.setAttribute('aria-selected', 'false'));
-                options[index]?.setAttribute('aria-selected', 'true');
-            }
-        };
-        const handleKeyDown = (e) => {
-            const keyEvent = e;
-            const options = getOptions();
-            switch (keyEvent.key) {
-                case 'ArrowDown':
-                    keyEvent.preventDefault();
-                    setCurrentIndex(Math.min(currentIndex + 1, options.length - 1));
-                    break;
-                case 'ArrowUp':
-                    keyEvent.preventDefault();
-                    setCurrentIndex(Math.max(currentIndex - 1, 0));
-                    break;
-                case 'Home':
-                    keyEvent.preventDefault();
-                    setCurrentIndex(0);
-                    break;
-                case 'End':
-                    keyEvent.preventDefault();
-                    setCurrentIndex(options.length - 1);
-                    break;
-                case 'Enter':
-                case ' ':
-                    keyEvent.preventDefault();
-                    selectOption(currentIndex);
-                    break;
-            }
-        };
-        const handleClick = (e) => {
-            const target = e.target;
-            const option = target.closest('[role="option"]');
-            if (!option)
+    function focusTrap(container) {
+        const focusable = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+        const activate = () => {
+            const elements = container.querySelectorAll(focusable);
+            if (elements.length === 0)
                 return;
-            const options = Array.from(getOptions());
-            const index = options.indexOf(option);
-            if (index >= 0) {
-                setCurrentIndex(index);
-                selectOption(index);
-            }
-        };
-        setup();
-        rootEl.addEventListener('keydown', handleKeyDown);
-        rootEl.addEventListener('click', handleClick);
-        return {
-            destroy: () => {
-                rootEl.removeEventListener('keydown', handleKeyDown);
-                rootEl.removeEventListener('click', handleClick);
-            }
-        };
-    }
-    /**
-     * Combobox primitive with filtering and multiselect
-     */
-    function combobox(root, opts = {}) {
-        const rootEl = typeof root === 'string' ? document.querySelector(root) : root;
-        if (!rootEl)
-            throw new Error('Combobox root element not found');
-        const { multiselect = false, filtering: _filtering } = opts;
-        let isOpen = false;
-        const setup = () => {
-            rootEl.setAttribute('role', 'combobox');
-            rootEl.setAttribute('aria-expanded', 'false');
-            if (multiselect) {
-                rootEl.setAttribute('aria-multiselectable', 'true');
-            }
-        };
-        const handleKeyDown = (e) => {
-            const keyEvent = e;
-            switch (keyEvent.key) {
-                case 'ArrowDown':
-                    keyEvent.preventDefault();
-                    if (!isOpen) {
-                        isOpen = true;
-                        rootEl.setAttribute('aria-expanded', 'true');
-                    }
-                    // Navigate options logic would go here
-                    break;
-                case 'Escape':
-                    keyEvent.preventDefault();
-                    isOpen = false;
-                    rootEl.setAttribute('aria-expanded', 'false');
-                    break;
-            }
-        };
-        setup();
-        rootEl.addEventListener('keydown', handleKeyDown);
-        return {
-            destroy: () => {
-                rootEl.removeEventListener('keydown', handleKeyDown);
-            }
-        };
-    }
-    /**
-     * Tabs primitive with keyboard navigation
-     */
-    function tabs(root) {
-        const rootEl = typeof root === 'string' ? document.querySelector(root) : root;
-        if (!rootEl)
-            throw new Error('Tabs root element not found');
-        let currentIndex = 0;
-        const setup = () => {
-            const tabList = rootEl.querySelector('[role="tablist"]');
-            const tabs = rootEl.querySelectorAll('[role="tab"]');
-            const panels = rootEl.querySelectorAll('[role="tabpanel"]');
-            if (!tabList) {
-                rootEl.setAttribute('role', 'tablist');
-            }
-            tabs.forEach((tab, index) => {
-                tab.setAttribute('tabindex', index === 0 ? '0' : '-1');
-                tab.setAttribute('aria-selected', index === 0 ? 'true' : 'false');
-            });
-            panels.forEach((panel, index) => {
-                panel.setAttribute('hidden', index === 0 ? '' : 'true');
-            });
-        };
-        const handleKeyDown = (e) => {
-            const keyEvent = e;
-            const tabs = Array.from(rootEl.querySelectorAll('[role="tab"]'));
-            switch (keyEvent.key) {
-                case 'ArrowRight':
-                    keyEvent.preventDefault();
-                    currentIndex = (currentIndex + 1) % tabs.length;
-                    activateTab(currentIndex);
-                    break;
-                case 'ArrowLeft':
-                    keyEvent.preventDefault();
-                    currentIndex = currentIndex === 0 ? tabs.length - 1 : currentIndex - 1;
-                    activateTab(currentIndex);
-                    break;
-            }
-        };
-        const activateTab = (index) => {
-            const tabs = rootEl.querySelectorAll('[role="tab"]');
-            const panels = rootEl.querySelectorAll('[role="tabpanel"]');
-            tabs.forEach((tab, i) => {
-                tab.setAttribute('tabindex', i === index ? '0' : '-1');
-                tab.setAttribute('aria-selected', i === index ? 'true' : 'false');
-                if (i === index) {
-                    tab.focus();
-                }
-            });
-            panels.forEach((panel, i) => {
-                if (i === index) {
-                    panel.removeAttribute('hidden');
+            const first = elements[0];
+            const last = elements[elements.length - 1];
+            const handleTab = (e) => {
+                if (e.key !== 'Tab')
+                    return;
+                if (e.shiftKey && document.activeElement === first) {
+                    e.preventDefault();
+                    last.focus();
                 }
-                else {
-                    panel.setAttribute('hidden', 'true');
+                else if (!e.shiftKey && document.activeElement === last) {
+                    e.preventDefault();
+                    first.focus();
                 }
-            });
+            };
+            container.addEventListener('keydown', handleTab);
+            first.focus();
+            return () => container.removeEventListener('keydown', handleTab);
         };
-        setup();
-        rootEl.addEventListener('keydown', handleKeyDown);
+        let deactivate = () => { };
         return {
-            destroy: () => {
-                rootEl.removeEventListener('keydown', handleKeyDown);
-            }
+            activate: () => { deactivate = activate() || (() => { }); },
+            deactivate: () => deactivate()
         };
     }
-    /**
-     * Menu primitive with keyboard navigation
-     */
-    function menu(root) {
-        const rootEl = typeof root === 'string' ? document.querySelector(root) : root;
-        if (!rootEl)
-            throw new Error('Menu root element not found');
-        let currentIndex = -1;
-        const setup = () => {
-            rootEl.setAttribute('role', 'menu');
-            const items = rootEl.querySelectorAll('[role="menuitem"]');
-            items.forEach((item, index) => {
-                item.setAttribute('tabindex', index === 0 ? '0' : '-1');
-            });
-            if (items.length > 0) {
-                currentIndex = 0;
-            }
-        };
-        const handleKeyDown = (e) => {
-            const keyEvent = e;
-            const items = Array.from(rootEl.querySelectorAll('[role="menuitem"]'));
-            switch (keyEvent.key) {
+    function menu(container) {
+        const items = container.querySelectorAll('[role="menuitem"]');
+        let currentIndex = 0;
+        const navigate = (e) => {
+            switch (e.key) {
                 case 'ArrowDown':
-                    keyEvent.preventDefault();
+                    e.preventDefault();
                     currentIndex = (currentIndex + 1) % items.length;
-                    setCurrentItem(currentIndex);
+                    items[currentIndex].focus();
                     break;
                 case 'ArrowUp':
-                    keyEvent.preventDefault();
+                    e.preventDefault();
                     currentIndex = currentIndex === 0 ? items.length - 1 : currentIndex - 1;
-                    setCurrentItem(currentIndex);
-                    break;
-                case 'Enter':
-                case ' ':
-                    keyEvent.preventDefault();
-                    if (items[currentIndex]) {
-                        items[currentIndex].click();
-                    }
+                    items[currentIndex].focus();
                     break;
-            }
-        };
-        const setCurrentItem = (index) => {
-            const items = rootEl.querySelectorAll('[role="menuitem"]');
-            items.forEach((item, i) => {
-                item.setAttribute('tabindex', i === index ? '0' : '-1');
-                if (i === index) {
-                    item.focus();
-                }
-            });
-        };
-        setup();
-        rootEl.addEventListener('keydown', handleKeyDown);
-        return {
-            destroy: () => {
-                rootEl.removeEventListener('keydown', handleKeyDown);
-            }
-        };
-    }
-    /**
-     * Focus trap utility
-     */
-    function focusTrap(root) {
-        const rootEl = typeof root === 'string' ? document.querySelector(root) : root;
-        if (!rootEl)
-            throw new Error('Focus trap root element not found');
-        let isActive = false;
-        let focusableElements = [];
-        const updateFocusableElements = () => {
-            const selector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-            focusableElements = Array.from(rootEl.querySelectorAll(selector));
-        };
-        const handleKeyDown = (e) => {
-            if (!isActive || e.key !== 'Tab')
-                return;
-            updateFocusableElements();
-            if (focusableElements.length === 0)
-                return;
-            const firstElement = focusableElements[0];
-            const lastElement = focusableElements[focusableElements.length - 1];
-            if (e.shiftKey) {
-                if (document.activeElement === firstElement) {
-                    e.preventDefault();
-                    lastElement.focus();
-                }
-            }
-            else {
-                if (document.activeElement === lastElement) {
+                case 'Escape':
                     e.preventDefault();
-                    firstElement.focus();
-                }
-            }
-        };
-        const activate = () => {
-            if (isActive)
-                return;
-            isActive = true;
-            updateFocusableElements();
-            if (focusableElements.length > 0) {
-                focusableElements[0].focus();
+                    container.dispatchEvent(new CustomEvent('menu:close'));
+                    break;
             }
-            document.addEventListener('keydown', handleKeyDown);
-        };
-        const deactivate = () => {
-            if (!isActive)
-                return;
-            isActive = false;
-            document.removeEventListener('keydown', handleKeyDown);
         };
+        container.setAttribute('role', 'menu');
+        container.addEventListener('keydown', navigate);
         return {
-            activate,
-            deactivate
+            destroy: () => container.removeEventListener('keydown', navigate)
         };
     }
-    // Export all functions
-    var index$2 = {
-        dialog,
-        tooltip,
-        combobox,
-        listbox,
-        tabs,
-        menu,
-        focusTrap
-    };
+    var index$2 = { dialog, tooltip, focusTrap, menu };
 
     var index$3 = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        combobox: combobox,
         default: index$2,
         dialog: dialog,
         focusTrap: focusTrap,
-        listbox: listbox,
         menu: menu,
-        tabs: tabs,
         tooltip: tooltip
     });