@gjsify/adwaita-web 0.32.0 → 0.33.0

package/src/adw-wrap-box.spec.ts

@@ -23,7 +23,12 @@
 import { describe, expect, it } from '@gjsify/unit';
 
 import {
+    WRAP_BOX_CHILD_ORDER_VECTORS,
+    WRAP_BOX_LENGTH_VECTORS,
     WRAP_BOX_LINE_VECTORS,
+    WRAP_BOX_NATURAL_LENGTH_VECTORS,
+    WRAP_BOX_NOTIFY_PROPERTIES,
+    WRAP_BOX_POLICY_VECTORS,
     WRAP_BOX_SPACING_NOTIFY_VECTORS,
     WRAP_BOX_SPACING_VECTORS,
 } from '@gjsify/adwaita-core/conformance';
@@ -49,7 +54,7 @@ function unmountAll(): void {
 }
 
 /** A vector value as it reads in a test name (`JSON.stringify` flattens NaN to null). */
-function label(value: number | string | null): string {
+function label(value: unknown): string {
     return typeof value === 'string' ? JSON.stringify(value) : String(value);
 }
 
@@ -191,4 +196,146 @@ export const AdwWrapBoxTest = async () => {
             });
         }
     });
+
+    await describe('<adw-wrap-box> the properties neither port had (#1048)', async () => {
+        for (const { value, policy, flexShrink, rule } of WRAP_BOX_POLICY_VECTORS) {
+            await it(`wrap-policy ${label(value)} → ${policy}: ${rule}`, () => {
+                const attrs: Record<string, string> = {};
+                if (value !== null) attrs['wrap-policy'] = String(value);
+                const { box, children } = mountWrapBox(attrs);
+                expect((box as HTMLElement & { wrapPolicy: string }).wrapPolicy).toBe(policy);
+                expect(getComputedStyle(children[0]).flexShrink).toBe(String(flexShrink));
+                unmountAll();
+            });
+        }
+
+        await it('a box with no wrap-policy forbids shrinking — CSS defaults to the OTHER one', () => {
+            const { children } = mountWrapBox({});
+            expect(getComputedStyle(children[0]).flexShrink).toBe('0');
+            unmountAll();
+        });
+
+        for (const { value, unit, dpi, px, rule } of WRAP_BOX_LENGTH_VECTORS) {
+            // The element resolves at the default dpi; the scaled rows are the
+            // core suite's, since a browser has no `gtk-xft-dpi` to report.
+            if (dpi !== 96 || value < 0) continue;
+            await it(`child-spacing ${value}${String(unit)} → ${px}px: ${rule}`, () => {
+                const attrs: Record<string, string> = { 'child-spacing': String(value) };
+                if (unit !== null) attrs['child-spacing-unit'] = String(unit);
+                const { box } = mountWrapBox(attrs);
+                expect(getComputedStyle(box).columnGap).toBe(`${px}px`);
+                unmountAll();
+            });
+        }
+
+        for (const { value, length, rule } of WRAP_BOX_NATURAL_LENGTH_VECTORS) {
+            await it(`natural-line-length ${label(value)} → ${length}: ${rule}`, () => {
+                const attrs: Record<string, string> = {};
+                if (value !== null) attrs['natural-line-length'] = String(value);
+                const { box } = mountWrapBox(attrs);
+                expect((box as HTMLElement & { naturalLineLength: number }).naturalLineLength).toBe(length);
+                // -1 is UNSET, not a length: it must not reach the style at all.
+                expect(box.style.maxWidth).toBe(length < 0 ? '' : `${length}px`);
+                unmountAll();
+            });
+        }
+
+        await it('a VERTICAL box caps the block axis, because that is where its lines run', () => {
+            const { box } = mountWrapBox({ orientation: 'vertical', 'natural-line-length': '400' });
+            expect(box.style.maxHeight).toBe('400px');
+            expect(box.style.maxWidth).toBe('');
+            unmountAll();
+        });
+
+        await it('pack-direction and wrap-reverse reverse the axes they own', () => {
+            const packed = mountWrapBox({ 'pack-direction': 'end-to-start' });
+            expect(getComputedStyle(packed.box).flexDirection).toBe('row-reverse');
+            unmountAll();
+
+            const reversed = mountWrapBox({ 'wrap-reverse': '' });
+            expect(getComputedStyle(reversed.box).flexWrap).toBe('wrap-reverse');
+            unmountAll();
+        });
+
+        await it('notifies for EVERY property, not just the two spacings', () => {
+            const { box } = mountWrapBox({});
+            const seen: string[] = [];
+            for (const property of WRAP_BOX_NOTIFY_PROPERTIES) {
+                box.addEventListener(`notify::${property}`, () => seen.push(property));
+            }
+            // One real change per property, each different from the default.
+            box.setAttribute('child-spacing', '6');
+            box.setAttribute('child-spacing-unit', 'sp');
+            box.setAttribute('pack-direction', 'end-to-start');
+            box.setAttribute('align', '1');
+            box.setAttribute('justify', 'fill');
+            box.toggleAttribute('justify-last-line', true);
+            box.setAttribute('line-spacing', '4');
+            box.setAttribute('line-spacing-unit', 'pt');
+            box.toggleAttribute('line-homogeneous', true);
+            box.setAttribute('natural-line-length', '400');
+            box.setAttribute('natural-line-length-unit', 'sp');
+            box.toggleAttribute('wrap-reverse', true);
+            box.setAttribute('wrap-policy', 'minimum');
+            box.setAttribute('orientation', 'vertical');
+
+            expect([...seen].sort()).toStrictEqual([...WRAP_BOX_NOTIFY_PROPERTIES].sort());
+            unmountAll();
+        });
+
+        await it('and stays silent for a value that normalises to what it already holds', () => {
+            const { box } = mountWrapBox({ 'wrap-policy': 'minimum' });
+            let notified = 0;
+            box.addEventListener('notify::wrap-policy', () => {
+                notified++;
+            });
+            box.setAttribute('wrap-policy', 'not-a-policy'); // → the default, a change
+            expect(notified).toBe(1);
+            box.setAttribute('wrap-policy', 'also-not-a-policy'); // → the default again
+            expect(notified).toBe(1);
+            unmountAll();
+        });
+    });
+
+    await describe('<adw-wrap-box> child list (insert/reorder after, remove_all)', async () => {
+        for (const { op, children, child, sibling, result, rule } of WRAP_BOX_CHILD_ORDER_VECTORS) {
+            const name = `${op} ${child} after ${sibling ?? 'NULL'} in [${children.join(',')}]`;
+            await it(`${name}: ${rule}`, () => {
+                const box = document.createElement('adw-wrap-box') as HTMLElement & {
+                    insertChildAfter(c: Element, s?: Element | null): boolean;
+                    reorderChildAfter(c: Element, s?: Element | null): boolean;
+                };
+                document.body.appendChild(box);
+                const byId = new Map<string, HTMLElement>();
+                const make = (id: string) => {
+                    const view = document.createElement('div');
+                    view.dataset.id = id;
+                    byId.set(id, view);
+                    return view;
+                };
+                for (const id of children) box.appendChild(make(id));
+                // The child being placed may be one of the mounted ones (a
+                // reorder, or the "already parented" refusal) or a fresh one.
+                const target = byId.get(child) ?? make(child);
+                // A sibling the box does not have still has to be a real element.
+                const after = sibling === null ? null : (byId.get(sibling) ?? make(sibling));
+
+                const ok =
+                    op === 'insert-after' ? box.insertChildAfter(target, after) : box.reorderChildAfter(target, after);
+                expect(ok).toBe(result !== null);
+                const order = [...box.children].map((view) => (view as HTMLElement).dataset.id);
+                expect(order).toStrictEqual(result === null ? [...children] : [...result]);
+                unmountAll();
+            });
+        }
+
+        await it('removeAll empties the box, leaving the box itself mounted', () => {
+            const { box } = mountWrapBox({}, 4);
+            expect(box.children.length).toBe(4);
+            (box as HTMLElement & { removeAll(): void }).removeAll();
+            expect(box.children.length).toBe(0);
+            expect(box.isConnected).toBe(true);
+            unmountAll();
+        });
+    });
 };

package/src/chrome.spec.ts

@@ -14,7 +14,7 @@
 // faking one.
 import { describe, expect, it } from '@gjsify/unit';
 
-import { ADW_SPINNER_MIN_SIZE, spinnerGeometry } from '@gjsify/adwaita-core';
+import { ADW_SPINNER_MIN_SIZE, ADW_SPINNER_TRACK_OPACITY, spinnerGeometry } from '@gjsify/adwaita-core';
 import {
     CLAMP_ALLOCATE_VECTORS,
     CLAMP_PROPERTY_VECTORS,
@@ -201,52 +201,86 @@ export const AdwChromeTest = async () => {
     });
 
     await describe('adw-spinner geometry (AdwSpinnerPaintable conformance vectors)', async () => {
+        /** The `<svg>` the element draws its ring into. */
+        const ringOf = (spinner: HTMLElement) => spinner.querySelector('svg') as SVGSVGElement;
+
         for (const { width, height, diameter, lineWidth, rule } of SPINNER_GEOMETRY_VECTORS) {
-            // The element is the ring itself, so only the square, allocatable
-            // boxes describe what a `size` attribute can produce.
+            // Only square, allocatable boxes describe what a `size` attribute
+            // can produce; the rectangular rows exercise the paintable directly.
             if (width !== height || width < ADW_SPINNER_MIN_SIZE) continue;
 
             await it(`size ${width} draws a ${diameter}px ring stroked ${lineWidth}px — ${rule}`, () => {
-                const { host } = mountSized(200);
+                const { host } = mountSized(400);
                 const spinner = document.createElement('adw-spinner');
                 spinner.setAttribute('size', String(width));
                 host.appendChild(spinner);
 
-                expect(spinner.offsetWidth).toBe(diameter);
-                expect(spinner.offsetHeight).toBe(diameter);
-                expect(Number.parseFloat(spinner.style.borderWidth)).toBe(lineWidth);
+                const svg = ringOf(spinner);
+                expect(svg.getAttribute('width')).toBe(String(diameter));
+                expect(svg.getAttribute('height')).toBe(String(diameter));
+                const arc = svg.querySelectorAll('circle')[1] as SVGCircleElement;
+                expect(Number(arc.getAttribute('stroke-width'))).toBe(lineWidth);
                 host.remove();
             });
         }
 
         await it('strokes 3px at 24 and 6px at 48, where it used to stroke 2 and 4', () => {
-            const { host } = mountSized(200);
+            const { host } = mountSized(400);
             const spinner = document.createElement('adw-spinner');
             host.appendChild(spinner);
             const strokeAt = (size: number) => {
                 spinner.setAttribute('size', String(size));
-                return Number.parseFloat(spinner.style.borderWidth);
+                return Number(ringOf(spinner).querySelector('circle')?.getAttribute('stroke-width'));
             };
             expect(strokeAt(24)).toBe(3);
             expect(strokeAt(48)).toBe(6);
             expect(strokeAt(64)).toBe(8);
             host.remove();
         });
+
+        await it('rounds its arc ends — GSK_LINE_CAP_ROUND, square-cut before', () => {
+            const { host } = mountSized(400);
+            const spinner = document.createElement('adw-spinner');
+            spinner.setAttribute('size', '64');
+            host.appendChild(spinner);
+            const [track, arc] = [...ringOf(spinner).querySelectorAll('circle')];
+            expect(arc.getAttribute('stroke-linecap')).toBe('round');
+            // The TRACK is the widget colour at CIRCLE_OPACITY, not a grey.
+            expect(track.getAttribute('stroke')).toBe('currentColor');
+            expect(Number(track.getAttribute('stroke-opacity'))).toBe(ADW_SPINNER_TRACK_OPACITY);
+            host.remove();
+        });
     });
 
-    await describe('adw-spinner sizing (adw_spinner_measure minimum = natural)', async () => {
+    await describe('adw-spinner sizing — the BOX and the RING are different things', async () => {
         for (const { value, size, rule } of SPINNER_SIZE_VECTORS) {
-            await it(`size ${JSON.stringify(value ?? null)} → a ${spinnerGeometry(size, size).diameter}px ring — ${rule}`, () => {
+            await it(`size ${JSON.stringify(value ?? null)} → a ${size}px box — ${rule}`, () => {
                 const { host } = mountSized(400);
                 const spinner = document.createElement('adw-spinner');
                 if (value !== null && value !== undefined) spinner.setAttribute('size', String(value));
                 host.appendChild(spinner);
 
-                expect(spinner.offsetWidth).toBe(spinnerGeometry(size, size).diameter);
+                // THE BOX takes the whole request — this suite used to assert the
+                // ring's diameter here, contradicting the core table it drives.
+                expect(spinner.offsetWidth).toBe(size);
+                expect(spinner.offsetHeight).toBe(size);
+                // THE RING is capped and centred inside it.
+                const svg = spinner.querySelector('svg') as SVGSVGElement;
+                expect(Number(svg.getAttribute('width'))).toBe(spinnerGeometry(size, size).diameter);
                 host.remove();
             });
         }
 
+        await it('a 200px spinner occupies 200px and draws a 64px ring', () => {
+            const { host } = mountSized(400);
+            const spinner = document.createElement('adw-spinner');
+            spinner.setAttribute('size', '200');
+            host.appendChild(spinner);
+            expect(spinner.offsetWidth).toBe(200);
+            expect(Number((spinner.querySelector('svg') as SVGSVGElement).getAttribute('width'))).toBe(64);
+            host.remove();
+        });
+
         await it('defaults to the measured 16, not the invented 24', () => {
             const { host } = mountSized(400);
             const spinner = document.createElement('adw-spinner');
@@ -256,6 +290,71 @@ export const AdwChromeTest = async () => {
         });
     });
 
+    await describe('adw-spinner animation + accessibility (#1066)', async () => {
+        await it('announces itself — role progressbar, aria-busy (zero hits before)', () => {
+            const { host } = mountSized(400);
+            const spinner = document.createElement('adw-spinner');
+            host.appendChild(spinner);
+            expect(spinner.getAttribute('role')).toBe('progressbar');
+            expect(spinner.getAttribute('aria-busy')).toBe('true');
+            host.remove();
+        });
+
+        await it('BREATHES — the drawn arc length changes across a turn', () => {
+            const { host } = mountSized(400);
+            const spinner = document.createElement('adw-spinner') as HTMLElement & { drawAt(now: number): void };
+            spinner.setAttribute('size', '64');
+            host.appendChild(spinner);
+            const arc = spinner.querySelectorAll('circle')[1] as SVGCircleElement;
+
+            const drawnAt = (ms: number) => {
+                spinner.drawAt(ms);
+                return Number.parseFloat((arc.getAttribute('stroke-dasharray') ?? '0').split(' ')[0]);
+            };
+            // `drawAt` takes the FIRST call as the origin, so these are offsets
+            // into one animation, sampled across a cycle.
+            const lengths = [0, 200, 500, 900, 1300, 1900].map(drawnAt);
+            const spread = Math.max(...lengths) - Math.min(...lengths);
+            // A fixed 90-degree border chase — what this element used to draw —
+            // has a spread of exactly zero.
+            expect(spread).toBeGreaterThan(0);
+            host.remove();
+        });
+
+        await it('KEEPS SPINNING under reduced motion — a frozen busy indicator reads as a hang', () => {
+            // libadwaita opts the spinner out of the animation setting on purpose
+            // (adw-spinner-paintable.c:537). The old stylesheet had
+            // `@media (prefers-reduced-motion: reduce) { animation: none }`, so
+            // this asserts the ABSENCE of any CSS animation to switch off: the
+            // arc is driven per frame from JS and cannot be disabled by a query.
+            const { host } = mountSized(400);
+            const spinner = document.createElement('adw-spinner');
+            host.appendChild(spinner);
+            expect(getComputedStyle(spinner).animationName).toBe('none');
+            host.remove();
+        });
+
+        await it('advances while mapped and stops when it is not', () => {
+            const { host } = mountSized(400);
+            const spinner = document.createElement('adw-spinner') as HTMLElement & { drawAt(now: number): void };
+            host.appendChild(spinner);
+            const arc = spinner.querySelectorAll('circle')[1] as SVGCircleElement;
+            spinner.drawAt(0);
+            const first = arc.getAttribute('stroke-dashoffset');
+            spinner.drawAt(400);
+            expect(arc.getAttribute('stroke-dashoffset')).not.toBe(first);
+
+            // Unmapping removes it from the shared ticker — `widget_map_cb`
+            // (adw-spinner-paintable.c:181-185) is what plays the animation, so
+            // an off-screen spinner burns nothing.
+            spinner.remove();
+            const parked = arc.getAttribute('stroke-dashoffset');
+            spinner.drawAt(800); // only reachable directly; the ticker has dropped it
+            expect(arc.getAttribute('stroke-dashoffset')).not.toBe(parked);
+            host.remove();
+        });
+    });
+
     await describe('adw-toolbar-view style classes (update_undershoots + the style setters)', async () => {
         for (const { input, view, topBar, bottomBar, rule } of TOOLBAR_VIEW_CLASS_VECTORS) {
             await it(`${input.topBarStyle}/${input.bottomBarStyle} → [${view.join(' ')}] — ${rule}`, () => {

package/src/elements/adw-action-row.ts

@@ -84,7 +84,17 @@ export class AdwActionRow extends HTMLElement {
     }
 
     connectedCallback() {
-        if (this._initialized) return;
+        if (this._initialized) {
+            // Re-entering a document. `disconnectedCallback` drops the
+            // sensitivity observer, and returning here without rebuilding it
+            // left a MOVED row permanently blind to its activatable widget
+            // becoming insensitive — the same shape that broke the overlay
+            // split view's ResizeObserver and both view switchers' page
+            // observers. Anything torn down on the way out has to be rebuilt
+            // on the way back in.
+            this._observeSensitivity(this._state.activatableWidget);
+            return;
+        }
         this._initialized = true;
 
         const prefixChildren = Array.from(this.querySelectorAll(':scope > [slot="prefix"]'));

package/src/elements/adw-combo-row.ts

@@ -85,6 +85,7 @@ export class AdwComboRow extends HTMLElement {
         this._state.subscribe((change) => {
             this._valueEl.textContent = change.label;
             if (this._select.selectedIndex !== change.selected) this._select.selectedIndex = change.selected;
+            this._syncChooser();
             if (!change.interactive) return;
             this.setAttribute('selected', String(change.selected));
             this.dispatchEvent(
@@ -101,6 +102,7 @@ export class AdwComboRow extends HTMLElement {
             this._state.select(this._select.selectedIndex);
         });
 
+        this._syncChooser();
         this._renderText();
     }
 
@@ -115,6 +117,21 @@ export class AdwComboRow extends HTMLElement {
         }
     }
 
+    /**
+     * `model_changed` (adw-combo-row.c:187-195) — one option or none is not a
+     * choice, so the arrow goes and the row stops being activatable.
+     *
+     * Both halves have to be expressed: `data-presents-chooser` gates the
+     * `.adw-row-value::after` mask in the stylesheet, and DISABLING the overlaid
+     * `<select>` is what makes the row inert — hiding the arrow alone would leave
+     * a row that still opens a one-entry popup on click.
+     */
+    private _syncChooser() {
+        const presents = this._state.presentsChooser;
+        this.dataset.presentsChooser = presents ? 'true' : 'false';
+        this._select.disabled = !presents;
+    }
+
     private _renderText() {
         // The `string_is_not_empty` label rule, from core — this block was one of
         // six hand-rolled copies, all of which omitted the TITLE half.

package/src/elements/adw-inline-view-switcher.ts

@@ -53,6 +53,7 @@ import {
     isInlineViewSwitcherDisplayMode,
     toggleIndexForPage,
 } from '@gjsify/adwaita-core';
+import type { ViewSwitcherScheduler } from '@gjsify/adwaita-core';
 import type {
     AdwInlineViewSwitcherDisplayMode,
     AdwViewSwitcherPage,
@@ -75,21 +76,43 @@ export class AdwViewStackPage extends HTMLElement {
 }
 
 export class AdwInlineViewSwitcher extends HTMLElement {
-    private readonly _state = new ViewSwitcherState({ scheduler: domViewSwitcherScheduler });
+    /**
+     * The dwell timer, injectable.
+     *
+     * It used to be `new ViewSwitcherState({ scheduler: domViewSwitcherScheduler })`
+     * inline, which left NOWHERE to hand a clock in — so
+     * `VIEW_SWITCHER_DRAG_VECTORS` was driven by the core suite alone, and the
+     * conformance header claimed all three suites drove it. `scheduler` is a
+     * property so a test can replace it before the element connects; the DOM one
+     * is the default, exactly as before.
+     */
+    scheduler: ViewSwitcherScheduler = domViewSwitcherScheduler;
+    private _stateInstance: ViewSwitcherState | null = null;
+
+    /** Built on first access, so a `scheduler` set before connect is the one used. */
+    private get _state(): ViewSwitcherState {
+        if (!this._stateInstance) {
+            this._stateInstance = new ViewSwitcherState({ scheduler: this.scheduler });
+            this._stateInstance.subscribe((change) => this._onStateChange(change));
+        }
+        return this._stateInstance;
+    }
     private _groupEl!: HTMLDivElement;
     private _pagesEl!: HTMLDivElement;
     private _panels: HTMLDivElement[] = [];
     private _toggles: HTMLButtonElement[] = [];
     private _displayMode: AdwInlineViewSwitcherDisplayMode = 'labels';
     private _initialized = false;
+    /** The page ELEMENTS, kept because this element detaches them from the tree. */
+    private _declared: HTMLElement[] = [];
+    private _pageObserver: MutationObserver | undefined;
 
     static get observedAttributes() {
-        return ['active', 'display-mode', 'flat', 'round'];
+        return ['active', 'display-mode', 'flat', 'round', 'osd'];
     }
 
     constructor() {
         super();
-        this._state.subscribe((change) => this._onStateChange(change));
     }
 
     /** Zero-based index of the visible PAGE, `-1` when nothing is selected. */
@@ -147,7 +170,13 @@ export class AdwInlineViewSwitcher extends HTMLElement {
     }
 
     connectedCallback() {
-        if (this._initialized) return;
+        if (this._initialized) {
+            // Re-entering a document — same reason as `adw-view-switcher.ts`:
+            // the page observer is dropped on disconnect, so it has to be
+            // rebuilt here or a moved switcher goes deaf permanently.
+            this._watchPages();
+            return;
+        }
 
         // `:scope >` rather than a subtree scan — `<adw-view-stack>` uses the
         // same tag for its pages, so an unscoped query adopted a nested stack's.
@@ -176,6 +205,8 @@ export class AdwInlineViewSwitcher extends HTMLElement {
         this._displayMode = this._readDisplayModeAttr();
         this._initialized = true;
 
+        this._declared = declared;
+        this._watchPages();
         this._state.setPages(declared.map((pageEl) => readSwitcherPage(pageEl)));
         if (declaredActive !== null) {
             const index = Number.parseInt(declaredActive, 10);
@@ -186,6 +217,37 @@ export class AdwInlineViewSwitcher extends HTMLElement {
 
     disconnectedCallback() {
         this._state.cancelDrag();
+        this._pageObserver?.disconnect();
+        this._pageObserver = undefined;
+    }
+
+    /**
+     * Re-read every declared page and push it into the state.
+     *
+     * Driven by {@link _watchPages}, which is what makes a runtime
+     * `badge-number` or `icon-name` change reach the toggle — C rebinds on every
+     * page `notify` (adw-view-switcher.c:184-193) and this element did not.
+     */
+    refreshPages(): void {
+        if (!this._initialized) return;
+        this._state.setPages(this._declared.map((pageEl) => readSwitcherPage(pageEl)));
+        this._rebuildToggles();
+    }
+
+    /**
+     * Watch the declared pages for attribute changes — the DOM's `notify::` on
+     * `AdwViewStackPage`, which C binds per page (adw-view-switcher.c:184-193).
+     *
+     * A `MutationObserver` rather than an `attributeChangedCallback`: this
+     * element consumes the page elements at connect and `replaceChildren`s them
+     * out of the tree, so a detached page cannot find its owner. It delivers on
+     * a MICROTASK where GTK's notify is synchronous — invisible to a user, and
+     * nothing here reads the toggle back inside the setter.
+     */
+    private _watchPages(): void {
+        this._pageObserver?.disconnect();
+        this._pageObserver = new MutationObserver(() => this.refreshPages());
+        for (const pageEl of this._declared) this._pageObserver.observe(pageEl, { attributes: true });
     }
 
     attributeChangedCallback(name: string) {
@@ -265,8 +327,21 @@ export class AdwInlineViewSwitcher extends HTMLElement {
             toggle.addEventListener('click', () => {
                 this._state.setSelected(model.pageIndex);
             });
-            toggle.addEventListener('dragenter', () => this._state.dragEnter(model.pageIndex));
-            toggle.addEventListener('dragleave', () => this._state.dragLeave(model.pageIndex));
+            // The `relatedTarget` test is load-bearing: a toggle holds an icon,
+            // a label and an indicator, and the DOM fires `dragleave` +
+            // `dragenter` when the pointer crosses BETWEEN them — which cleared
+            // the dwell timer and re-armed a fresh 500ms, so a drag that merely
+            // slid across the toggle never switched the page. C has one
+            // `GtkDropControllerMotion` per BUTTON widget
+            // (adw-view-switcher-button.c:79-96), which has no internal edges.
+            toggle.addEventListener('dragenter', (event) => {
+                if (toggle.contains((event as DragEvent).relatedTarget as Node | null)) return;
+                this._state.dragEnter(model.pageIndex);
+            });
+            toggle.addEventListener('dragleave', (event) => {
+                if (toggle.contains((event as DragEvent).relatedTarget as Node | null)) return;
+                this._state.dragLeave(model.pageIndex);
+            });
 
             this._groupEl.appendChild(toggle);
             return toggle;
@@ -314,8 +389,16 @@ export class AdwInlineViewSwitcher extends HTMLElement {
     }
 
     private _applyStyleClasses(): void {
-        this.classList.toggle('flat', this.hasAttribute('flat'));
-        this.classList.toggle('round', this.hasAttribute('round'));
+        // `css_classes_changed_cb` (adw-inline-view-switcher.c:528-545) forwards
+        // THREE classes onto the toggle group, not two: `flat`, `round` and
+        // `osd`. This element carried the first two and only onto the host, so an
+        // `osd` inline switcher — the one in a floating overlay, where the class
+        // exists to make it legible — styled nothing at all.
+        for (const name of ['flat', 'round', 'osd'] as const) {
+            const present = this.hasAttribute(name);
+            this.classList.toggle(name, present);
+            this._groupEl?.classList.toggle(name, present);
+        }
         // The group carries the display-mode class, mirroring libadwaita's
         // inline-view-switcher > toggle-group.{labels,icons,both} (:826-850).
         for (const mode of INLINE_VIEW_SWITCHER_DISPLAY_MODES) {