@sc4rfurryx/proteusjs 1.1.0 → 1.1.1

package/dist/proteus.cjs.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
@@ -16509,6 +16509,7 @@ function tether(floating, opts) {
         setupJSFallback();
     }
     return {
+        update: updatePosition,
         destroy
     };
 }
@@ -17087,504 +17088,59 @@ var index$7 = /*#__PURE__*/Object.freeze({
 
 /**
  * @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,
@@ -17594,450 +17150,116 @@ var index$5 = /*#__PURE__*/Object.freeze({
 
 /**
  * @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
 });