@gjsify/adwaita-web 0.15.1 → 0.16.0

package/src/adw-data-grid.spec.ts

@@ -0,0 +1,243 @@
+// DOM-level behaviour tests for <adw-data-grid>. Runs in a real browser via the
+// @gjsify/adwaita-web browser test axis. Asserts column parsing + alignment
+// classes, the derived grid tracks, per-cell rendering of pre-formatted strings,
+// the accounting row variants (normal / section / subtotal / total), and the
+// row-activated interaction (element-level + per-row, keyboard + pointer).
+import { describe, it, expect } from '@gjsify/unit';
+
+import type { AdwDataGrid, AdwDataGridColumn, AdwDataGridRow } from './elements/adw-data-grid.js';
+
+function makeGrid(columns?: AdwDataGridColumn[], rows?: AdwDataGridRow[]): AdwDataGrid {
+    const el = document.createElement('adw-data-grid') as AdwDataGrid;
+    if (columns) el.columns = columns;
+    if (rows) el.rows = rows;
+    document.body.appendChild(el);
+    return el;
+}
+
+const BWA_COLUMNS: AdwDataGridColumn[] = [
+    { key: 'position', label: 'BWA-Position' },
+    { key: 'total', label: 'Σ Jahr', numeric: true },
+];
+
+export const AdwDataGridTest = async () => {
+    await describe('adw-data-grid columns', async () => {
+        await it('renders one header cell per column with the label', async () => {
+            const grid = makeGrid(BWA_COLUMNS, []);
+            const header = grid.querySelector('.adw-data-grid-row.header');
+            expect(header).toBeTruthy();
+            const cells = grid.querySelectorAll('.adw-data-grid-row.header .adw-data-grid-cell');
+            expect(cells.length).toBe(2);
+            expect(cells[0].textContent).toBe('BWA-Position');
+            expect(cells[1].textContent).toBe('Σ Jahr');
+            grid.remove();
+        });
+
+        await it('falls back to the key when no label is given', async () => {
+            const grid = makeGrid([{ key: 'amount' }], []);
+            const cell = grid.querySelector('.adw-data-grid-row.header .adw-data-grid-cell');
+            expect(cell?.textContent).toBe('amount');
+            grid.remove();
+        });
+
+        await it('a numeric column right-aligns + gets the numeric class', async () => {
+            const grid = makeGrid(BWA_COLUMNS, []);
+            const cells = grid.querySelectorAll('.adw-data-grid-row.header .adw-data-grid-cell');
+            expect(cells[0].classList.contains('align-start')).toBe(true);
+            expect(cells[1].classList.contains('align-end')).toBe(true);
+            expect(cells[1].classList.contains('numeric')).toBe(true);
+            grid.remove();
+        });
+
+        await it('honours an explicit align + monospace flag', async () => {
+            const grid = makeGrid(
+                [
+                    { key: 'a', align: 'center' },
+                    { key: 'b', monospace: true },
+                ],
+                [],
+            );
+            const cells = grid.querySelectorAll('.adw-data-grid-row.header .adw-data-grid-cell');
+            expect(cells[0].classList.contains('align-center')).toBe(true);
+            expect(cells[1].classList.contains('mono')).toBe(true);
+            grid.remove();
+        });
+
+        await it('derives grid-template-columns from width / flex', async () => {
+            const grid = makeGrid(
+                [
+                    { key: 'a', flex: 2 },
+                    { key: 'b', width: '80px' },
+                ],
+                [],
+            );
+            const table = grid.querySelector('.adw-data-grid-table') as HTMLElement;
+            expect(table.style.gridTemplateColumns).toBe('2fr 80px');
+            grid.remove();
+        });
+
+        await it('defaults the first column to flexible so amounts hug the right edge', async () => {
+            const grid = makeGrid(BWA_COLUMNS, []);
+            const table = grid.querySelector('.adw-data-grid-table') as HTMLElement;
+            // The CSSOM serialises the track back as `minmax(0px, 1fr)`.
+            expect(table.style.gridTemplateColumns).toBe('minmax(0px, 1fr) auto');
+            grid.remove();
+        });
+
+        await it('parses columns + rows from the JSON attributes', async () => {
+            const grid = document.createElement('adw-data-grid') as AdwDataGrid;
+            grid.setAttribute('columns', '[{"key":"a","label":"A"},{"key":"b","numeric":true}]');
+            grid.setAttribute('rows', '[{"a":"x","b":"1,00 €"}]');
+            document.body.appendChild(grid);
+            expect(grid.columns.length).toBe(2);
+            expect(grid.rows.length).toBe(1);
+            const bodyCells = grid.querySelectorAll('.adw-data-grid-row:not(.header) .adw-data-grid-cell');
+            expect(bodyCells[0].textContent).toBe('x');
+            expect(bodyCells[1].textContent).toBe('1,00 €');
+            grid.remove();
+        });
+    });
+
+    await describe('adw-data-grid rows', async () => {
+        await it('renders a row + a cell per column with the pre-formatted string', async () => {
+            const grid = makeGrid(BWA_COLUMNS, [
+                { position: 'Umsatzerlöse', total: '120.000,00 €' },
+                { position: 'Sonstige Erträge', total: '5.000,00 €' },
+            ]);
+            const rows = grid.querySelectorAll('.adw-data-grid-row:not(.header)');
+            expect(rows.length).toBe(2);
+            const firstCells = rows[0].querySelectorAll('.adw-data-grid-cell');
+            expect(firstCells.length).toBe(2);
+            expect(firstCells[0].textContent).toBe('Umsatzerlöse');
+            expect(firstCells[1].textContent).toBe('120.000,00 €');
+            grid.remove();
+        });
+
+        await it('coerces a numeric cell value to a string', async () => {
+            const grid = makeGrid([{ key: 'qty', numeric: true }], [{ qty: 3 }]);
+            const cell = grid.querySelector('.adw-data-grid-row:not(.header) .adw-data-grid-cell');
+            expect(cell?.textContent).toBe('3');
+            grid.remove();
+        });
+
+        await it('renders an empty cell for a missing key', async () => {
+            const grid = makeGrid(BWA_COLUMNS, [{ position: 'Only label' }]);
+            const cells = grid.querySelectorAll('.adw-data-grid-row:not(.header) .adw-data-grid-cell');
+            expect(cells[1].textContent).toBe('');
+            grid.remove();
+        });
+    });
+
+    await describe('adw-data-grid variants', async () => {
+        await it('a section row spans all columns with the first column value', async () => {
+            const grid = makeGrid(BWA_COLUMNS, [{ variant: 'section', position: 'Betriebseinnahmen' }]);
+            const row = grid.querySelector('.adw-data-grid-row.variant-section') as HTMLElement;
+            expect(row).toBeTruthy();
+            const cells = row.querySelectorAll('.adw-data-grid-cell');
+            expect(cells.length).toBe(1);
+            expect(cells[0].textContent).toBe('Betriebseinnahmen');
+            expect((cells[0] as HTMLElement).style.gridColumn).toBe('1 / -1');
+            grid.remove();
+        });
+
+        await it('tags subtotal + total rows with their variant class', async () => {
+            const grid = makeGrid(BWA_COLUMNS, [
+                { variant: 'subtotal', position: 'Gesamtleistung', total: '125.000,00 €' },
+                { variant: 'total', position: 'Betriebsergebnis', total: '42.000,00 €' },
+            ]);
+            expect(grid.querySelector('.adw-data-grid-row.variant-subtotal')).toBeTruthy();
+            expect(grid.querySelector('.adw-data-grid-row.variant-total')).toBeTruthy();
+            // A subtotal / total keeps the full per-column layout (not spanning).
+            const subtotalCells = grid.querySelectorAll('.variant-subtotal .adw-data-grid-cell');
+            expect(subtotalCells.length).toBe(2);
+            grid.remove();
+        });
+
+        await it('an unknown / absent variant falls back to normal', async () => {
+            const grid = makeGrid(BWA_COLUMNS, [
+                { position: 'x' },
+                { variant: 'bogus', position: 'y' } as unknown as AdwDataGridRow,
+            ]);
+            const normals = grid.querySelectorAll('.adw-data-grid-row.variant-normal');
+            expect(normals.length).toBe(2);
+            grid.remove();
+        });
+    });
+
+    await describe('adw-data-grid row-activated', async () => {
+        await it('element-level interactive makes normal rows clickable + fires {index,row}', async () => {
+            const rows: AdwDataGridRow[] = [
+                { position: 'Row A', total: '1,00 €' },
+                { position: 'Row B', total: '2,00 €' },
+            ];
+            const grid = makeGrid(BWA_COLUMNS, rows);
+            grid.interactive = true;
+            let detail: { index: number; row: AdwDataGridRow } | null = null;
+            grid.addEventListener('row-activated', (e) => {
+                detail = (e as CustomEvent).detail;
+            });
+            const interactiveRows = grid.querySelectorAll('.adw-data-grid-row.interactive');
+            expect(interactiveRows.length).toBe(2);
+            (interactiveRows[1] as HTMLElement).click();
+            expect(detail).toBeTruthy();
+            expect(detail!.index).toBe(1);
+            expect(detail!.row.position).toBe('Row B');
+            grid.remove();
+        });
+
+        await it('section / subtotal / total rows never activate', async () => {
+            const grid = makeGrid(BWA_COLUMNS, [
+                { variant: 'section', position: 'Sec' },
+                { variant: 'subtotal', position: 'Sub', total: '1,00 €' },
+                { variant: 'total', position: 'Tot', total: '2,00 €' },
+                { position: 'Data', total: '3,00 €' },
+            ]);
+            grid.interactive = true;
+            expect(grid.querySelectorAll('.adw-data-grid-row.interactive').length).toBe(1);
+            grid.remove();
+        });
+
+        await it('a per-row interactive flag opts a single row in / out', async () => {
+            const grid = makeGrid(BWA_COLUMNS, [
+                { position: 'clickable', interactive: true },
+                { position: 'not clickable' },
+            ]);
+            // No element-level flag: only the opted-in row is interactive.
+            const interactiveRows = grid.querySelectorAll('.adw-data-grid-row.interactive');
+            expect(interactiveRows.length).toBe(1);
+            expect(interactiveRows[0].querySelector('.adw-data-grid-cell')?.textContent).toBe('clickable');
+            grid.remove();
+        });
+
+        await it('a per-row interactive:false opts out even when the element is interactive', async () => {
+            const grid = makeGrid(BWA_COLUMNS, [{ position: 'a' }, { position: 'b', interactive: false }]);
+            grid.interactive = true;
+            expect(grid.querySelectorAll('.adw-data-grid-row.interactive').length).toBe(1);
+            grid.remove();
+        });
+
+        await it('Enter activates a focused interactive row', async () => {
+            const grid = makeGrid(BWA_COLUMNS, [{ position: 'Row A', total: '1,00 €' }]);
+            grid.interactive = true;
+            let fired = 0;
+            grid.addEventListener('row-activated', () => fired++);
+            const row = grid.querySelector('.adw-data-grid-row.interactive') as HTMLElement;
+            expect(row.tabIndex).toBe(0);
+            row.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+            expect(fired).toBe(1);
+            grid.remove();
+        });
+    });
+
+    await describe('adw-data-grid caption', async () => {
+        await it('shows the caption from the attribute + hides it when empty', async () => {
+            const grid = makeGrid(BWA_COLUMNS, []);
+            const caption = grid.querySelector('.adw-data-grid-caption') as HTMLElement;
+            expect(caption.hidden).toBe(true);
+            grid.caption = 'Betriebswirtschaftliche Auswertung';
+            expect(caption.hidden).toBe(false);
+            expect(caption.textContent).toBe('Betriebswirtschaftliche Auswertung');
+            grid.remove();
+        });
+    });
+};

package/src/adw-dialog.spec.ts

@@ -0,0 +1,169 @@
+// DOM-level behaviour tests for <adw-dialog>. Runs in a real browser via the
+// @gjsify/adwaita-web browser test axis (tests/browser Playwright harness). The
+// custom elements are registered by importing the package root in test.browser.mts;
+// these specs create elements via document.createElement and assert their DOM
+// behaviour (present/close events, can-close gating, header/content, focus return).
+import { describe, it, expect } from '@gjsify/unit';
+
+import type { AdwDialog } from './elements/adw-dialog.js';
+
+function makeDialog(html = '<p>Body</p>'): AdwDialog {
+    const el = document.createElement('adw-dialog') as AdwDialog;
+    el.innerHTML = html;
+    document.body.appendChild(el);
+    return el;
+}
+
+export const AdwDialogTest = async () => {
+    await describe('adw-dialog present/close', async () => {
+        await it('present() reveals + fires notify::open(true)', async () => {
+            const dialog = makeDialog();
+            let notified: boolean | null = null;
+            dialog.addEventListener('notify::open', (e) => {
+                notified = (e as CustomEvent).detail.open;
+            });
+            expect(dialog.open).toBe(false);
+            dialog.present();
+            expect(dialog.open).toBe(true);
+            expect(dialog.classList.contains('open')).toBe(true);
+            expect(notified).toBe(true);
+            dialog.remove();
+        });
+
+        await it('close() hides + fires notify::open(false) then closed', async () => {
+            const dialog = makeDialog();
+            dialog.present();
+            const order: string[] = [];
+            dialog.addEventListener('notify::open', (e) => {
+                order.push(`notify:${(e as CustomEvent).detail.open}`);
+            });
+            dialog.addEventListener('closed', () => order.push('closed'));
+            dialog.close();
+            expect(dialog.open).toBe(false);
+            expect(order).toStrictEqual(['notify:false', 'closed']);
+            dialog.remove();
+        });
+
+        await it('present() on a disconnected element attaches it to the body', async () => {
+            const dialog = document.createElement('adw-dialog') as AdwDialog;
+            expect(dialog.isConnected).toBe(false);
+            dialog.present();
+            expect(dialog.isConnected).toBe(true);
+            expect(dialog.open).toBe(true);
+            dialog.remove();
+        });
+    });
+
+    await describe('adw-dialog can-close gating', async () => {
+        await it('close() while locked raises close-attempt and stays open', async () => {
+            const dialog = makeDialog();
+            dialog.canClose = false;
+            dialog.present();
+            let attempts = 0;
+            let closed = 0;
+            dialog.addEventListener('close-attempt', () => attempts++);
+            dialog.addEventListener('closed', () => closed++);
+            dialog.close();
+            expect(dialog.open).toBe(true);
+            expect(attempts).toBe(1);
+            expect(closed).toBe(0);
+            dialog.remove();
+        });
+
+        await it('forceClose() closes even while locked', async () => {
+            const dialog = makeDialog();
+            dialog.canClose = false;
+            dialog.present();
+            let closed = 0;
+            dialog.addEventListener('closed', () => closed++);
+            dialog.forceClose();
+            expect(dialog.open).toBe(false);
+            expect(closed).toBe(1);
+            dialog.remove();
+        });
+
+        await it('Escape on the box dismisses when unlocked, is gated when locked', async () => {
+            const dialog = makeDialog();
+            dialog.present();
+            const box = dialog.querySelector('.adw-dialog-box') as HTMLElement;
+            box.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+            expect(dialog.open).toBe(false);
+
+            const locked = makeDialog();
+            locked.canClose = false;
+            locked.present();
+            const lockedBox = locked.querySelector('.adw-dialog-box') as HTMLElement;
+            let attempts = 0;
+            locked.addEventListener('close-attempt', () => attempts++);
+            lockedBox.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+            expect(locked.open).toBe(true);
+            expect(attempts).toBe(1);
+            dialog.remove();
+            locked.remove();
+        });
+    });
+
+    await describe('adw-dialog content + header', async () => {
+        await it('moves author markup into the content area', async () => {
+            const dialog = makeDialog('<p id="hello">Hello</p>');
+            const content = dialog.querySelector('.adw-dialog-content');
+            expect(content?.querySelector('#hello')?.textContent).toBe('Hello');
+        });
+
+        await it('renders the header only when a title is set', async () => {
+            const dialog = makeDialog();
+            const header = dialog.querySelector('.adw-dialog-header') as HTMLElement;
+            expect(header.hidden).toBe(true);
+            dialog.title = 'Settings';
+            expect(header.hidden).toBe(false);
+            expect(dialog.querySelector('.adw-dialog-title')?.textContent).toBe('Settings');
+            dialog.remove();
+        });
+
+        await it('reflects presentation-mode + content-width', async () => {
+            const dialog = makeDialog();
+            expect(dialog.dataset.presentation).toBe('auto');
+            dialog.presentationMode = 'bottom-sheet';
+            expect(dialog.dataset.presentation).toBe('bottom-sheet');
+            dialog.contentWidth = 500;
+            const box = dialog.querySelector('.adw-dialog-box') as HTMLElement;
+            expect(box.style.getPropertyValue('--adw-dialog-content-width')).toBe('500px');
+            dialog.remove();
+        });
+
+        await it('the close button reflects the locked state', async () => {
+            const dialog = makeDialog();
+            dialog.title = 'X';
+            const closeBtn = dialog.querySelector('.adw-dialog-close') as HTMLButtonElement;
+            expect(closeBtn.disabled).toBe(false);
+            dialog.canClose = false;
+            expect(closeBtn.disabled).toBe(true);
+            expect(closeBtn.classList.contains('locked')).toBe(true);
+            dialog.remove();
+        });
+    });
+
+    await describe('adw-dialog focus handling', async () => {
+        await it('returns focus to the opener on close', async () => {
+            const opener = document.createElement('button');
+            opener.textContent = 'Open';
+            document.body.appendChild(opener);
+            opener.focus();
+            expect(document.activeElement).toBe(opener);
+
+            const dialog = makeDialog('<button id="inner">Inner</button>');
+            dialog.present();
+            // Move focus into the dialog explicitly (present() also does this, but
+            // focusing a just-shown element in the same tick is layout-timing
+            // sensitive under headless Chrome — so drive it deterministically here).
+            (dialog.querySelector('#inner') as HTMLButtonElement).focus();
+            // Close must return focus to the opener (never leave it trapped inside
+            // the dialog — the regression this guards).
+            dialog.close();
+            expect(dialog.contains(document.activeElement)).toBe(false);
+            expect(document.activeElement).toBe(opener);
+            dialog.remove();
+            opener.remove();
+        });
+    });
+};

package/src/adw-drop-down.spec.ts

@@ -0,0 +1,186 @@
+// DOM-level behaviour tests for <adw-drop-down>. Runs in a real browser via the
+// @gjsify/adwaita-web browser test axis. Asserts option parsing, selected↔value
+// sync, notify-on-change semantics, popover open/close, item selection, search
+// filtering and the disabled guard.
+import { describe, it, expect } from '@gjsify/unit';
+
+import type { AdwDropDown } from './elements/adw-drop-down.js';
+
+function makeDropDown(): AdwDropDown {
+    const el = document.createElement('adw-drop-down') as AdwDropDown;
+    document.body.appendChild(el);
+    return el;
+}
+
+export const AdwDropDownTest = async () => {
+    await describe('adw-drop-down options', async () => {
+        await it('accepts a string[] (value === label)', async () => {
+            const dd = makeDropDown();
+            dd.options = ['One', 'Two', 'Three'];
+            expect(dd.options.length).toBe(3);
+            expect(dd.options[0]).toStrictEqual({ value: 'One', label: 'One' });
+            expect(dd.querySelector('.adw-drop-down-label')?.textContent).toBe('One');
+            dd.remove();
+        });
+
+        await it('accepts {value,label}[] and shows the selected label', async () => {
+            const dd = makeDropDown();
+            dd.options = [
+                { value: 'a', label: 'Apple' },
+                { value: 'b', label: 'Banana' },
+            ];
+            dd.selected = 1;
+            expect(dd.querySelector('.adw-drop-down-label')?.textContent).toBe('Banana');
+            expect(dd.selectedValue).toBe('b');
+            dd.remove();
+        });
+
+        await it('parses options from the JSON attribute', async () => {
+            const dd = document.createElement('adw-drop-down') as AdwDropDown;
+            dd.setAttribute('options', '[{"value":"x","label":"Ex"},{"value":"y","label":"Why"}]');
+            dd.setAttribute('selected', '1');
+            document.body.appendChild(dd);
+            expect(dd.options.length).toBe(2);
+            expect(dd.selected).toBe(1);
+            expect(dd.selectedValue).toBe('y');
+            dd.remove();
+        });
+
+        await it('renders one popover item per option', async () => {
+            const dd = makeDropDown();
+            dd.options = ['a', 'b', 'c'];
+            expect(dd.querySelectorAll('.adw-drop-down-item').length).toBe(3);
+            dd.remove();
+        });
+    });
+
+    await describe('adw-drop-down selected ↔ value sync', async () => {
+        await it('selectedValue setter finds the index by value', async () => {
+            const dd = makeDropDown();
+            dd.options = [
+                { value: 'r', label: 'Red' },
+                { value: 'g', label: 'Green' },
+                { value: 'b', label: 'Blue' },
+            ];
+            dd.selectedValue = 'b';
+            expect(dd.selected).toBe(2);
+            expect(dd.querySelector('.adw-drop-down-label')?.textContent).toBe('Blue');
+            dd.remove();
+        });
+
+        await it('selected reflects to the attribute + marks the row', async () => {
+            const dd = makeDropDown();
+            dd.options = ['a', 'b'];
+            dd.selected = 1;
+            expect(dd.getAttribute('selected')).toBe('1');
+            const items = dd.querySelectorAll('.adw-drop-down-item');
+            expect(items[1].classList.contains('selected')).toBe(true);
+            expect(items[1].getAttribute('aria-selected')).toBe('true');
+            dd.remove();
+        });
+
+        await it('selectedItem returns the descriptor', async () => {
+            const dd = makeDropDown();
+            dd.options = [{ value: 'k', label: 'Key' }];
+            expect(dd.selectedItem).toStrictEqual({ value: 'k', label: 'Key' });
+            dd.remove();
+        });
+
+        await it('setting options + selected before connect does not crash + applies on connect', async () => {
+            // Regression: the property setters ran before connectedCallback built
+            // the DOM, so _updateLabel touched an undefined label element.
+            const dd = document.createElement('adw-drop-down') as AdwDropDown;
+            dd.options = ['a', 'b', 'c'];
+            dd.selected = 2;
+            expect(dd.isConnected).toBe(false);
+            document.body.appendChild(dd);
+            expect(dd.selected).toBe(2);
+            expect(dd.querySelector('.adw-drop-down-label')?.textContent).toBe('c');
+            expect(dd.querySelectorAll('.adw-drop-down-item').length).toBe(3);
+            dd.remove();
+        });
+    });
+
+    await describe('adw-drop-down notify-on-change', async () => {
+        await it('fires notify::selected + change on a real change only', async () => {
+            const dd = makeDropDown();
+            dd.options = ['a', 'b', 'c'];
+            let notifyCount = 0;
+            let lastChange: unknown = null;
+            dd.addEventListener('notify::selected', () => notifyCount++);
+            dd.addEventListener('change', (e) => {
+                lastChange = (e as CustomEvent).detail;
+            });
+            dd.selected = 2;
+            expect(notifyCount).toBe(1);
+            expect(lastChange).toStrictEqual({ index: 2, value: 'c', label: 'c' });
+            // Re-selecting the same index must NOT fire again.
+            dd.selected = 2;
+            expect(notifyCount).toBe(1);
+            dd.remove();
+        });
+
+        await it('a popover item click selects, fires change + closes', async () => {
+            const dd = makeDropDown();
+            dd.options = ['a', 'b', 'c'];
+            let change: unknown = null;
+            dd.addEventListener('change', (e) => {
+                change = (e as CustomEvent).detail;
+            });
+            (dd.querySelector('.adw-drop-down-button') as HTMLButtonElement).click();
+            expect(dd.active).toBe(true);
+            const items = dd.querySelectorAll('.adw-drop-down-item');
+            (items[1] as HTMLButtonElement).click();
+            expect(dd.selected).toBe(1);
+            expect(change).toStrictEqual({ index: 1, value: 'b', label: 'b' });
+            expect(dd.active).toBe(false);
+            dd.remove();
+        });
+    });
+
+    await describe('adw-drop-down popover behaviour', async () => {
+        await it('opens on button click and closes on outside pointerdown', async () => {
+            const dd = makeDropDown();
+            dd.options = ['a', 'b'];
+            const button = dd.querySelector('.adw-drop-down-button') as HTMLButtonElement;
+            const popover = dd.querySelector('.adw-drop-down-popover') as HTMLElement;
+            expect(popover.hidden).toBe(true);
+            button.click();
+            expect(dd.active).toBe(true);
+            expect(popover.hidden).toBe(false);
+            // Outside pointerdown dismisses.
+            document.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
+            expect(dd.active).toBe(false);
+            expect(popover.hidden).toBe(true);
+            dd.remove();
+        });
+
+        await it('a disabled dropdown does not open', async () => {
+            const dd = makeDropDown();
+            dd.options = ['a', 'b'];
+            dd.setAttribute('disabled', '');
+            (dd.querySelector('.adw-drop-down-button') as HTMLButtonElement).click();
+            expect(dd.active).toBe(false);
+            dd.remove();
+        });
+    });
+
+    await describe('adw-drop-down search', async () => {
+        await it('renders a search entry and filters the list', async () => {
+            const dd = makeDropDown();
+            dd.options = ['Apple', 'Banana', 'Cherry'];
+            dd.enableSearch = true;
+            const search = dd.querySelector('.adw-drop-down-search') as HTMLInputElement;
+            expect(search).toBeTruthy();
+            (dd.querySelector('.adw-drop-down-button') as HTMLButtonElement).click();
+            search.value = 'ban';
+            search.dispatchEvent(new Event('input', { bubbles: true }));
+            const visible = Array.from(dd.querySelectorAll('.adw-drop-down-item')).filter(
+                (b) => !(b as HTMLElement).hidden,
+            );
+            expect(visible.length).toBe(1);
+            expect(visible[0].textContent).toContain('Banana');
+            dd.remove();
+        });
+    });
+};