@gjsify/adwaita-web 0.30.0 → 0.32.0

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

@@ -0,0 +1,183 @@
+// DOM-level conformance tests for <adw-button-content>, driven by the SAME
+// vectors the NativeScript renderer asserts against
+// (`@gjsify/adwaita-core/conformance`).
+//
+// THE STYLE CLASS IS WHY THIS SUITE EXISTS. `AdwButtonContent` puts
+// `image-text-button` on the button hosting it (adw-button-content.c:115) and
+// removes it on unroot (:126); the stylesheet gives that class
+// `padding-left/right: 9px` where a plain text button has 17px
+// (_buttons.scss:77-80 against :72-75). `grep -rn "image-text-button"` over both
+// renderer trees returned NOTHING, so every icon+label button in this package
+// was drawn with the wrong horizontal padding for its whole life. `use-underline`
+// was absent, and an empty `icon-name` hid the image where the C sets
+// `image-missing` (:355-356).
+import { describe, expect, it } from '@gjsify/unit';
+
+import { BUTTON_CONTENT_STYLE_CLASS, normalizeIconName } from '@gjsify/adwaita-core';
+import {
+    BUTTON_CONTENT_ELLIPSIZE_VECTORS,
+    BUTTON_CONTENT_ICON_VECTORS,
+    BUTTON_CONTENT_LABEL_VECTORS,
+    BUTTON_CONTENT_TEXT_VECTORS,
+} from '@gjsify/adwaita-core/conformance';
+import type { AdwButtonContent } from './elements/adw-button-content.js';
+
+/** Mount a button content inside a plain Adwaita button, the way the stories do. */
+function mount(attributes: Record<string, string> = {}): {
+    el: AdwButtonContent;
+    button: HTMLButtonElement;
+    host: HTMLElement;
+} {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const button = document.createElement('button');
+    button.className = 'adw-button';
+    const el = document.createElement('adw-button-content') as AdwButtonContent;
+    for (const [name, value] of Object.entries(attributes)) el.setAttribute(name, value);
+    button.appendChild(el);
+    host.appendChild(button);
+    return { el, button, host };
+}
+
+const iconEl = (el: AdwButtonContent): HTMLElement => el.querySelector('[aria-hidden="true"]') as HTMLElement;
+const labelEl = (el: AdwButtonContent): HTMLElement => el.querySelector('.adw-button-content-label') as HTMLElement;
+
+export const AdwButtonContentTest = async () => {
+    await describe('adw-button-content parent style class (adw_button_content_root, :115)', async () => {
+        await it('stamps image-text-button on the button hosting it', () => {
+            const { button, host } = mount({ 'icon-name': 'folder-download', label: 'Download' });
+            expect(button.classList.contains(BUTTON_CONTENT_STYLE_CLASS)).toBe(true);
+            host.remove();
+        });
+
+        await it('gives that button the 9px padding the class carries (_buttons.scss:77-80)', () => {
+            const { button, host } = mount({ 'icon-name': 'folder-download', label: 'Download' });
+            const style = getComputedStyle(button);
+            expect(style.paddingLeft).toBe('9px');
+            expect(style.paddingRight).toBe('9px');
+            host.remove();
+        });
+
+        await it('a plain Adwaita button without a content keeps its own padding', () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const button = document.createElement('button');
+            button.className = 'adw-button';
+            button.textContent = 'Download';
+            host.appendChild(button);
+            expect(button.classList.contains(BUTTON_CONTENT_STYLE_CLASS)).toBe(false);
+            expect(getComputedStyle(button).paddingLeft === '9px').toBe(false);
+            host.remove();
+        });
+
+        await it('takes the class off again when the content leaves (:126)', () => {
+            const { el, button, host } = mount({ 'icon-name': 'folder-download', label: 'Download' });
+            el.remove();
+            expect(button.classList.contains(BUTTON_CONTENT_STYLE_CLASS)).toBe(false);
+            host.remove();
+        });
+
+        await it('retargets to the split button when the button sits inside one (:112-113)', () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const split = document.createElement('div');
+            split.className = 'adw-split-button';
+            const action = document.createElement('button');
+            action.className = 'adw-split-button-action';
+            const el = document.createElement('adw-button-content') as AdwButtonContent;
+            el.setAttribute('label', 'Save');
+            action.appendChild(el);
+            split.appendChild(action);
+            host.appendChild(split);
+
+            // The class goes on the `splitbutton` node, which is what
+            // `splitbutton.image-text-button > button` (:499-507) selects —
+            // a different declaration block from the plain-button one.
+            expect(split.classList.contains(BUTTON_CONTENT_STYLE_CLASS)).toBe(true);
+            expect(action.classList.contains(BUTTON_CONTENT_STYLE_CLASS)).toBe(false);
+            // …and the padding lands on the INNER button, which is what that
+            // block declares — not on the node carrying the class.
+            expect(getComputedStyle(action).paddingLeft).toBe('9px');
+            host.remove();
+        });
+
+        await it('styles nothing when there is no button ancestor', () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const el = document.createElement('adw-button-content') as AdwButtonContent;
+            el.setAttribute('label', 'Save');
+            host.appendChild(el);
+            expect(host.classList.contains(BUTTON_CONTENT_STYLE_CLASS)).toBe(false);
+            host.remove();
+        });
+    });
+
+    await describe('adw-button-content icon slot (libadwaita conformance vectors)', async () => {
+        for (const { iconName, resolved, rule } of BUTTON_CONTENT_ICON_VECTORS) {
+            await it(`${JSON.stringify(iconName)} → ${JSON.stringify(resolved)} — ${rule}`, () => {
+                const { el, host } = mount({ 'icon-name': iconName, label: 'Download' });
+                const icon = iconEl(el);
+                // The core resolution (`resolved`) is the NAME; the mask class is
+                // this package's convention on top of it, and the two differ —
+                // the generated classes never carry `-symbolic`. This element used
+                // to interpolate the raw name, so `icon-name="folder-download-symbolic"`
+                // asked for `.adw-icon--folder-download-symbolic`, a class that has
+                // never existed, and drew an empty 16px box. `<adw-icon>` applies
+                // `normalizeIconName`, which also makes the `' '` row assertable
+                // instead of skipped: a space is not one CSS token, so it draws
+                // nothing rather than injecting a second class.
+                const maskName = normalizeIconName(resolved);
+                expect(icon.classList.contains(`adw-icon--${maskName}`)).toBe(maskName !== '');
+                expect([...icon.classList].filter((c) => c.startsWith('adw-icon--')).length).toBe(
+                    maskName === '' ? 0 : 1,
+                );
+                // The image node is never hidden — `gtk_widget_set_visible` is
+                // called on the LABEL only (:300, :398).
+                expect(icon.hidden).toBe(false);
+                host.remove();
+            });
+        }
+
+        await it('an absent icon-name attribute is the empty case, so the image still shows', () => {
+            const { el, host } = mount({ label: 'Download' });
+            expect(iconEl(el).hidden).toBe(false);
+            expect(iconEl(el).classList.contains('adw-icon--image-missing')).toBe(true);
+            host.remove();
+        });
+    });
+
+    await describe('adw-button-content label slot (libadwaita conformance vectors)', async () => {
+        for (const { label, visible, rule } of BUTTON_CONTENT_LABEL_VECTORS) {
+            await it(`${JSON.stringify(label)} → visible ${visible} — ${rule}`, () => {
+                const { el, host } = mount({ 'icon-name': 'folder-download', label });
+                expect(labelEl(el).hidden).toBe(!visible);
+                host.remove();
+            });
+        }
+    });
+
+    await describe('adw-button-content use-underline (libadwaita conformance vectors)', async () => {
+        for (const { label, useUnderline, text, rule } of BUTTON_CONTENT_TEXT_VECTORS) {
+            await it(`${JSON.stringify(label)} + ${useUnderline} → ${JSON.stringify(text)} — ${rule}`, () => {
+                const attributes: Record<string, string> = { 'icon-name': 'folder-download', label };
+                if (useUnderline) attributes['use-underline'] = '';
+                const { el, host } = mount(attributes);
+                expect(labelEl(el).textContent).toBe(text);
+                host.remove();
+            });
+        }
+    });
+
+    await describe('adw-button-content can-shrink (libadwaita conformance vectors)', async () => {
+        for (const { canShrink, ellipsize, rule } of BUTTON_CONTENT_ELLIPSIZE_VECTORS) {
+            await it(`${canShrink} → ${ellipsize} — ${rule}`, () => {
+                const attributes: Record<string, string> = { 'icon-name': 'folder-download', label: 'Download' };
+                if (canShrink) attributes['can-shrink'] = '';
+                const { el, host } = mount(attributes);
+                expect(el.classList.contains('can-shrink')).toBe(canShrink);
+                expect(getComputedStyle(labelEl(el)).textOverflow).toBe(canShrink ? 'ellipsis' : 'clip');
+                host.remove();
+            });
+        }
+    });
+};

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

@@ -43,13 +43,19 @@ export const AdwButtonRowTest = async () => {
             host.remove();
         });
 
-        await it('honours activatable="false"', async () => {
-            const { row, host } = parseRow('<adw-button-row title="Locked" activatable="false"></adw-button-row>');
-            expect(row.classList.contains('activatable')).toBe(false);
-            host.remove();
-        });
+        // DELETED: `honours activatable="false"`. It was green, and what it
+        // pinned was an INVENTION — `Adw.ButtonRow` is always activatable
+        // (`<property name="activatable">True</property>`, adw-button-row.ui:5;
+        // "AdwButtonRow is always activatable.", adw-button-row.c:31), and the
+        // class exposes no property, no setter and no getter for it. The opt-out
+        // also gave one markup two opposite meanings inside one package, because
+        // <adw-action-row> reads `activatable` by PRESENCE — so
+        // `activatable="false"` deactivated a button row and ACTIVATED an action
+        // row. Its replacement is BUTTON_ROW_ACTIVATABLE_VECTORS, driven from
+        // adw-action-rows.spec.ts, which asserts that every spelling of the
+        // attribute leaves the row activatable.
 
-        await it('emits `activated` on click when activatable', async () => {
+        await it('emits `activated` on click', async () => {
             const { row, host } = parseRow('<adw-button-row title="Add account"></adw-button-row>');
             let activated = false;
             row.addEventListener('activated', () => {

package/src/adw-carousel.spec.ts

@@ -0,0 +1,389 @@
+// DOM-level conformance tests for <adw-carousel>, driven by the SAME vectors the
+// NativeScript renderer asserts against (`@gjsify/adwaita-core/conformance`).
+//
+// The two renderers used to carry independent, differently-wrong copies of the
+// carousel's arithmetic, and nothing compared them: this element defaulted
+// `allow-scroll-wheel` to FALSE where libadwaita defaults it TRUE (so a plain
+// <adw-carousel> ignored the wheel while its own header claimed the opposite),
+// resolved a half-way position to the LATER page where every libadwaita lookup
+// takes the earlier one, dropped `<adw-carousel position="2">` on the floor,
+// dropped the horizontal-delta fallback its comment described, and emitted
+// `page-changed` only when the index changed — which made the documented -1
+// unreachable. This suite is that comparison.
+//
+// Scrolls are made instant by overriding the track's `scroll-behavior`; the
+// element sets it as an inline style precisely so it stays overridable.
+import { describe, expect, it } from '@gjsify/unit';
+
+import { CAROUSEL_PAGE_AT_POSITION_VECTORS, CAROUSEL_PAGE_LIST_VECTORS } from '@gjsify/adwaita-core/conformance';
+import type { CarouselPageOp } from '@gjsify/adwaita-core/conformance';
+
+/** The carousel surface this suite drives — the element's own public API. */
+interface CarouselElement extends HTMLElement {
+    readonly nPages: number;
+    readonly position: number;
+    readonly currentPage: number;
+    allowScrollWheel: boolean;
+    allowLongSwipes: boolean;
+    interactive: boolean;
+    scrollToPage(index: number): void;
+    insertPage(page: HTMLElement, position?: number): boolean;
+    appendPage(page: HTMLElement): boolean;
+    removePage(page: HTMLElement): boolean;
+    reorderPage(page: HTMLElement, position: number): boolean;
+    navigate(direction: 'back' | 'forward'): boolean;
+}
+
+/** One page-sized card, tagged so the DOM order can be read back. */
+function card(label: string): HTMLElement {
+    const element = document.createElement('div');
+    element.dataset.label = label;
+    element.textContent = label;
+    element.style.cssText = 'width:100%;height:100%;';
+    return element;
+}
+
+/**
+ * Mount a carousel with the given page labels.
+ *
+ * The host gets an explicit size because the page pitch is MEASURED — a carousel
+ * with no width has no distance, and every scroll would be a no-op.
+ */
+function mount(labels: readonly string[], attributes: Record<string, string> = {}) {
+    const host = document.createElement('div');
+    host.style.cssText = 'width:200px;height:80px;';
+    document.body.appendChild(host);
+
+    const carousel = document.createElement('adw-carousel') as CarouselElement;
+    carousel.style.cssText = 'display:block;width:200px;height:80px;';
+    for (const [name, value] of Object.entries(attributes)) carousel.setAttribute(name, value);
+    for (const label of labels) carousel.appendChild(card(label));
+    host.appendChild(carousel);
+
+    const track = carousel.querySelector('.adw-carousel-track') as HTMLElement;
+    // Instant scrolls: the assertions are about WHERE it lands, never about the
+    // animation getting there. Snapping is off for the same reason — `mandatory`
+    // re-snaps a programmatic `scrollLeft` to the nearest page, which is exactly
+    // the fractional position several of these tests are about.
+    track.style.setProperty('scroll-behavior', 'auto');
+    track.style.setProperty('scroll-snap-type', 'none');
+    return { carousel, host, track };
+}
+
+/** The page labels in DOM order — what the user actually sees, not what the model says. */
+function domOrder(carousel: HTMLElement): string[] {
+    return Array.from(carousel.querySelectorAll('.adw-carousel-page')).map(
+        (slot) => (slot.firstElementChild as HTMLElement | null)?.dataset.label ?? '',
+    );
+}
+
+/** Let the scroll event reach the rAF-throttled handler. */
+function flush(): Promise<void> {
+    return new Promise((resolve) => {
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+    });
+}
+
+/**
+ * The px pitch between two page origins, MEASURED off the DOM — the same
+ * quantity `self->distance` is, read back rather than recomputed.
+ */
+function pitch(carousel: HTMLElement): number {
+    const track = carousel.querySelector('.adw-carousel-track') as HTMLElement;
+    const slot = track.firstElementChild as HTMLElement | null;
+    if (!slot) return 0;
+    const gap = Number.parseFloat(getComputedStyle(track).columnGap);
+    return slot.getBoundingClientRect().width + (Number.isFinite(gap) ? gap : 0);
+}
+
+/** Scroll the track by hand, as a user drag does, and let the element observe it. */
+async function dragTo(carousel: HTMLElement, position: number): Promise<void> {
+    const track = carousel.querySelector('.adw-carousel-track') as HTMLElement;
+    track.scrollLeft = position * pitch(carousel);
+    await flush();
+}
+
+/** Dispatch one wheel notch and report whether the carousel consumed it. */
+function wheel(carousel: HTMLElement, init: WheelEventInit): boolean {
+    const track = carousel.querySelector('.adw-carousel-track') as HTMLElement;
+    const event = new WheelEvent('wheel', { bubbles: true, cancelable: true, ...init });
+    track.dispatchEvent(event);
+    return event.defaultPrevented;
+}
+
+/** Apply one page-list vector op through the element's public methods. */
+function applyPageOp(carousel: CarouselElement, op: CarouselPageOp, pages: Map<string, HTMLElement>): boolean {
+    switch (op.kind) {
+        case 'insert': {
+            const page = card(op.id);
+            pages.set(op.id, page);
+            return carousel.insertPage(page, op.position);
+        }
+        case 'remove': {
+            const page = pages.get(op.id);
+            // A page the carousel never had must be refused, not thrown at.
+            return page ? carousel.removePage(page) : carousel.removePage(card(op.id));
+        }
+        case 'reorder': {
+            const page = pages.get(op.id);
+            return page ? carousel.reorderPage(page, op.position) : false;
+        }
+        case 'scrollTo':
+        case 'setPosition':
+        case 'settle':
+            // Position ops need a settled scroll, so they are driven separately
+            // by the scroll tests below rather than through this replay.
+            return true;
+    }
+}
+
+export const AdwCarouselTest = async () => {
+    await describe('adw-carousel page list (libadwaita conformance vectors)', async () => {
+        // Only the structural rows: the element's page methods are what the DOM
+        // exposes, while position ops need a real scroll and are covered below.
+        const structural = CAROUSEL_PAGE_LIST_VECTORS.filter((vector) =>
+            vector.ops.every((op) => op.kind === 'insert' || op.kind === 'remove' || op.kind === 'reorder'),
+        );
+
+        for (const vector of structural) {
+            await it(vector.rule, () => {
+                const { carousel, host } = mount(vector.pages);
+                const pages = new Map<string, HTMLElement>();
+                Array.from(carousel.querySelectorAll('.adw-carousel-page')).forEach((slot, index) => {
+                    pages.set(vector.pages[index]!, slot.firstElementChild as HTMLElement);
+                });
+
+                const results = vector.ops.map((op) => applyPageOp(carousel, op, pages));
+
+                expect(results).toStrictEqual([...vector.opResults]);
+                expect(carousel.nPages).toBe(vector.expected.nPages);
+                // The DOM order IS the model order — a reorder that only moved
+                // the model would leave the pages painted where they were.
+                expect(domOrder(carousel)).toStrictEqual([...vector.expected.ids]);
+                // And the position compensation reached the scroll container: a
+                // page revealed before the current one must not push it aside.
+                expect(carousel.position).toBe(vector.expected.position);
+                host.remove();
+            });
+        }
+    });
+
+    await describe('adw-carousel page lookup (libadwaita conformance vectors)', async () => {
+        for (const vector of CAROUSEL_PAGE_AT_POSITION_VECTORS) {
+            // Only the rows whose snap points are a settled page list are
+            // reachable through the DOM; the mid-reveal geometry rows need a
+            // reveal ramp this port does not have.
+            const settled = vector.snapPoints.length > 0 && vector.snapPoints.every((point, i) => point === i);
+            if (!settled) continue;
+
+            await it(`${vector.position} → page ${vector.page} — ${vector.rule}`, async () => {
+                // Driven through the `position` property rather than a real
+                // scroll: a scroll offset is quantised to device pixels, so the
+                // ±1e-7 rows around the tie are not expressible as a drag. The
+                // tie ITSELF is, and gets its own drag test below.
+                const { carousel, host } = mount(vector.snapPoints.map((_point, index) => `p${index}`));
+                (carousel as unknown as { position: number }).position = vector.position;
+                await flush();
+                expect(carousel.currentPage).toBe(vector.page);
+                host.remove();
+            });
+        }
+    });
+
+    await describe('adw-carousel scroll wheel (scroll_cb)', async () => {
+        await it('pages on a mouse wheel WITHOUT being asked to — the default is TRUE', async () => {
+            // The regression pin: this element used to require an explicit
+            // `allow-scroll-wheel` attribute, inverting adw-carousel.c:1103-1106.
+            const { carousel, host } = mount(['a', 'b', 'c']);
+            expect(carousel.allowScrollWheel).toBe(true);
+            expect(wheel(carousel, { deltaY: 120 })).toBe(true);
+            await flush();
+            expect(carousel.currentPage).toBe(1);
+            host.remove();
+        });
+
+        await it('honours allow-scroll-wheel="false"', async () => {
+            const { carousel, host } = mount(['a', 'b', 'c'], { 'allow-scroll-wheel': 'false' });
+            expect(carousel.allowScrollWheel).toBe(false);
+            expect(wheel(carousel, { deltaY: 120 })).toBe(false);
+            await flush();
+            expect(carousel.currentPage).toBe(0);
+            host.remove();
+        });
+
+        await it('pages on a horizontal delta — the fallback the port dropped', async () => {
+            // adw-carousel.c:554-559. The old code returned early whenever
+            // |deltaY| <= |deltaX|, so a dx-only event did nothing at all.
+            const { carousel, host } = mount(['a', 'b', 'c']);
+            expect(wheel(carousel, { deltaX: 120 })).toBe(true);
+            await flush();
+            expect(carousel.currentPage).toBe(1);
+            host.remove();
+        });
+
+        await it('locks out a second notch for 150 ms', async () => {
+            // adw-carousel.c:22, :526. The old accumulator had no time component
+            // at all, so a fast wheel paged as many times as it had deltas.
+            const { carousel, host } = mount(['a', 'b', 'c']);
+            expect(wheel(carousel, { deltaY: 120 })).toBe(true);
+            expect(wheel(carousel, { deltaY: 120 })).toBe(false);
+            await flush();
+            expect(carousel.currentPage).toBe(1);
+            host.remove();
+        });
+
+        await it('leaves a touchpad gesture to the native scroll-snap', async () => {
+            // A touchpad is ignored outright (:537-538) because its own kinetic
+            // scroll already drives the strip — here, the track's scroll-snap.
+            const { carousel, host } = mount(['a', 'b', 'c']);
+            expect(wheel(carousel, { deltaX: 12, deltaY: 7 })).toBe(false);
+            await flush();
+            expect(carousel.currentPage).toBe(0);
+            host.remove();
+        });
+
+        await it('does not consume a wheel event it did not act on', async () => {
+            // GDK_EVENT_STOP only when it paged (:561-562 vs :576). The old code
+            // called preventDefault BEFORE its threshold test.
+            const { carousel, host } = mount(['a', 'b', 'c'], { interactive: 'false' });
+            expect(wheel(carousel, { deltaY: 120 })).toBe(false);
+            host.remove();
+        });
+    });
+
+    await describe('adw-carousel page-changed (scroll_animation_done_cb)', async () => {
+        await it('reports every completed scroll, including back onto the same page', async () => {
+            // The old emission was gated on the ROUNDED index changing, so a
+            // settle back onto the page it started from said nothing.
+            const { carousel, host } = mount(['a', 'b', 'c']);
+            const seen: number[] = [];
+            carousel.addEventListener('page-changed', (event) => {
+                seen.push((event as CustomEvent<{ index: number }>).detail.index);
+            });
+
+            await dragTo(carousel, 1);
+            await dragTo(carousel, 1.4);
+            await dragTo(carousel, 1);
+            expect(seen).toStrictEqual([1, 1]);
+            host.remove();
+        });
+
+        await it('reports the LOWER page for a half-way settle', async () => {
+            const { carousel, host } = mount(['a', 'b']);
+            await dragTo(carousel, 0.5);
+            // Math.round would have said page 1 here; every libadwaita lookup
+            // resolves the tie downwards (adw-carousel.c:198-201).
+            expect(carousel.currentPage).toBe(0);
+            host.remove();
+        });
+    });
+
+    await describe('adw-carousel declarative position', async () => {
+        await it('honours <adw-carousel position="2"> at upgrade time', async () => {
+            // Attribute changes are delivered BEFORE connectedCallback, and the
+            // old guard dropped them, so a declared position never applied.
+            const { carousel, host } = mount(['a', 'b', 'c'], { position: '2' });
+            await flush();
+            expect(carousel.currentPage).toBe(2);
+            host.remove();
+        });
+
+        await it('parses the attribute and the property the same way', async () => {
+            // "1.7" used to mean page 1 through the attribute (parseInt) and page
+            // 2 through the property (Math.round). Both now resolve it through
+            // get_page_at_position, which answers 2.
+            const { carousel, host } = mount(['a', 'b', 'c']);
+            carousel.setAttribute('position', '1.7');
+            await flush();
+            expect(carousel.currentPage).toBe(2);
+
+            (carousel as unknown as { position: number }).position = 0.4;
+            await flush();
+            expect(carousel.currentPage).toBe(0);
+            host.remove();
+        });
+
+        await it('refuses an out-of-range scrollToPage instead of clamping', async () => {
+            const { carousel, host } = mount(['a', 'b', 'c']);
+            carousel.scrollToPage(1);
+            await flush();
+            carousel.scrollToPage(99);
+            carousel.scrollToPage(Number.NaN);
+            await flush();
+            expect(carousel.currentPage).toBe(1);
+            host.remove();
+        });
+    });
+
+    await describe('adw-carousel indicators', async () => {
+        await it('marks exactly one dot at a half-way position', async () => {
+            // With two pages at position 0.5 both dots scored exactly 0.5, and
+            // the old `progress > 0.5` test marked NEITHER — every dot reported
+            // aria-current="false".
+            const { carousel, host } = mount(['a', 'b']);
+            carousel.id = 'carousel-indicator-halfway';
+            const dots = document.createElement('adw-carousel-indicator-dots');
+            dots.setAttribute('for', carousel.id);
+            host.appendChild(dots);
+
+            await dragTo(carousel, 0.5);
+            const current = Array.from(dots.children).map((dot) => dot.getAttribute('aria-current'));
+            expect(current).toStrictEqual(['true', 'false']);
+            host.remove();
+        });
+
+        await it('follows the carousel when a page is added later', async () => {
+            const { carousel, host } = mount(['a', 'b']);
+            carousel.id = 'carousel-indicator-grow';
+            const dots = document.createElement('adw-carousel-indicator-dots');
+            dots.setAttribute('for', carousel.id);
+            host.appendChild(dots);
+            expect(dots.childElementCount).toBe(2);
+
+            carousel.appendPage(card('c'));
+            expect(dots.childElementCount).toBe(3);
+            host.remove();
+        });
+    });
+
+    await describe('adw-carousel properties', async () => {
+        await it('defaults interactive TRUE and gates navigation on it', async () => {
+            const { carousel, host } = mount(['a', 'b', 'c']);
+            expect(carousel.interactive).toBe(true);
+            expect(carousel.navigate('back')).toBe(false); // already at the first page
+            expect(carousel.navigate('forward')).toBe(true);
+
+            carousel.interactive = false;
+            expect(carousel.navigate('forward')).toBe(false);
+            host.remove();
+        });
+
+        await it('turns allow-long-swipes into scroll-snap-stop', async () => {
+            // The property used to be inert: both branches of its ternary were
+            // `current + step`. FALSE means "each swipe can only move to the
+            // adjacent pages" (adw-carousel.c:1111-1113), which is what
+            // scroll-snap-stop: always enforces.
+            const { carousel, host } = mount(['a', 'b', 'c']);
+            const slot = carousel.querySelector('.adw-carousel-page') as HTMLElement;
+            expect(carousel.allowLongSwipes).toBe(false);
+            expect(slot.style.getPropertyValue('scroll-snap-stop')).toBe('always');
+
+            carousel.allowLongSwipes = true;
+            expect(slot.style.getPropertyValue('scroll-snap-stop')).toBe('normal');
+            host.remove();
+        });
+
+        await it('spaces the pages by the spacing property', async () => {
+            // `distance = size + spacing` (adw-carousel.c:767); with no gap in the
+            // track the property would have nowhere to show up.
+            const { carousel, host, track } = mount(['a', 'b', 'c'], { spacing: '16' });
+            expect(track.style.columnGap).toBe('16px');
+            // The pitch a drag is measured in must include the gap; if it did not,
+            // page 1 would sit 16px short of where the carousel thinks it is.
+            expect(pitch(carousel)).toBe(track.getBoundingClientRect().width + 16);
+            await dragTo(carousel, 1);
+            expect(carousel.currentPage).toBe(1);
+            host.remove();
+        });
+    });
+};