@gjsify/adwaita-web 0.54.0 → 0.56.0

package/src/adw-shortcuts.spec.ts

@@ -0,0 +1,155 @@
+// DOM-level behaviour tests for the shortcuts trio — <adw-shortcuts-dialog> and the
+// two markup-only objects it holds. Runs in a real browser via the @gjsify/adwaita-web
+// browser test axis (tests/browser Playwright harness).
+//
+// The dialog half is <adw-dialog>'s own spec; what is here is the content model and the
+// rules the C states for an item (adw-shortcuts-item.c:19-28).
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { AdwShortcutsDialog } from './elements/adw-shortcuts-dialog.js';
+import type { AdwShortcutsSection } from './elements/adw-shortcuts-section.js';
+
+type Item = HTMLElement & { hasAccelerator: boolean; subtitle: string; accelerator: string };
+
+function item(title: string, accelerator = '', subtitle = ''): Item {
+    const el = document.createElement('adw-shortcuts-item') as Item;
+    el.setAttribute('title', title);
+    if (accelerator) el.setAttribute('accelerator', accelerator);
+    if (subtitle) el.setAttribute('subtitle', subtitle);
+    return el;
+}
+
+function section(title: string | null, ...items: Item[]): AdwShortcutsSection {
+    const el = document.createElement('adw-shortcuts-section') as AdwShortcutsSection;
+    if (title !== null) el.setAttribute('title', title);
+    el.append(...items);
+    return el;
+}
+
+function dialog(...sections: AdwShortcutsSection[]): AdwShortcutsDialog {
+    const el = document.createElement('adw-shortcuts-dialog') as AdwShortcutsDialog;
+    el.setAttribute('title', 'Keyboard Shortcuts');
+    el.append(...sections);
+    document.body.appendChild(el);
+    return el;
+}
+
+export const AdwShortcutsTest = async () => {
+    await describe('adw-shortcuts-dialog is an adw-dialog', async () => {
+        await it('carries the dialog chrome and its title', async () => {
+            const dlg = dialog(section('General'));
+            // The flat header with the close button is the base's, and the class is
+            // `dialog.shortcuts` upstream — which is why the element adds it as a class
+            // of its own rather than a wrapper element.
+            expect(dlg.classList.contains('adw-dialog')).toBe(true);
+            expect(dlg.classList.contains('adw-shortcuts-dialog')).toBe(true);
+            expect(dlg.querySelector('.adw-dialog-header')).not.toBeNull();
+            expect(dlg.querySelector('.adw-dialog-title')?.textContent).toBe('Keyboard Shortcuts');
+            dlg.remove();
+        });
+
+        await it('presents and closes through the inherited dialog API', async () => {
+            const dlg = dialog(section('General'));
+            expect(dlg.open).toBe(false);
+            dlg.present();
+            expect(dlg.open).toBe(true);
+            dlg.close();
+            expect(dlg.open).toBe(false);
+            dlg.remove();
+        });
+
+        await it('holds its sections inside the dialog content area', async () => {
+            const dlg = dialog(section('General'), section('Navigation'));
+            expect(dlg.sections.length).toBe(2);
+            // The sections sit in the base's own content area — no wrapper of this
+            // class's own — so the dialog's padding and scrolling wrap them the way
+            // they wrap any other child, and a section added later lands there too.
+            expect(dlg.sections.every((el) => el.parentElement === dlg.contentArea)).toBe(true);
+            dlg.remove();
+        });
+
+        await it('routes a section appended after connect into the content area', async () => {
+            const dlg = dialog(section('General'));
+            const late = section('Navigation');
+            dlg.appendChild(late);
+            // The routing is a MutationObserver (`bindSlottedChildren`), so the move is
+            // a microtask away rather than synchronous with the append.
+            await Promise.resolve();
+            expect(dlg.sections.length).toBe(2);
+            expect(late.parentElement).toBe(dlg.contentArea);
+            dlg.remove();
+        });
+    });
+
+    await describe('adw-shortcuts-section', async () => {
+        await it('draws a heading only when it has a title', async () => {
+            // The class documents an untitled section as the way to subdivide a section
+            // into groups, and libadwaita draws no heading for one.
+            const titled = section('General', item('Open Menu', 'F10'));
+            const untitled = section(null, item('Move Tab Left', '<Shift><Ctrl>Page_Up'));
+            document.body.append(titled, untitled);
+
+            const titledHeading = titled.querySelector('.adw-shortcuts-section-title') as HTMLElement;
+            const untitledHeading = untitled.querySelector('.adw-shortcuts-section-title') as HTMLElement;
+            expect(titledHeading.hidden).toBe(false);
+            expect(untitledHeading.hidden).toBe(true);
+            titled.remove();
+            untitled.remove();
+        });
+
+        await it('exposes its items in document order', async () => {
+            const sec = section('General', item('Open Menu', 'F10'), item('Quit', '<Control>Q'));
+            document.body.appendChild(sec);
+            expect(sec.items.map((el) => el.getAttribute('title'))).toStrictEqual(['Open Menu', 'Quit']);
+            sec.remove();
+        });
+    });
+
+    await describe('adw-shortcuts-item', async () => {
+        await it('draws the accelerator as keycaps', async () => {
+            const el = item('Open Menu', 'F10');
+            document.body.appendChild(el);
+            const label = el.querySelector('adw-shortcut-label');
+            expect(label?.getAttribute('accelerator')).toBe('F10');
+            expect(el.hasAccelerator).toBe(true);
+            el.remove();
+        });
+
+        await it('draws no keycaps for an item that stands for an action alone', async () => {
+            // An accelerator for an action comes from Gtk.Application, which a document
+            // has no way to ask, so the row is allowed to carry the action alone.
+            const el = item('Preferences');
+            el.setAttribute('action-name', 'app.preferences');
+            document.body.appendChild(el);
+            expect(el.hasAccelerator).toBe(false);
+            expect((el.querySelector('adw-shortcut-label') as HTMLElement | null)?.hidden).toBe(true);
+            el.remove();
+        });
+
+        await it('draws the subtitle only when there is one', async () => {
+            const withSub = item('Move Tab Left', '<Shift><Ctrl>Page_Up', 'Move the current tab');
+            const without = item('Quit', '<Control>Q');
+            document.body.append(withSub, without);
+            const sub = withSub.querySelector('.adw-shortcuts-item-subtitle') as HTMLElement;
+            expect(sub.hidden).toBe(false);
+            expect(sub.textContent).toBe('Move the current tab');
+            expect((without.querySelector('.adw-shortcuts-item-subtitle') as HTMLElement).hidden).toBe(true);
+            withSub.remove();
+            without.remove();
+        });
+
+        await it('hides a row that belongs to the other text direction', async () => {
+            // adw-shortcuts-item.c:25-28 — one dialog carries both an LTR and an RTL
+            // accelerator for the same action, and each row shows in its own direction.
+            const rtl = item('Move Tab Left', '<Shift><Ctrl>Page_Up');
+            rtl.setAttribute('direction', 'rtl');
+            const both = item('Quit', '<Control>Q');
+            document.body.append(rtl, both);
+            // The harness document is LTR, so the RTL row is the one that hides.
+            expect(rtl.hidden).toBe(true);
+            expect(both.hidden).toBe(false);
+            rtl.remove();
+            both.remove();
+        });
+    });
+};

package/src/adw-status-page.spec.ts

@@ -0,0 +1,124 @@
+// <adw-status-page> compact — the documented smaller status page for a narrow surface.
+//
+// libadwaita ships ONE style class on this widget, `.compact`
+// (style-classes.md "Compact Status Page"), and `_misc.scss` gives it four differences from the
+// full page: margin 24px 12px not 36px 12px, icon 96px not 128px, 12px not 24px under the icon,
+// `.title-2` not `.title-1`. The child keeps libadwaita's 24px spacing, of which this renderer's
+// flex `gap` supplies 12 — hence `margin-top: 12px`.
+//
+// Each is asserted as a COMPUTED size on the node the rule selects, not as the class alone: the
+// class would pass against the pre-#1826 element whenever an author wrote `class="compact"` by
+// hand, so a class-only suite would have left the variant unmeasured.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { AdwStatusPage } from './elements/adw-status-page.js';
+
+/** Mount a status page wide enough for the full variant to differ from the compact one. */
+function mount(
+    attributes: Record<string, string> = {},
+    width = 400,
+): {
+    el: AdwStatusPage;
+    host: HTMLElement;
+} {
+    const host = document.createElement('div');
+    host.style.width = `${width}px`;
+    document.body.appendChild(host);
+    const el = document.createElement('adw-status-page') as AdwStatusPage;
+    el.setAttribute('icon', 'dialog-error-symbolic');
+    el.setAttribute('title', 'Could not connect');
+    el.setAttribute('description', 'Check your network connection and try again.');
+    for (const [name, value] of Object.entries(attributes)) el.setAttribute(name, value);
+    host.appendChild(el);
+    return { el, host };
+}
+
+/** Tolerance for a computed ratio: Firefox rounds a percentage-derived px size. */
+const near = (actual: number, expected: number, tolerance = 0.005): boolean => Math.abs(actual - expected) <= tolerance;
+
+const iconOf = (el: AdwStatusPage): HTMLElement => el.querySelector('.adw-status-page-icon') as HTMLElement;
+const titleOf = (el: AdwStatusPage): HTMLElement => el.querySelector('.adw-status-page-title') as HTMLElement;
+const childOf = (el: AdwStatusPage): HTMLElement => el.querySelector('.adw-status-page-child') as HTMLElement;
+
+export const AdwStatusPageTest = async () => {
+    await describe('adw-status-page compact (style-classes.md "Compact Status Page")', async () => {
+        await it('the compact attribute puts the documented style class on the host', async () => {
+            const { el, host } = mount({ compact: '' });
+            // The selector is `adw-status-page.compact` — the HOST, not an inner node, which
+            // is why this element writes the class itself instead of leaving it to a wrapper.
+            expect(el.classList.contains('compact')).toBe(true);
+            host.remove();
+        });
+
+        await it('a full status page carries no compact class and keeps the 128px icon', async () => {
+            const { el, host } = mount();
+            expect(el.classList.contains('compact')).toBe(false);
+            expect(getComputedStyle(iconOf(el)).width).toBe('128px');
+            expect(getComputedStyle(el).paddingTop).toBe('36px');
+            host.remove();
+        });
+
+        await it('compact shrinks the icon to 96px and the margin to 24px (_misc.scss, statuspage.compact)', async () => {
+            const { el, host } = mount({ compact: '' });
+            const icon = getComputedStyle(iconOf(el));
+            expect(icon.width).toBe('96px');
+            expect(icon.height).toBe('96px');
+            expect(icon.marginBottom).toBe('12px');
+            expect(getComputedStyle(el).paddingTop).toBe('24px');
+            expect(getComputedStyle(el).paddingBottom).toBe('24px');
+            host.remove();
+        });
+
+        await it('compact sets .title-2 (136%), the full page .title-1 (181%) (_labels.scss)', async () => {
+            const compact = mount({ compact: '' });
+            const full = mount();
+            try {
+                // The RATIO, not a pixel size: `_misc.scss` picks between `.title-1` and
+                // `.title-2`, which are 181% and 136% of the SAME inherited size — the
+                // boundary reset re-roots it (`_reset.scss`, ADR 0010), and a px assertion
+                // would pin this suite to one font instead of to the ratio the class encodes.
+                const compactTitle = parseFloat(getComputedStyle(titleOf(compact.el)).fontSize);
+                const fullTitle = parseFloat(getComputedStyle(titleOf(full.el)).fontSize);
+                expect(compactTitle < fullTitle).toBe(true);
+                expect(near(compactTitle / fullTitle, 136 / 181)).toBe(true);
+                // …and the weights both `.title-1`/`.title-2` carry, so this is the
+                // heading scale rather than a body label that happens to be smaller.
+                expect(getComputedStyle(titleOf(compact.el)).fontWeight).toBe('800');
+            } finally {
+                compact.host.remove();
+                full.host.remove();
+            }
+        });
+
+        await it('compact leaves 12px to the child beyond the 12px flex gap (_misc.scss, 24px spacing)', async () => {
+            const { el, host } = mount({ compact: '' });
+            const button = document.createElement('button');
+            button.className = 'adw-button suggested-action';
+            button.textContent = 'Try Again';
+            el.appendChild(button);
+
+            expect(getComputedStyle(childOf(el)).marginTop).toBe('12px');
+            // The full page's own 24px, so the pair cannot both be the compact rule.
+            const full = mount();
+            try {
+                expect(getComputedStyle(childOf(full.el)).marginTop).toBe('24px');
+            } finally {
+                host.remove();
+                full.host.remove();
+            }
+        });
+
+        await it('a .blp\'s styles ["compact"] survives a later attribute change', async () => {
+            const { el, host } = mount({ compact: '' });
+            el.classList.add('compact');
+            el.removeAttribute('compact');
+            // `title` is the attribute every real page sets, and setting it re-renders. A
+            // `toggle` here would strip the class the shared-tree builder had put there —
+            // `shared-tree-builder.ts:296` writes a `.blp`'s style classes onto this host.
+            el.setAttribute('title', 'Still compact');
+            expect(el.classList.contains('compact')).toBe(true);
+            expect(getComputedStyle(iconOf(el)).width).toBe('96px');
+            host.remove();
+        });
+    });
+};

package/src/adw-tab-bar.spec.ts

@@ -0,0 +1,287 @@
+// DOM-level tests for <adw-tab-bar>: the strip libadwaita binds to a view through
+// `Adw.TabBar:view`. Everything under test is derived from a live view, so each case
+// drives the view and reads the bar — the same arrangement `adw-tab-button.spec.ts` uses
+// for the one widget that is also a view's companion.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { AdwTabBar } from './elements/adw-tab-bar.js';
+import type { AdwTabView } from './elements/adw-tab-view.js';
+
+const settle = () => new Promise<void>((resolve) => setTimeout(resolve, 0));
+
+let serial = 0;
+
+/** A view with `titles`, a bar bound to it BY ID, and the action widgets' slots empty. */
+function mount(titles: readonly string[]): { bar: AdwTabBar; view: AdwTabView; host: HTMLElement } {
+    const id = `bar-view-${(serial += 1)}`;
+    const host = document.createElement('div');
+    const pages = titles.map((title) => `<adw-tab-page title="${title}"></adw-tab-page>`).join('');
+    host.innerHTML = `<adw-tab-view id="${id}">${pages}</adw-tab-view><adw-tab-bar view="${id}"></adw-tab-bar>`;
+    document.body.appendChild(host);
+    return {
+        bar: host.querySelector('adw-tab-bar') as AdwTabBar,
+        view: host.querySelector('adw-tab-view') as AdwTabView,
+        host,
+    };
+}
+
+const chips = (bar: AdwTabBar) => [...bar.querySelectorAll('.adw-tab')] as HTMLElement[];
+const chipTitles = (bar: AdwTabBar) => chips(bar).map((chip) => chip.querySelector('.adw-tab-title')?.textContent);
+
+export const AdwTabBarTest = async () => {
+    await describe('<adw-tab-bar> binds to a view', async () => {
+        await it('resolves `view` by element id and draws one chip per page', async () => {
+            const { bar, view, host } = mount(['One', 'Two', 'Three']);
+            expect(bar.view).toBe(view);
+            expect(chipTitles(bar)).toStrictEqual(['One', 'Two', 'Three']);
+            host.remove();
+        });
+
+        await it('takes the view directly through the property', async () => {
+            const view = document.createElement('adw-tab-view') as AdwTabView;
+            document.body.appendChild(view);
+            view.appendPage({ id: 'a', title: 'A' });
+            const bar = document.createElement('adw-tab-bar') as AdwTabBar;
+            document.body.appendChild(bar);
+            bar.view = view;
+            expect(bar.view).toBe(view);
+            expect(chipTitles(bar)).toStrictEqual(['A']);
+            bar.remove();
+            view.remove();
+        });
+
+        await it('follows pages added, removed and reordered after connect', async () => {
+            const { bar, view, host } = mount(['One', 'Two']);
+            const first = view.pages[0].id;
+            view.appendPage({ id: 'three', title: 'Three' });
+            expect(chipTitles(bar)).toStrictEqual(['One', 'Two', 'Three']);
+            view.reorderPage('three', 0);
+            expect(chipTitles(bar)).toStrictEqual(['Three', 'One', 'Two']);
+            view.closePage(first);
+            expect(chipTitles(bar)).toStrictEqual(['Three', 'Two']);
+            host.remove();
+        });
+
+        await it('reflects a title change without rebuilding the chip', async () => {
+            const { bar, view, host } = mount(['One']);
+            const chip = chips(bar)[0];
+            view.setPageTitle(view.pages[0].id, 'Renamed');
+            expect(chips(bar)[0]).toBe(chip);
+            expect(chip.querySelector('.adw-tab-title')?.textContent).toBe('Renamed');
+            host.remove();
+        });
+    });
+
+    await describe('<adw-tab-bar> selection', async () => {
+        await it('marks the selected chip and moves the roving tabindex with it', async () => {
+            const { bar, view, host } = mount(['One', 'Two']);
+            expect(chips(bar).map((chip) => chip.classList.contains('active'))).toStrictEqual([true, false]);
+            expect(chips(bar).map((chip) => chip.tabIndex)).toStrictEqual([0, -1]);
+
+            view.selectNthPage(1);
+            expect(chips(bar).map((chip) => chip.classList.contains('active'))).toStrictEqual([false, true]);
+            expect(chips(bar).map((chip) => chip.tabIndex)).toStrictEqual([-1, 0]);
+            expect(chips(bar).map((chip) => chip.getAttribute('aria-selected'))).toStrictEqual(['false', 'true']);
+            host.remove();
+        });
+
+        await it('selects on a chip press and closes on the close affordance', async () => {
+            const { bar, view, host } = mount(['One', 'Two']);
+            const second = view.pages[1].id;
+            chips(bar)[1].dispatchEvent(new MouseEvent('click', { bubbles: true }));
+            expect(view.selectedId).toBe(second);
+
+            const close = chips(bar)[1].querySelector('.adw-tab-close') as HTMLElement;
+            // The close affordance is hidden until the tab is hovered or selected, and this
+            // one is the selected tab, so `tabCloseVisible` shows it on its own.
+            expect(close.hidden).toBe(false);
+            close.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+            expect(chipTitles(bar)).toStrictEqual(['One']);
+            host.remove();
+        });
+
+        await it('ArrowRight and End move the selection from the keyboard', async () => {
+            const { bar, view, host } = mount(['One', 'Two', 'Three']);
+            const ids = view.pages.map((page) => page.id);
+            chips(bar)[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+            expect(view.selectedId).toBe(ids[1]);
+            chips(bar)[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
+            expect(view.selectedId).toBe(ids[2]);
+            host.remove();
+        });
+    });
+
+    await describe('<adw-tab-bar> tabs-revealed', async () => {
+        await it('is up without `autohide`, whatever the page count', async () => {
+            const { bar, host } = mount(['One']);
+            expect(bar.tabsRevealed).toBe(true);
+            expect(bar.hidden).toBe(false);
+            host.remove();
+        });
+
+        await it('hides with `autohide` on a single page and comes back for two', async () => {
+            const { bar, view, host } = mount(['One']);
+            bar.autohide = true;
+            // `tabsRevealed` reads the LIVE attribute, so the write is the whole input.
+            expect(bar.tabsRevealed).toBe(false);
+            expect(bar.hidden).toBe(true);
+
+            view.appendPage({ id: 'two', title: 'Two' });
+            expect(bar.tabsRevealed).toBe(true);
+            expect(bar.hidden).toBe(false);
+            host.remove();
+        });
+
+        await it('stays up with `autohide` on a single PINNED page', async () => {
+            const { bar, host } = mount(['Pinned']);
+            bar.autohide = true;
+            const page = bar.view?.pages[0];
+            expect(page?.pinned).toBe(false);
+            // A declared `<adw-tab-page>` with no `page-id` gets a generated one, which an
+            // author cannot predict — so the pin goes in through the page's own id.
+            bar.view?.setPagePinned(page?.id ?? '', true);
+            expect(bar.tabsRevealed).toBe(true);
+            expect(bar.hidden).toBe(false);
+            host.remove();
+        });
+    });
+
+    await describe('<adw-tab-bar> properties', async () => {
+        await it('carries expand-tabs and inverted as attributes, and says so', async () => {
+            const { bar, host } = mount(['One', 'Two']);
+            expect(bar.expandTabs).toBe(false);
+            expect(bar.inverted).toBe(false);
+            bar.expandTabs = true;
+            bar.inverted = true;
+            expect(bar.hasAttribute('expand-tabs')).toBe(true);
+            expect(bar.hasAttribute('inverted')).toBe(true);
+            host.remove();
+        });
+
+        await it('notifies each property on a real change', async () => {
+            const { bar, host } = mount(['One']);
+            const seen: string[] = [];
+            for (const name of ['autohide', 'expand-tabs', 'inverted', 'extra-drag-preload']) {
+                bar.addEventListener(`notify::${name}`, () => seen.push(name));
+            }
+            bar.autohide = true;
+            bar.inverted = true;
+            expect(seen).toStrictEqual(['autohide', 'inverted']);
+            host.remove();
+        });
+
+        await it('notifies `view` when it is rebound', async () => {
+            const { bar, view, host } = mount(['One']);
+            let notified = false;
+            bar.addEventListener('notify::view', () => (notified = true));
+            const other = document.createElement('adw-tab-view') as AdwTabView;
+            document.body.appendChild(other);
+            other.appendPage({ id: 'z', title: 'Z' });
+            bar.setView(other);
+            expect(notified).toBe(true);
+            expect(chipTitles(bar)).toStrictEqual(['Z']);
+            bar.setView(view);
+            expect(chipTitles(bar)).toStrictEqual(['One']);
+            other.remove();
+            host.remove();
+        });
+    });
+
+    await describe('<adw-tab-bar> action widgets', async () => {
+        await it('routes a `slot="start-action-widget"` child into the leading bin', async () => {
+            const { bar, host } = mount(['One']);
+            const button = document.createElement('button');
+            button.slot = 'start-action-widget';
+            // Appended AFTER connect on purpose: `bindSlottedChildren` observes the host, so
+            // a late child lands where a parse-time one would — on the observer's microtask,
+            // which is why the read below waits for one.
+            bar.appendChild(button);
+            await settle();
+            expect(bar.startActionWidget).toBe(button);
+            expect(bar.querySelector('.adw-tab-bar-start-action button')).toBe(button);
+            // The bin leads the box, which is the order `AdwTabBar`'s template puts the two
+            // action bins in (adw-tab-bar.ui).
+            expect(bar.querySelector('.adw-tab-box')?.previousElementSibling).toBe(
+                bar.querySelector('.adw-tab-bar-start-action'),
+            );
+            host.remove();
+        });
+
+        await it('routes a `slot="end-action-widget"` child into the trailing bin', async () => {
+            const { bar, host } = mount(['One']);
+            const button = document.createElement('button');
+            button.slot = 'end-action-widget';
+            bar.appendChild(button);
+            await settle();
+            expect(bar.endActionWidget).toBe(button);
+            expect(bar.querySelector('.adw-tab-bar-end-action button')).toBe(button);
+            host.remove();
+        });
+
+        await it('takes an action widget through the property too', async () => {
+            const { bar, host } = mount(['One']);
+            const button = document.createElement('button');
+            bar.endActionWidget = button;
+            expect(bar.querySelector('.adw-tab-bar-end-action')?.lastElementChild).toBe(button);
+            bar.endActionWidget = null;
+            expect(bar.endActionWidget).toBe(null);
+            host.remove();
+        });
+    });
+
+    await describe('<adw-tab-bar> overflow and the extra drop target', async () => {
+        await it('reports `is-overflowing` off the strip, not off the chip count', async () => {
+            const { bar, host } = mount(['One', 'Two']);
+            // Nothing is scrolled yet, so the strip fits its chips and does NOT overflow:
+            // the indicator is the adjustment's answer, not a threshold on `nPages`.
+            expect(bar.isOverflowing).toBe(false);
+            expect((bar.querySelector('.adw-tab-box-overflow') as HTMLElement).hidden).toBe(true);
+            host.remove();
+        });
+
+        await it('dispatches `extra-drag-value` on hover-start and carries the action back', async () => {
+            const { bar, host } = mount(['One']);
+            bar.setupExtraDropTarget(['text/plain']);
+            let seen: unknown = 'unset';
+            bar.addEventListener('extra-drag-value', (event) => {
+                seen = (event as CustomEvent).detail.action;
+                (event as CustomEvent).detail.action = 'move';
+            });
+            const transfer = new DataTransfer();
+            transfer.setData('text/plain', 'payload');
+            bar.dispatchEvent(new DragEvent('dragover', { dataTransfer: transfer, bubbles: true, cancelable: true }));
+            // Hover-start emits a NULL action, and `extra-drag-preferred-action` is whatever
+            // the handler answered with.
+            expect(seen).toBe(null);
+            expect(bar.extraDragPreferredAction).toBe('move');
+            host.remove();
+        });
+
+        await it('dispatches a cancelable `extra-drag-drop` carrying the dropped data', async () => {
+            const { bar, host } = mount(['One']);
+            bar.setupExtraDropTarget(['text/plain'], ['copy']);
+            let detail: { action: unknown; data: unknown } | null = null;
+            bar.addEventListener('extra-drag-drop', (event) => {
+                detail = (event as CustomEvent).detail;
+            });
+            const transfer = new DataTransfer();
+            transfer.setData('text/plain', 'payload');
+            bar.dispatchEvent(new DragEvent('drop', { dataTransfer: transfer, bubbles: true, cancelable: true }));
+            expect(detail?.data).toBe('payload');
+            expect(detail?.action).toBe('copy');
+            host.remove();
+        });
+
+        await it('leaves a drop of an unlisted type to the page', async () => {
+            const { bar, host } = mount(['One']);
+            bar.setupExtraDropTarget(['text/plain']);
+            let dropped = false;
+            bar.addEventListener('extra-drag-drop', () => (dropped = true));
+            const transfer = new DataTransfer();
+            transfer.setData('application/x-elsewhere', 'payload');
+            bar.dispatchEvent(new DragEvent('drop', { dataTransfer: transfer, bubbles: true, cancelable: true }));
+            expect(dropped).toBe(false);
+            host.remove();
+        });
+    });
+};

package/src/adw-tab-button.spec.ts

@@ -0,0 +1,101 @@
+// DOM-level tests for <adw-tab-button>: the page counter (`update_icon`,
+// adw-tab-button.c:102-133) and the attention dot (`update_needs_attention`,
+// adw-tab-button.c:135-161). The counter is DERIVED from a view, so every test drives the
+// view and reads the button.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { AdwTabButton } from './elements/adw-tab-button.js';
+import type { AdwTabView } from './elements/adw-tab-view.js';
+
+const settle = () => new Promise<void>((resolve) => setTimeout(resolve, 0));
+
+let serial = 0;
+
+function mount(pages: number): { button: AdwTabButton; view: AdwTabView; host: HTMLElement } {
+    const id = `tb-view-${(serial += 1)}`;
+    const host = document.createElement('div');
+    const rows = Array.from({ length: pages }, (_, i) => `<adw-tab-page title="Page ${i}"></adw-tab-page>`);
+    host.innerHTML = `<adw-tab-view id="${id}">${rows.join('')}</adw-tab-view><adw-tab-button view="${id}"></adw-tab-button>`;
+    document.body.appendChild(host);
+    return {
+        button: host.querySelector('adw-tab-button') as AdwTabButton,
+        view: host.querySelector('adw-tab-view') as AdwTabView,
+        host,
+    };
+}
+
+const label = (button: AdwTabButton) => button.querySelector('.adw-tab-button-label') as HTMLElement;
+const dot = (button: AdwTabButton) => button.querySelector('.adw-tab-button-indicator') as HTMLElement;
+
+export const AdwTabButtonTest = async () => {
+    await describe('<adw-tab-button> counter', async () => {
+        await it('shows the page count of the view it is bound to', async () => {
+            const { button, view, host } = mount(3);
+            expect(button.view).toBe(view);
+            expect(label(button).textContent).toBe('3');
+            expect(label(button).classList.contains('small')).toBe(false);
+            host.remove();
+        });
+
+        await it('follows pages added and removed', async () => {
+            const { button, view, host } = mount(2);
+            // A page added after the view connected goes through its API: declared
+            // `<adw-tab-page>` children are adopted on connect only.
+            view.appendPage({ id: 'late', title: 'Late' });
+            expect(label(button).textContent).toBe('3');
+            view.closePage('late');
+            expect(label(button).textContent).toBe('2');
+            host.remove();
+        });
+
+        await it('is `small` from ten pages and a glyph instead of a number from a hundred', async () => {
+            const ten = mount(10);
+            expect(label(ten.button).textContent).toBe('10');
+            expect(label(ten.button).classList.contains('small')).toBe(true);
+            ten.host.remove();
+
+            const hundred = mount(100);
+            expect(label(hundred.button).hidden).toBe(true);
+            expect(hundred.button.querySelector('.adw-tab-button-indicatorbin')?.classList.contains('overflow')).toBe(
+                true,
+            );
+            hundred.host.remove();
+        });
+
+        await it('without a view the plate stays, with a zero on it', async () => {
+            const host = document.createElement('div');
+            host.innerHTML = '<adw-tab-button></adw-tab-button>';
+            document.body.appendChild(host);
+            const button = host.firstElementChild as AdwTabButton;
+            expect(button.view).toBeNull();
+            expect(label(button).textContent).toBe('0');
+            host.remove();
+        });
+    });
+
+    await describe('<adw-tab-button> needs-attention', async () => {
+        await it('lights up for a page that is NOT the selected one', async () => {
+            const { button, view, host } = mount(3);
+            expect(dot(button).hidden).toBe(true);
+            view.querySelectorAll('adw-tab-page')[2].setAttribute('needs-attention', '');
+            await settle();
+            expect(dot(button).hidden).toBe(false);
+            host.remove();
+        });
+
+        await it('ignores the selected page, which is already in front of the user', async () => {
+            const { button, view, host } = mount(3);
+            view.querySelectorAll('adw-tab-page')[0].setAttribute('needs-attention', '');
+            await settle();
+            expect(dot(button).hidden).toBe(true);
+            host.remove();
+        });
+
+        await it('is a real button the platform activates', async () => {
+            const { button, host } = mount(1);
+            expect(button.getAttribute('role')).toBe('button');
+            expect(button.querySelector('button')).not.toBeNull();
+            host.remove();
+        });
+    });
+};