@furystack/shades-common-components 10.0.35 → 12.0.0

package/esm/components/dropdown.js

@@ -0,0 +1,262 @@
+import { createComponent, Shade } from '@furystack/shades';
+import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js';
+import { getNavigableKeys } from './menu/menu-types.js';
+const cloneNode = (node) => node instanceof Node ? node.cloneNode(true) : node;
+const renderDropdownItems = (items, onSelect) => {
+    return items.map((item) => {
+        if (item.type === 'divider') {
+            return createComponent("div", { role: "separator", className: "dropdown-divider" });
+        }
+        if (item.type === 'group') {
+            return (createComponent("div", { role: "group", "aria-label": item.label, className: "dropdown-group" },
+                createComponent("div", { className: "dropdown-group-label" }, item.label),
+                renderDropdownItems(item.children, onSelect)));
+        }
+        const classNames = ['dropdown-item', item.disabled ? 'disabled' : ''].filter(Boolean).join(' ');
+        return (createComponent("div", { role: "menuitem", className: classNames, "aria-disabled": item.disabled ? 'true' : undefined, "data-key": item.key, onclick: () => {
+                if (!item.disabled) {
+                    onSelect(item.key);
+                }
+            } },
+            item.icon && createComponent("span", { className: "dropdown-item-icon" }, cloneNode(item.icon)),
+            createComponent("span", { className: "dropdown-item-label" }, cloneNode(item.label))));
+    });
+};
+export const Dropdown = Shade({
+    shadowDomName: 'shade-dropdown',
+    css: {
+        display: 'inline-flex',
+        position: 'relative',
+        '& .dropdown-trigger': {
+            display: 'inline-flex',
+            cursor: 'pointer',
+        },
+        '& .dropdown-trigger.disabled': {
+            cursor: 'not-allowed',
+            opacity: '0.5',
+            pointerEvents: 'none',
+        },
+        // Backdrop
+        '& .dropdown-backdrop': {
+            opacity: '0',
+            pointerEvents: 'none',
+            transition: `opacity ${cssVariableTheme.transitions.duration.fast} ease-out`,
+        },
+        '& .dropdown-backdrop.visible': {
+            opacity: '1',
+            pointerEvents: 'auto',
+        },
+        // Panel
+        '& .dropdown-panel': {
+            opacity: '0',
+            transform: 'scale(0.95) translateY(-4px)',
+            transition: buildTransition(['opacity', cssVariableTheme.transitions.duration.fast, 'ease-out'], ['transform', cssVariableTheme.transitions.duration.fast, 'ease-out']),
+            transformOrigin: 'top left',
+        },
+        '& .dropdown-panel.visible': {
+            opacity: '1',
+            transform: 'scale(1) translateY(0)',
+        },
+        // Dropdown items
+        '& .dropdown-item': {
+            display: 'flex',
+            alignItems: 'center',
+            gap: cssVariableTheme.spacing.sm,
+            padding: `${cssVariableTheme.spacing.sm} ${cssVariableTheme.spacing.md}`,
+            cursor: 'pointer',
+            userSelect: 'none',
+            transition: buildTransition([
+                'background-color',
+                cssVariableTheme.transitions.duration.fast,
+                cssVariableTheme.transitions.easing.default,
+            ]),
+            whiteSpace: 'nowrap',
+        },
+        '& .dropdown-item:hover:not(.disabled), & .dropdown-item.focused:not(.disabled)': {
+            backgroundColor: cssVariableTheme.action.hoverBackground,
+        },
+        '& .dropdown-item.disabled': {
+            opacity: '0.5',
+            cursor: 'not-allowed',
+        },
+        '& .dropdown-item-icon': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: '0',
+            width: '20px',
+        },
+        '& .dropdown-item-label': {
+            flex: '1',
+        },
+        // Divider
+        '& .dropdown-divider': {
+            height: '1px',
+            margin: `${cssVariableTheme.spacing.xs} ${cssVariableTheme.spacing.sm}`,
+            backgroundColor: cssVariableTheme.divider,
+        },
+        // Group
+        '& .dropdown-group-label': {
+            padding: `${cssVariableTheme.spacing.xs} ${cssVariableTheme.spacing.md}`,
+            fontSize: cssVariableTheme.typography.fontSize.xs,
+            fontWeight: cssVariableTheme.typography.fontWeight.bold,
+            color: cssVariableTheme.text.secondary,
+            textTransform: 'uppercase',
+            letterSpacing: cssVariableTheme.typography.letterSpacing.wider,
+            userSelect: 'none',
+        },
+    },
+    render: ({ props, children, useState, useDisposable, useRef, useHostProps }) => {
+        const triggerRef = useRef('trigger');
+        const panelRef = useRef('panel');
+        const backdropRef = useRef('backdrop');
+        const [isOpenValue, setIsOpen] = useState('isOpen', false);
+        useHostProps({
+            'data-open': isOpenValue ? '' : undefined,
+        });
+        useDisposable('keydown-handler', () => {
+            const listener = (ev) => {
+                if (!backdropRef.current?.classList.contains('visible'))
+                    return;
+                const panel = panelRef.current;
+                if (!panel)
+                    return;
+                const allItems = Array.from(panel.querySelectorAll('.dropdown-item:not(.disabled)'));
+                switch (ev.key) {
+                    case 'Escape': {
+                        ev.preventDefault();
+                        backdropRef.current?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+                        break;
+                    }
+                    case 'ArrowDown': {
+                        if (allItems.length === 0)
+                            break;
+                        ev.preventDefault();
+                        const focusedItem = panel.querySelector('.dropdown-item.focused');
+                        const currentIndex = focusedItem ? allItems.indexOf(focusedItem) : -1;
+                        const nextIndex = currentIndex < allItems.length - 1 ? currentIndex + 1 : 0;
+                        allItems.forEach((el) => el.classList.remove('focused'));
+                        allItems[nextIndex]?.classList.add('focused');
+                        break;
+                    }
+                    case 'ArrowUp': {
+                        if (allItems.length === 0)
+                            break;
+                        ev.preventDefault();
+                        const focusedItem = panel.querySelector('.dropdown-item.focused');
+                        const currentIndex = focusedItem ? allItems.indexOf(focusedItem) : allItems.length;
+                        const prevIndex = currentIndex > 0 ? currentIndex - 1 : allItems.length - 1;
+                        allItems.forEach((el) => el.classList.remove('focused'));
+                        allItems[prevIndex]?.classList.add('focused');
+                        break;
+                    }
+                    case 'Enter': {
+                        ev.preventDefault();
+                        const focusedItem = panel.querySelector('.dropdown-item.focused');
+                        focusedItem?.click();
+                        break;
+                    }
+                    default:
+                        break;
+                }
+            };
+            window.addEventListener('keydown', listener, true);
+            return { [Symbol.dispose]: () => window.removeEventListener('keydown', listener, true) };
+        });
+        const { items, placement = 'bottomLeft', disabled, onSelect } = props;
+        const positionAndShowPanel = () => {
+            requestAnimationFrame(() => {
+                const trigger = triggerRef.current;
+                const panel = panelRef.current;
+                const backdrop = backdropRef.current;
+                if (!trigger || !panel || !backdrop)
+                    return;
+                const { top: rectTop, bottom: rectBottom, left: rectLeft, right: rectRight } = trigger.getBoundingClientRect();
+                const panelWidth = panel.offsetWidth;
+                const panelHeight = panel.offsetHeight;
+                let top;
+                let left;
+                switch (placement) {
+                    case 'bottomRight':
+                        top = rectBottom + 2;
+                        left = rectRight - panelWidth;
+                        break;
+                    case 'topLeft':
+                        top = rectTop - panelHeight - 2;
+                        left = rectLeft;
+                        break;
+                    case 'topRight':
+                        top = rectTop - panelHeight - 2;
+                        left = rectRight - panelWidth;
+                        break;
+                    case 'bottomLeft':
+                    default:
+                        top = rectBottom + 2;
+                        left = rectLeft;
+                        break;
+                }
+                panel.style.top = `${top}px`;
+                panel.style.left = `${left}px`;
+                backdrop.classList.add('visible');
+                panel.classList.add('visible');
+                const keys = getNavigableKeys(items);
+                if (keys.length > 0) {
+                    panel.querySelector(`[data-key="${keys[0]}"]`)?.classList.add('focused');
+                }
+            });
+        };
+        const openDropdown = () => {
+            if (isOpenValue)
+                return;
+            setIsOpen(true);
+            positionAndShowPanel();
+        };
+        const closeDropdown = () => {
+            setIsOpen(false);
+            const backdrop = backdropRef.current;
+            const panel = panelRef.current;
+            backdrop?.classList.remove('visible');
+            panel?.classList.remove('visible');
+            panel?.querySelectorAll('.dropdown-item.focused').forEach((el) => el.classList.remove('focused'));
+        };
+        const handleTriggerClick = () => {
+            if (disabled)
+                return;
+            if (backdropRef.current?.classList.contains('visible')) {
+                closeDropdown();
+            }
+            else {
+                openDropdown();
+            }
+        };
+        const handleSelect = (key) => {
+            onSelect?.(key);
+            closeDropdown();
+        };
+        // If re-rendered while open (e.g. parent prop change), restore visual state
+        if (isOpenValue) {
+            positionAndShowPanel();
+        }
+        return (createComponent(createComponent, null,
+            createComponent("div", { ref: triggerRef, className: `dropdown-trigger${disabled ? ' disabled' : ''}`, onclick: handleTriggerClick }, children),
+            createComponent("div", { ref: backdropRef, className: "dropdown-backdrop", style: {
+                    position: 'fixed',
+                    top: '0',
+                    left: '0',
+                    width: '100%',
+                    height: '100%',
+                    zIndex: cssVariableTheme.zIndex.dropdown,
+                }, onclick: closeDropdown },
+                createComponent("div", { ref: panelRef, role: "menu", className: "dropdown-panel", style: {
+                        position: 'fixed',
+                        minWidth: '160px',
+                        background: cssVariableTheme.background.paper,
+                        borderRadius: cssVariableTheme.shape.borderRadius.md,
+                        boxShadow: cssVariableTheme.shadows.lg,
+                        border: `1px solid ${cssVariableTheme.divider}`,
+                        padding: `${cssVariableTheme.spacing.xs} 0`,
+                        overflow: 'hidden',
+                    }, onclick: (ev) => ev.stopPropagation() }, renderDropdownItems(items, handleSelect)))));
+    },
+});
+//# sourceMappingURL=dropdown.js.map

package/esm/components/dropdown.js.map

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

package/esm/components/dropdown.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dropdown.spec.d.ts.map

package/esm/components/dropdown.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.spec.d.ts","sourceRoot":"","sources":["../../src/components/dropdown.spec.tsx"],"names":[],"mappings":""}

package/esm/components/dropdown.spec.js

@@ -0,0 +1,372 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, initializeShadeRoot } from '@furystack/shades';
+import { sleepAsync, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Dropdown } from './dropdown.js';
+describe('Dropdown', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    const createTestItems = () => [
+        { key: 'cut', label: 'Cut' },
+        { key: 'copy', label: 'Copy' },
+        { type: 'divider' },
+        { key: 'paste', label: 'Paste' },
+    ];
+    const renderDropdown = async (props, triggerText = 'Open') => {
+        const items = props.items ?? createTestItems();
+        const injector = new Injector();
+        const root = document.getElementById('root');
+        initializeShadeRoot({
+            injector,
+            rootElement: root,
+            jsxElement: (createComponent(Dropdown, { ...props, items: items },
+                createComponent("button", null, triggerText))),
+        });
+        await sleepAsync(50);
+        return {
+            injector,
+            dropdown: root.querySelector('shade-dropdown'),
+            [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
+        };
+    };
+    describe('rendering', () => {
+        it('should render the dropdown element', async () => {
+            await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+                expect(dropdown).toBeTruthy();
+                expect(dropdown.tagName.toLowerCase()).toBe('shade-dropdown');
+            });
+        });
+        it('should render the trigger content', async () => {
+            await usingAsync(await renderDropdown({}, 'Click me'), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                expect(trigger).toBeTruthy();
+                expect(trigger?.textContent).toContain('Click me');
+            });
+        });
+        it('should not show the dropdown panel initially', async () => {
+            await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+                expect(dropdown.hasAttribute('data-open')).toBe(false);
+                const panel = dropdown.querySelector('.dropdown-panel');
+                expect(panel).toBeTruthy();
+                expect(panel?.classList.contains('visible')).toBe(false);
+            });
+        });
+    });
+    describe('opening and closing', () => {
+        it('should open when trigger is clicked', async () => {
+            await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                const panel = dropdown.querySelector('.dropdown-panel');
+                expect(panel).toBeTruthy();
+            });
+        });
+        it('should show menu items when open', async () => {
+            await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                const items = dropdown.querySelectorAll('[role="menuitem"]');
+                expect(items.length).toBe(3);
+                expect(dropdown.textContent).toContain('Cut');
+                expect(dropdown.textContent).toContain('Copy');
+                expect(dropdown.textContent).toContain('Paste');
+            });
+        });
+        it('should show dividers when open', async () => {
+            await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                const dividers = dropdown.querySelectorAll('[role="separator"]');
+                expect(dividers.length).toBe(1);
+            });
+        });
+        it('should close when backdrop is clicked', async () => {
+            await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                const backdrop = dropdown.querySelector('.dropdown-backdrop');
+                backdrop.click();
+                await sleepAsync(50);
+                expect(dropdown.hasAttribute('data-open')).toBe(false);
+                const panel = dropdown.querySelector('.dropdown-panel');
+                expect(panel?.classList.contains('visible')).toBe(false);
+            });
+        });
+        it('should toggle when trigger is clicked twice', async () => {
+            await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                expect(dropdown.hasAttribute('data-open')).toBe(true);
+                trigger.click();
+                await sleepAsync(50);
+                expect(dropdown.hasAttribute('data-open')).toBe(false);
+            });
+        });
+    });
+    describe('item selection', () => {
+        it('should call onSelect when an item is clicked', async () => {
+            const handleSelect = vi.fn();
+            await usingAsync(await renderDropdown({ onSelect: handleSelect }), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                const item = dropdown.querySelector('[data-key="copy"]');
+                item.click();
+                await sleepAsync(50);
+                expect(handleSelect).toHaveBeenCalledWith('copy');
+            });
+        });
+        it('should close after selection', async () => {
+            await usingAsync(await renderDropdown({ onSelect: vi.fn() }), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                const item = dropdown.querySelector('[data-key="cut"]');
+                item.click();
+                await sleepAsync(50);
+                expect(dropdown.hasAttribute('data-open')).toBe(false);
+                const panel = dropdown.querySelector('.dropdown-panel');
+                expect(panel?.classList.contains('visible')).toBe(false);
+            });
+        });
+        it('should not call onSelect for disabled items', async () => {
+            const handleSelect = vi.fn();
+            const items = [{ key: 'disabled', label: 'Disabled', disabled: true }];
+            await usingAsync(await renderDropdown({ items, onSelect: handleSelect }), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                const item = dropdown.querySelector('[data-key="disabled"]');
+                item.click();
+                await sleepAsync(50);
+                expect(handleSelect).not.toHaveBeenCalled();
+            });
+        });
+    });
+    describe('disabled state', () => {
+        it('should not open when disabled', async () => {
+            await usingAsync(await renderDropdown({ disabled: true }), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                expect(dropdown.hasAttribute('data-open')).toBe(false);
+                const panel = dropdown.querySelector('.dropdown-panel');
+                expect(panel?.classList.contains('visible')).toBe(false);
+            });
+        });
+        it('should mark trigger as disabled', async () => {
+            await usingAsync(await renderDropdown({ disabled: true }), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                expect(trigger.classList.contains('disabled')).toBe(true);
+            });
+        });
+        it('should not mark trigger as disabled when not disabled', async () => {
+            await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                expect(trigger.classList.contains('disabled')).toBe(false);
+            });
+        });
+    });
+    describe('groups', () => {
+        it('should render groups in dropdown', async () => {
+            const items = [
+                {
+                    type: 'group',
+                    key: 'actions',
+                    label: 'Actions',
+                    children: [
+                        { key: 'save', label: 'Save' },
+                        { key: 'delete', label: 'Delete' },
+                    ],
+                },
+            ];
+            await usingAsync(await renderDropdown({ items }), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                const group = dropdown.querySelector('[role="group"]');
+                expect(group).toBeTruthy();
+                const menuItems = dropdown.querySelectorAll('[role="menuitem"]');
+                expect(menuItems.length).toBe(2);
+            });
+        });
+    });
+    describe('item icons', () => {
+        it('should render item icons', async () => {
+            const items = [{ key: 'cut', label: 'Cut', icon: createComponent("span", { className: "icon" }, "\u2702\uFE0F") }];
+            await usingAsync(await renderDropdown({ items }), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                const icon = dropdown.querySelector('.dropdown-item-icon');
+                expect(icon).toBeTruthy();
+                expect(icon?.textContent).toContain('✂️');
+            });
+        });
+        it('should render JSX element icons', async () => {
+            const items = [{ key: 'cut', label: 'Cut', icon: createComponent("span", null, "X") }];
+            await usingAsync(await renderDropdown({ items }), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                const icon = dropdown.querySelector('.dropdown-item-icon');
+                expect(icon).toBeTruthy();
+                expect(icon?.textContent).toContain('X');
+            });
+        });
+    });
+    describe('keyboard navigation', () => {
+        it('should close on Escape key', async () => {
+            await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                expect(dropdown.hasAttribute('data-open')).toBe(true);
+                window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+                await sleepAsync(50);
+                expect(dropdown.hasAttribute('data-open')).toBe(false);
+            });
+        });
+        it('should navigate to next item on ArrowDown', async () => {
+            await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+                await sleepAsync(50);
+                const focusedItems = dropdown.querySelectorAll('.dropdown-item.focused');
+                expect(focusedItems.length).toBe(1);
+            });
+        });
+        it('should navigate to previous item on ArrowUp', async () => {
+            await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                // Move down twice then up once
+                window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+                window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+                window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
+                await sleepAsync(50);
+                const focusedItems = dropdown.querySelectorAll('.dropdown-item.focused');
+                expect(focusedItems.length).toBe(1);
+            });
+        });
+        it('should select focused item on Enter', async () => {
+            const handleSelect = vi.fn();
+            await usingAsync(await renderDropdown({ onSelect: handleSelect }), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                // Navigate down then press Enter
+                window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+                await sleepAsync(50);
+                window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+                await sleepAsync(50);
+                expect(handleSelect).toHaveBeenCalled();
+            });
+        });
+        it('should wrap around when navigating past the last item', async () => {
+            const items = [
+                { key: 'a', label: 'A' },
+                { key: 'b', label: 'B' },
+            ];
+            await usingAsync(await renderDropdown({ items }), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                // Navigate down past the end (2 items + 1 wrap)
+                window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+                window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+                window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+                await sleepAsync(50);
+                const focusedItems = dropdown.querySelectorAll('.dropdown-item.focused');
+                expect(focusedItems.length).toBe(1);
+            });
+        });
+        it('should wrap around when navigating before the first item', async () => {
+            const items = [
+                { key: 'a', label: 'A' },
+                { key: 'b', label: 'B' },
+            ];
+            await usingAsync(await renderDropdown({ items }), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
+                await sleepAsync(50);
+                const focusedItems = dropdown.querySelectorAll('.dropdown-item.focused');
+                expect(focusedItems.length).toBe(1);
+            });
+        });
+        it('should not respond to keyboard when closed', async () => {
+            const handleSelect = vi.fn();
+            await usingAsync(await renderDropdown({ onSelect: handleSelect }), async ({ dropdown }) => {
+                // Don't open the dropdown
+                window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+                window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+                await sleepAsync(50);
+                expect(handleSelect).not.toHaveBeenCalled();
+                expect(dropdown.hasAttribute('data-open')).toBe(false);
+            });
+        });
+        it('should skip disabled items during navigation', async () => {
+            const items = [
+                { key: 'a', label: 'A' },
+                { key: 'b', label: 'B', disabled: true },
+                { key: 'c', label: 'C' },
+            ];
+            await usingAsync(await renderDropdown({ items }), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                // Navigate to first enabled item
+                window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+                await sleepAsync(50);
+                const focusedItems = dropdown.querySelectorAll('.dropdown-item.focused');
+                expect(focusedItems.length).toBe(1);
+                // Focused item should not be the disabled one
+                expect(focusedItems[0].classList.contains('disabled')).toBe(false);
+            });
+        });
+    });
+    describe('placement', () => {
+        it('should accept bottomRight placement', async () => {
+            await usingAsync(await renderDropdown({ placement: 'bottomRight' }), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                const panel = dropdown.querySelector('.dropdown-panel');
+                expect(panel).toBeTruthy();
+            });
+        });
+        it('should accept topLeft placement', async () => {
+            await usingAsync(await renderDropdown({ placement: 'topLeft' }), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                const panel = dropdown.querySelector('.dropdown-panel');
+                expect(panel).toBeTruthy();
+            });
+        });
+        it('should accept topRight placement', async () => {
+            await usingAsync(await renderDropdown({ placement: 'topRight' }), async ({ dropdown }) => {
+                const trigger = dropdown.querySelector('.dropdown-trigger');
+                trigger.click();
+                await sleepAsync(50);
+                const panel = dropdown.querySelector('.dropdown-panel');
+                expect(panel).toBeTruthy();
+            });
+        });
+    });
+});
+//# sourceMappingURL=dropdown.spec.js.map