@gjsify/adwaita-web 0.30.0 → 0.32.0

package/scss/_view_switcher.scss

@@ -47,6 +47,15 @@ adw-view-switcher {
         user-select: none;
         -webkit-user-select: none;
 
+        // A page with neither title nor icon has NO button at all
+        // (adw-view-switcher.c:178), spelled here as the `hidden` attribute.
+        // Re-assert it as an AUTHOR rule: the UA `[hidden] { display: none }`
+        // loses to this block's own author `display: inline-flex` (cascade ORIGIN
+        // beats specificity), so without this a hidden button stays on screen.
+        &[hidden] {
+            display: none;
+        }
+
         .adw-icon {
             width: 16px;
             height: 16px;
@@ -59,6 +68,37 @@ adw-view-switcher {
             text-overflow: ellipsis;
         }
 
+        // AdwIndicatorBin's badge — the unread count, or a bare dot when only
+        // `needs-attention` is set.
+        // Reference: refs/libadwaita/src/adw-indicator-bin.c
+        .adw-view-switcher-indicator {
+            display: inline-flex;
+            box-sizing: border-box;
+            align-items: center;
+            justify-content: center;
+            min-width: 16px;
+            height: 16px;
+            padding: 0 4px;
+            border-radius: 8px;
+            background-color: var(--accent-bg-color);
+            color: var(--accent-fg-color);
+            font-size: 0.625rem;
+            font-weight: 700;
+            line-height: 1;
+
+            &[hidden] {
+                display: none;
+            }
+
+            &.needs-attention {
+                min-width: 6px;
+                width: 6px;
+                height: 6px;
+                padding: 0;
+                border-radius: 3px;
+            }
+        }
+
         &:hover {
             background-color: var(--button-hover-color);
         }

package/scss/_view_switcher_bar.scss

@@ -64,6 +64,14 @@ adw-view-switcher-bar {
         user-select: none;
         -webkit-user-select: none;
 
+        // Same cascade trap as the bar itself: a page with neither title nor
+        // icon has no button (adw-view-switcher.c:178), and the UA
+        // `[hidden] { display: none }` loses to this block's author
+        // `display: inline-flex` unless it is re-asserted here.
+        &[hidden] {
+            display: none;
+        }
+
         .adw-view-switcher-bar-icon {
             width: 16px;
             height: 16px;
@@ -78,6 +86,35 @@ adw-view-switcher-bar {
             text-overflow: ellipsis;
         }
 
+        // AdwIndicatorBin's badge — see refs/libadwaita/src/adw-indicator-bin.c.
+        .adw-view-switcher-bar-indicator {
+            display: inline-flex;
+            box-sizing: border-box;
+            align-items: center;
+            justify-content: center;
+            min-width: 16px;
+            height: 16px;
+            padding: 0 4px;
+            border-radius: 8px;
+            background-color: var(--accent-bg-color);
+            color: var(--accent-fg-color);
+            font-size: 0.625rem;
+            font-weight: 700;
+            line-height: 1;
+
+            &[hidden] {
+                display: none;
+            }
+
+            &.needs-attention {
+                min-width: 6px;
+                width: 6px;
+                height: 6px;
+                padding: 0;
+                border-radius: 3px;
+            }
+        }
+
         &:hover {
             background-color: var(--button-hover-color);
         }

package/scss/_wrap_box.scss

@@ -5,16 +5,66 @@
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Adapted for @gjsify/adwaita-web Web Components.
 
-// Layout (flex-direction, gaps, justify-content, align-items, align-content) is
-// driven imperatively by the component from its attributes — these are the
-// libadwaita defaults (horizontal, packed to the start of each line, lines
-// wrapping downwards from the top). A wrap box is a pure layout container, so it
-// carries no background of its own; children handle their own theming.
+// Direction, gaps, `justify-content` and `align-content` are driven imperatively
+// by the component from its attributes — these are the libadwaita defaults
+// (horizontal, packed to the start of each line, lines wrapping downwards from
+// the top). A wrap box is a pure layout container, so it carries no background
+// of its own; children handle their own theming.
 adw-wrap-box {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
-  align-items: flex-start;
+  // Each child is allocated the FULL cross extent of its line — `h = line_size`
+  // in adw-wrap-layout.c:746-751 — which is `stretch`, the flexbox default. The
+  // port used to write `flex-start` here and drive it from `align`, which is a
+  // MAIN-axis property in libadwaita and belongs on `justify-content`.
+  align-items: stretch;
   align-content: flex-start;
 }
+
+// FILL grows the children and keeps the spacing constant
+// (adw-wrap-layout.c:317-319, :326-341); SPREAD deliberately does NOT, so the
+// gaps take the leftover instead. `data-line-justify` is the mode the component
+// resolved for a COMPLETE line.
+//
+// A lone child is excluded because it is not on a complete line: a box with one
+// element child has exactly one line, and that line is the final one — see
+// below.
+adw-wrap-box[data-line-justify='fill'] > *:not(:only-child) {
+  flex-grow: 1;
+}
+
+// `:only-child` is the one line-membership fact CSS knows without a layout pass,
+// and libadwaita treats that line as the LAST one. Both justified modes stretch
+// it: FILL by definition, SPREAD because its "keep the children at their minimum
+// size" branch is guarded by `n_children > 1` (adw-wrap-layout.c:338), so a lone
+// child is stretched regardless (adw-wrap-box.c:349-352).
+adw-wrap-box[data-last-line-justify='fill'] > :only-child,
+adw-wrap-box[data-last-line-justify='spread'] > :only-child {
+  flex-grow: 1;
+}
+
+// The final line, when it is NOT justified (`justify-last-line` unset — the C
+// default, adw-wrap-box.c:379-381): a generated flex item absorbs that line's
+// leftover space, so it packs at the start of the main axis the way an
+// un-justified line does, while `justify-content: space-between` keeps spreading
+// the complete lines above it. `::after` is the only per-line hook flexbox
+// offers, and it lands on the final line by construction.
+//
+// The negative main-axis margin cancels exactly the one gap the filler would
+// otherwise add, so an exactly-full line can never be pushed into a new one.
+adw-wrap-box[data-line-justify='spread'][data-last-line-justify='none']::after {
+  content: '';
+  flex: 1 0 0;
+  min-width: 0;
+  min-height: 0;
+  margin-left: calc(-1 * var(--adw-wrap-box-child-spacing, 0px));
+}
+
+// A vertical box packs along the block axis, so the gap to cancel is the one
+// before the filler in that direction.
+adw-wrap-box[orientation='vertical'][data-line-justify='spread'][data-last-line-justify='none']::after {
+  margin-left: 0;
+  margin-top: calc(-1 * var(--adw-wrap-box-child-spacing, 0px));
+}

package/scss/adwaita-skin.scss

@@ -13,16 +13,39 @@
 // Style-isolation boundary — emitted before the components so their own rules
 // override this typographic/box-model floor (see _reset.scss).
 @use 'reset';
+// The ONE symbolic-icon box, behind <adw-icon>. Emitted before every widget that
+// draws one, so a context that sizes its own icons (the about dialog's 96px, the
+// split button's 14px arrows, the view switcher's 16px) still wins on ordinary
+// specificity.
+@use 'icon';
+// libadwaita's typography + semantic-colour UTILITY CLASSES (`.dimmed`,
+// `.numeric`, `.monospace`, `.title-1`…). Classes only — there is deliberately
+// no <adw-label>, see _labels.scss. Emitted BEFORE every widget so a widget's
+// own rule wins on ordinary specificity, and because two partials @extend from
+// it (`_progress_bar.scss`'s text node, `_data_grid.scss`'s cells) exactly as
+// libadwaita's own `_progress-bar.scss` does.
+@use 'labels';
 @use 'window';
 @use 'headerbar';
 @use 'window_title';
 @use 'button';
 @use 'button_content';
+// The ONE popover surface. Emitted BEFORE the widgets that host one, so a
+// consumer's (or a widget's) own higher-specificity rule still wins over it.
+@use 'popover';
 @use 'split_button';
 @use 'menu_button';
 @use 'drop_down';
 @use 'toggle_group';
+// The ONE toggle, behind <adw-switch>. Emitted before `switch_row` and
+// `expander_row`, the two widgets that host one — and which each carried their
+// own copy of it until it was lifted out of `adw-switch-row {}`.
+@use 'switch';
 @use 'entry';
+// The two form-control primitives, in ONE partial because upstream merges them
+// (there is no `_radio.scss` in libadwaita) — see _checks.scss.
+@use 'checks';
+@use 'progress_bar';
 @use 'preferences';
 @use 'card';
 @use 'data_grid';

package/src/adw-about-dialog.spec.ts

@@ -0,0 +1,350 @@
+// DOM-level conformance tests for <adw-about-dialog>, driven by the vectors in
+// `@gjsify/adwaita-core/conformance` — the same table the core suite asserts.
+//
+// This element carried its own copy of `parse_person`, its own page-visibility
+// rules and its own set of invented fallbacks, and diverged from libadwaita on
+// thirteen counts. Two of them were not subtle: Support Questions and Report an
+// Issue were rendered on the DETAILS page, one navigation step deeper than GTK
+// puts them (adw-about-dialog.ui:146-186), and `website` was treated as Details
+// content, which is exactly the one input libadwaita leaves OUT of that
+// predicate (:1108). Nothing compared the two, so nothing failed.
+import { describe, expect, it } from '@gjsify/unit';
+
+import { ADW_ABOUT_DIALOG_LABELS, stripMnemonic } from '@gjsify/adwaita-core';
+import {
+    ABOUT_DIALOG_CREDITS_LEGAL_VECTORS,
+    ABOUT_DIALOG_DETAILS_VECTORS,
+    ABOUT_DIALOG_HEADER_VECTORS,
+    ABOUT_DIALOG_SUPPORT_VECTORS,
+    CREDITS_SECTIONS_VECTORS,
+    CREDIT_PERSON_VECTORS,
+} from '@gjsify/adwaita-core/conformance';
+
+/** The label a renderer without an accelerator layer paints for a row. */
+const label = (key: keyof typeof ADW_ABOUT_DIALOG_LABELS) => stripMnemonic(ADW_ABOUT_DIALOG_LABELS[key]);
+
+interface Mounted {
+    dialog: HTMLElement & { developers: string[]; designers: string[]; artists: string[]; documenters: string[] };
+    host: HTMLElement;
+    /** Every `window.open` the dialog performed, most recent last. */
+    opened: string[];
+    /** Restore the stubbed `window.open`. */
+    dispose: () => void;
+}
+
+/**
+ * Mount a dialog and set every attribute imperatively — several vectors hinge on
+ * exact whitespace, which a value parsed out of markup is not a reliable
+ * carrier for. `window.open` is stubbed because the link rows really do call it.
+ */
+function mount(attributes: Record<string, string> = {}): Mounted {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const dialog = document.createElement('adw-about-dialog') as Mounted['dialog'];
+    host.appendChild(dialog);
+    for (const [name, value] of Object.entries(attributes)) dialog.setAttribute(name, value);
+
+    const opened: string[] = [];
+    const original = window.open;
+    (window as unknown as { open: unknown }).open = (url?: string | URL) => {
+        opened.push(String(url ?? ''));
+        return null;
+    };
+
+    return {
+        dialog,
+        host,
+        opened,
+        dispose: () => {
+            (window as unknown as { open: unknown }).open = original;
+            host.remove();
+        },
+    };
+}
+
+/** The navigation page with `tag`, or `null` when the dialog did not build it. */
+function page(dialog: HTMLElement, tag: string): HTMLElement | null {
+    return dialog.querySelector(`adw-navigation-page[tag="${tag}"]`);
+}
+
+/** The preferences group the template calls `id`, on whichever page it lives. */
+function group(dialog: HTMLElement, id: string): HTMLElement | null {
+    return dialog.querySelector(`adw-preferences-group[data-group="${id}"]`);
+}
+
+/** Whether a row with `title` exists inside `scope`. */
+function hasRow(scope: Element | null, title: string): boolean {
+    if (!scope) return false;
+    return scope.querySelector(`adw-action-row[title="${title}"]`) !== null;
+}
+
+/** The row titles inside `scope`, in document order. */
+function rowTitles(scope: Element | null): string[] {
+    if (!scope) return [];
+    return [...scope.querySelectorAll('adw-action-row')].map((row) => row.getAttribute('title') ?? '');
+}
+
+/**
+ * Activate a row and report the URI it asked for.
+ *
+ * The URI never reaches the DOM — it is captured in the row's activation
+ * handler — so the only way to observe it is to drive the row and listen.
+ */
+function activateRow(dialog: HTMLElement, row: Element): string | null {
+    let uri: string | null = null;
+    const listener = (event: Event) => {
+        uri = (event as CustomEvent<{ uri: string }>).detail.uri;
+    };
+    dialog.addEventListener('activate-link', listener);
+    row.dispatchEvent(new CustomEvent('activated', { bubbles: true }));
+    dialog.removeEventListener('activate-link', listener);
+    return uri;
+}
+
+export const AdwAboutDialogTest = async () => {
+    await describe('adw-about-dialog credit parsing (parse_person vectors)', async () => {
+        for (const { input, name, uri, rule } of CREDIT_PERSON_VECTORS) {
+            await it(`${JSON.stringify(input)} — ${rule}`, () => {
+                const mounted = mount({ 'application-name': 'Builder' });
+                mounted.dialog.developers = [input];
+
+                const credits = page(mounted.dialog, 'credits');
+                const rows = credits ? [...credits.querySelectorAll('adw-action-row')] : [];
+                expect(rows).toHaveLength(1);
+
+                const row = rows[0]!;
+                expect(row.getAttribute('title')).toBe(name);
+                expect(activateRow(mounted.dialog, row)).toBe(uri);
+
+                mounted.dispose();
+            });
+        }
+
+        await it('makes a row with an empty link a LINK row, not a plain one', () => {
+            // `if (link)` is a pointer test in the C, so `"Ada <>"` still links,
+            // to the URI `mailto:` — collapsing "" to null loses the row type.
+            const mounted = mount();
+            mounted.dialog.developers = ['Ada <>'];
+            const row = page(mounted.dialog, 'credits')!.querySelector('adw-action-row')!;
+            expect(row.hasAttribute('activatable')).toBe(true);
+            expect(activateRow(mounted.dialog, row)).toBe('mailto:');
+            mounted.dispose();
+        });
+    });
+
+    await describe('adw-about-dialog credits page (update_credits vectors)', async () => {
+        for (const { input, sections, rule } of CREDITS_SECTIONS_VECTORS) {
+            // `add_credit_section` has no counterpart on this element yet, so the
+            // rows exercising it are asserted by the core suite alone.
+            if (input.creditSections) continue;
+            // Same for `translator-credits`: no property, so no "Translated by".
+            if (input.translatorCredits !== undefined) continue;
+
+            await it(rule, () => {
+                const mounted = mount();
+                mounted.dialog.developers = [...(input.developers ?? [])];
+                mounted.dialog.designers = [...(input.designers ?? [])];
+                mounted.dialog.artists = [...(input.artists ?? [])];
+                mounted.dialog.documenters = [...(input.documenters ?? [])];
+
+                const credits = page(mounted.dialog, 'credits');
+                const groups = credits ? [...credits.querySelectorAll('adw-preferences-group')] : [];
+                expect(groups.map((node) => node.getAttribute('title'))).toStrictEqual(
+                    sections.map((section) => section.title),
+                );
+                for (const [index, section] of sections.entries()) {
+                    expect(rowTitles(groups[index]!)).toStrictEqual(section.people.map((person) => person.name));
+                }
+
+                mounted.dispose();
+            });
+        }
+    });
+
+    await describe('adw-about-dialog main page (update_details vectors)', async () => {
+        // `add_link` has no counterpart on this element, so `has_custom_links`
+        // is always FALSE here; those rows are asserted by the core suite.
+        for (const vector of ABOUT_DIALOG_DETAILS_VECTORS.filter((row) => !row.customLinks && !row.releaseNotes)) {
+            const { website, comments, visible, rule } = vector;
+            await it(`website=${website} comments=${comments} — ${rule}`, () => {
+                const mounted = mount({
+                    'application-name': 'Builder',
+                    ...(website ? { website: 'https://example.org' } : {}),
+                    ...(comments ? { comments: 'A description.' } : {}),
+                });
+
+                const main = page(mounted.dialog, 'main');
+                const details = page(mounted.dialog, 'details');
+
+                expect({
+                    detailsGroup: group(mounted.dialog, 'details') !== null,
+                    detailsRow: hasRow(main, label('detailsRow')),
+                    websiteRow: hasRow(main, label('websiteRow')),
+                    commentsLabel: details?.querySelector('.adw-about-dialog-comments') != null,
+                    linksGroup: group(mounted.dialog, 'links') !== null,
+                    detailsWebsiteRow: hasRow(details, label('websiteRow')),
+                }).toStrictEqual({
+                    detailsGroup: visible.detailsGroup,
+                    detailsRow: visible.detailsRow,
+                    websiteRow: visible.websiteRow,
+                    commentsLabel: visible.commentsLabel,
+                    linksGroup: visible.linksGroup,
+                    detailsWebsiteRow: visible.detailsWebsiteRow,
+                });
+
+                mounted.dispose();
+            });
+        }
+
+        await it('keeps a website-only dialog on the main page with no Details row', () => {
+            // `show_details` is `has_comments || has_custom_links` (:1108) —
+            // website is deliberately not in it, so a dialog whose only extra is
+            // a website links straight from the main page.
+            const mounted = mount({ 'application-name': 'Builder', website: 'https://example.org' });
+            expect(page(mounted.dialog, 'details')).toBe(null);
+            expect(hasRow(page(mounted.dialog, 'main'), label('websiteRow'))).toBe(true);
+            mounted.dispose();
+        });
+    });
+
+    await describe('adw-about-dialog main page (update_support vectors)', async () => {
+        // debug-info has no counterpart on this element (there is no
+        // Troubleshooting page), so those rows are asserted by the core suite.
+        for (const vector of ABOUT_DIALOG_SUPPORT_VECTORS.filter((row) => !row.debugInfo)) {
+            const { supportUrl, issueUrl, visible, rule } = vector;
+            await it(`support=${supportUrl} issue=${issueUrl} — ${rule}`, () => {
+                const mounted = mount({
+                    'application-name': 'Builder',
+                    ...(supportUrl ? { 'support-url': 'https://example.org/help' } : {}),
+                    ...(issueUrl ? { 'issue-url': 'https://example.org/issues' } : {}),
+                });
+
+                const main = page(mounted.dialog, 'main');
+                expect({
+                    supportGroup: group(mounted.dialog, 'support') !== null,
+                    supportRow: hasRow(main, label('supportRow')),
+                    issueRow: hasRow(main, label('issueRow')),
+                }).toStrictEqual({
+                    supportGroup: visible.supportGroup,
+                    supportRow: visible.supportRow,
+                    issueRow: visible.issueRow,
+                });
+
+                mounted.dispose();
+            });
+        }
+
+        await it('puts the support and issue rows on the MAIN page, not on Details', () => {
+            // adw-about-dialog.ui:146-186 — `support_group` is a child of the
+            // main page, and the class docs say so outright (:87-90).
+            const mounted = mount({
+                'application-name': 'Builder',
+                'support-url': 'https://example.org/help',
+                'issue-url': 'https://example.org/issues',
+            });
+            expect(rowTitles(page(mounted.dialog, 'main'))).toContain(label('supportRow'));
+            expect(rowTitles(page(mounted.dialog, 'main'))).toContain(label('issueRow'));
+            // With neither comments nor custom links there is no Details page.
+            expect(page(mounted.dialog, 'details')).toBe(null);
+            mounted.dispose();
+        });
+    });
+
+    await describe('adw-about-dialog main page (credits/legal vectors)', async () => {
+        // No acknowledgements API on this element; the core suite covers it.
+        for (const vector of ABOUT_DIALOG_CREDITS_LEGAL_VECTORS.filter((row) => !row.hasAcknowledgements)) {
+            const { hasCredits, hasLegal, visible, rule } = vector;
+            await it(`credits=${hasCredits} legal=${hasLegal} — ${rule}`, () => {
+                const mounted = mount({
+                    'application-name': 'Builder',
+                    ...(hasLegal ? { copyright: '© 2026 Ada' } : {}),
+                });
+                if (hasCredits) mounted.dialog.developers = ['Ada'];
+
+                const main = page(mounted.dialog, 'main');
+                expect({
+                    creditsLegalGroup: group(mounted.dialog, 'credits-legal') !== null,
+                    creditsRow: hasRow(main, label('creditsRow')),
+                    legalRow: hasRow(main, label('legalRow')),
+                }).toStrictEqual({
+                    creditsLegalGroup: visible.creditsLegalGroup,
+                    creditsRow: visible.creditsRow,
+                    legalRow: visible.legalRow,
+                });
+
+                mounted.dispose();
+            });
+        }
+    });
+
+    await describe('adw-about-dialog header fields (no invented fallbacks)', async () => {
+        for (const { property, value, visible, rule } of ABOUT_DIALOG_HEADER_VECTORS) {
+            if (property === 'application-icon' || property === 'application-name') {
+                await it(`${property}=${JSON.stringify(value)} — ${rule}`, () => {
+                    const mounted = mount(value.length > 0 ? { [property]: value } : {});
+                    const main = page(mounted.dialog, 'main')!;
+                    const node =
+                        property === 'application-icon'
+                            ? main.querySelector('.adw-about-dialog-icon')
+                            : main.querySelector('.adw-about-dialog-name');
+                    expect(node !== null).toBe(visible);
+                    mounted.dispose();
+                });
+                continue;
+            }
+
+            await it(`${property}=${JSON.stringify(value)} — ${rule}`, () => {
+                const mounted = mount(value.length > 0 ? { [property]: value } : {});
+                const main = page(mounted.dialog, 'main')!;
+                const selector =
+                    property === 'developer-name' ? '.adw-about-dialog-developer' : '.adw-about-dialog-version';
+                expect(main.querySelector(selector) !== null).toBe(visible);
+                mounted.dispose();
+            });
+        }
+
+        await it('titles the dialog "About", not "About <app name>"', () => {
+            // The main page's title is bound to AdwDialog:title, whose template
+            // default is the bare word (.ui:6, :19); the application name lives
+            // in the header revealer instead (.ui:29-31).
+            const mounted = mount({ 'application-name': 'Builder' });
+            expect(page(mounted.dialog, 'main')!.getAttribute('title')).toBe('About');
+            mounted.dispose();
+        });
+    });
+
+    await describe('adw-about-dialog activate-link is cancellable', async () => {
+        await it('opens the URI when nothing handled the signal', () => {
+            const mounted = mount({ 'application-name': 'Builder', website: 'https://example.org' });
+            const row = page(mounted.dialog, 'main')!.querySelector(`adw-action-row[title="${label('websiteRow')}"]`)!;
+            row.dispatchEvent(new CustomEvent('activated', { bubbles: true }));
+            expect(mounted.opened).toStrictEqual(['https://example.org']);
+            mounted.dispose();
+        });
+
+        await it('does NOT open when a handler cancels it', () => {
+            // `activate_link_cb` returns the accumulated handler result
+            // (:429-437, accumulator `g_signal_accumulator_true_handled`
+            // :2098): a handler saying "handled" suppresses the default
+            // navigation. `preventDefault()` is the web spelling of that, and it
+            // was unavailable — the event was not cancelable and `window.open`
+            // ran regardless.
+            const mounted = mount({ 'application-name': 'Builder', website: 'https://example.org' });
+            mounted.dialog.addEventListener('activate-link', (event) => event.preventDefault());
+            const row = page(mounted.dialog, 'main')!.querySelector(`adw-action-row[title="${label('websiteRow')}"]`)!;
+            row.dispatchEvent(new CustomEvent('activated', { bubbles: true }));
+            expect(mounted.opened).toStrictEqual([]);
+            mounted.dispose();
+        });
+
+        await it('is cancelable on a credit row too', () => {
+            const mounted = mount();
+            mounted.dialog.developers = ['Ada <ada@lovelace.org>'];
+            mounted.dialog.addEventListener('activate-link', (event) => event.preventDefault());
+            const row = page(mounted.dialog, 'credits')!.querySelector('adw-action-row')!;
+            row.dispatchEvent(new CustomEvent('activated', { bubbles: true }));
+            expect(mounted.opened).toStrictEqual([]);
+            mounted.dispose();
+        });
+    });
+};