@gjsify/adwaita-web 0.61.0 → 0.63.0

package/README.md

@@ -130,6 +130,37 @@ auto-dismiss runs on the browser's timers by default; assign
 defines) to drive toast lifetimes from your own clock — that is how the
 package's own regression tests advance time without real timers.
 
+## Pango markup (`use-markup`)
+
+`<adw-banner>`'s `title`, `<adw-alert-dialog>`'s `heading` and `body` and
+`<gtk-label>` / `<gtk-inscription>`'s `markup` read Pango markup — GTK's eleven
+tags (`b`, `i`, `u`, `s`, `tt`, `big`, `small`, `sub`, `sup`, `span`,
+`markup`), `<span>` attributes, and `&amp;`/`&lt;`/`&gt;`/`&quot;`/`&apos;`
+plus numeric character references.
+
+Pango markup is **not** HTML, and nothing here is handed to `innerHTML`:
+`renderPangoMarkup` (in `src/pango-markup.ts`) builds elements and text nodes
+from the tree `parsePangoMarkup` (`@gjsify/adwaita-core`) returns. The banner
+and the alert dialog therefore DRAW the runs:
+
+```html
+<adw-banner title="<b>Metered</b> connection" use-markup revealed></adw-banner>
+```
+
+Anything pango cannot parse comes back as **text**, exactly as
+`gtk_label_set_markup` keeps an unparseable string: a bare `&`, a `<` in prose,
+a mismatched tag — and, importantly, every tag outside pango's set. An
+`<img src=x onerror=…>` in a banner title is shown, not run; there is no code
+path that creates an element for a name the parser did not recognise, and a
+`<span>` attribute becomes a CSS declaration (or is dropped), never a DOM
+attribute.
+
+Without `use-markup` every one of these strings is literal text — that is
+`Adw.Banner:use-markup`'s deliberate departure from the libadwaita default of
+`TRUE`, documented in `src/elements/adw-banner.ts`.
+`scripts/check-adwaita-no-markup-sinks.mjs` holds the no-`innerHTML` rule for
+the package's shipping sources.
+
 ## Theming a page without `<adw-window>`
 
 The components read their colours from the `--window-*` CSS custom properties,

package/lib/types/canvas2d/canvas2d-bridge.d.ts

@@ -0,0 +1,55 @@
+type ReadyCallback = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) => void;
+type ResizeCallback = (width: number, height: number) => void;
+type SignalHandler = (emitter: Canvas2DBridgeElement, ...args: unknown[]) => unknown;
+export declare class Canvas2DBridgeElement extends HTMLElement {
+    static readonly GTypeName = "GjsifyCanvas2DBridge";
+    /** The signals `connect()` accepts, as `Gtk.Widget` names them. */
+    static readonly signals: Record<string, string>;
+    private _canvas;
+    private _ctx;
+    private _readyCallbacks;
+    private _resizeCallbacks;
+    private _handlers;
+    private _nextHandler;
+    private _observer;
+    private _width;
+    private _height;
+    private _drawFrame;
+    static get observedAttributes(): string[];
+    /** `Gtk.DrawingArea:content-width`, the minimum and natural width. Defaults to 0. */
+    get contentWidth(): number;
+    set contentWidth(v: number);
+    /** `Gtk.DrawingArea:content-height`, the minimum and natural height. Defaults to 0. */
+    get contentHeight(): number;
+    set contentHeight(v: number);
+    get content_width(): number;
+    set content_width(v: number);
+    get content_height(): number;
+    set content_height(v: number);
+    private _write;
+    /** The `<canvas>` backing this widget. Available after the first allocation. */
+    get canvas(): HTMLCanvasElement | null;
+    /** The browser's own 2D context; available after the first allocation. */
+    getContext(_id: '2d'): CanvasRenderingContext2D | null;
+    /** Runs `cb` once the 2D context is ready, synchronously if it already is. */
+    onReady(cb: ReadyCallback): void;
+    /** Runs `cb` on every allocation change, with the canvas dimensions already updated. */
+    onResize(cb: ResizeCallback): void;
+    /** The browser's own, here only so the call reads the same on every target. */
+    requestAnimationFrame(cb: FrameRequestCallback): number;
+    /** A no-op: the browser already has `requestAnimationFrame` and `performance`. */
+    installGlobals(): void;
+    /** `gtk_widget_queue_draw`: nothing to blit here, the canvas IS the screen. */
+    queue_draw(): void;
+    queueDraw(): void;
+    connect(signal: string, handler: SignalHandler): number;
+    disconnect(id: number): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private _publishSize;
+    private _observe;
+    /** The GJS widget's `_onDraw`, minus the blit. */
+    private _allocated;
+}
+export { Canvas2DBridgeElement as Canvas2DBridge };

package/lib/types/canvas2d/index.d.ts

@@ -0,0 +1 @@
+export { Canvas2DBridge, Canvas2DBridgeElement } from './canvas2d-bridge.js';

package/lib/types/elements/gtk-window.d.ts

@@ -13,6 +13,12 @@ export declare class GtkWindow extends HTMLElement {
     private _titleLabel;
     /** Watches the strip for an author's titlebar arriving after the build. */
     private _titlebarObserver;
+    /** `is-active` and `focus-widget`; `maximized` stays the attribute above. */
+    private readonly _members;
+    private readonly _closing;
+    private readonly _syncActive;
+    private readonly _onFocusIn;
+    private readonly _onFocusOut;
     static get observedAttributes(): string[];
     /**
      * `Gtk.Window:title` — the window's title.
@@ -54,6 +60,9 @@ export declare class GtkWindow extends HTMLElement {
     private _offByDefault;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private _watchActivity;
+    private _documentIsActive;
+    private _notifyMember;
     /**
      * A `slot="titlebar"` child adopted AFTER the build has to take the strip over from the
      * server-side decoration, and `_render` is the one that notices — nothing else here runs
@@ -90,8 +99,32 @@ export declare class GtkWindow extends HTMLElement {
      * it, hide the window when `hide-on-close` is set and DESTROY it otherwise. "Destroy" is
      * the one word this port cannot mean — a page has no unref — so the default detaches the
      * frame, which is the same observable outcome for everything above it.
+     *
+     * A frame that is not in the page is not realized, so there is nothing to close; a listener
+     * that calls `close()` again is ignored, as GTK ignores it. Answers whether the window went
+     * away (hidden or detached), `false` when a listener took the request over or it was ignored.
      */
     close(): boolean;
+    /**
+     * `gtk_window_present`: show the frame. GTK also raises and focuses the toplevel, which is
+     * the window manager's to grant; a page owns no such surface, so this is only the first half.
+     */
+    present(): void;
+    /** `Gtk.Window:is-active` — see the header: the document's focus, while this frame is shown. */
+    get isActive(): boolean;
+    /** `gtk_window_is_active`. */
+    is_active(): boolean;
+    /** `Gtk.Window:focus-widget`, read live from the document. */
+    get focusWidget(): Element | null;
+    /** `gtk_window_get_focus`: the element inside the frame that has focus, or `null`. */
+    get_focus(): Element | null;
+    /**
+     * `gtk_window_set_focus`. `null` clears the focus. An element outside the frame is refused:
+     * GTK's window only focuses its own descendants.
+     */
+    set_focus(widget: Element | null): void;
+    /** `gtk_window_is_maximized`: the FRAME's state, not the browser window's. */
+    is_maximized(): boolean;
     /**
      * `gtk_window_maximize`. ASYNCHRONOUS in GTK — the GIR says so at gtkwindow.c:1044 — so
      * the property is the thing a caller watches, and this writes it directly rather than

package/lib/types/pango-markup.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Render Pango markup into `target`, replacing its content — the one door every
+ * `use-markup` surface in this package goes through.
+ *
+ * The `null` branch is the C fallback and is the SECURITY property: markup that does not
+ * parse is written as TEXT, so an unrecognised tag can never become an element. Callers
+ * that want markup only when a caller has asked for it read that from their own flag and
+ * pass plain text here — this function never decides whether markup is meant.
+ */
+export declare function renderPangoMarkup(target: HTMLElement, markup: string): void;

package/lib/types/pango-markup.spec.d.ts

@@ -0,0 +1 @@
+export declare const PangoMarkupTest: () => Promise<void>;

package/lib/types/source-view/copy-glyph.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A recognisable copy glyph rendered inline so the opt-in `source-view` subpath needs no
+ * icon CSS. `doc` is a parameter so a caller outside the main document (a shadow root in
+ * another frame) gets nodes its own tree can adopt.
+ */
+export declare function createCopyGlyph(doc?: Document): SVGSVGElement;

package/lib/types/source-view/copy-glyph.spec.d.ts

@@ -0,0 +1 @@
+export declare const CopyGlyphTest: () => Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.61.0",
+    "version": "0.63.0",
     "description": "Adwaita/Libadwaita web components for browser targets",
     "type": "module",
     "main": "./src/index.ts",
@@ -14,6 +14,10 @@
             "types": "./lib/types/source-view/index.d.ts",
             "default": "./src/source-view/index.ts"
         },
+        "./canvas2d": {
+            "types": "./lib/types/canvas2d/index.d.ts",
+            "default": "./src/canvas2d/index.ts"
+        },
         "./fonts": {
             "types": "./lib/types/fonts.d.ts",
             "default": "./src/fonts.ts"
@@ -54,14 +58,14 @@
         "@codemirror/language": "^6.12.4",
         "@codemirror/state": "^6.7.0",
         "@codemirror/view": "^6.43.4",
-        "@gjsify/adwaita-core": "^0.61.0",
-        "@gjsify/adwaita-fonts": "^0.61.0",
-        "@gjsify/adwaita-icons": "^0.61.0",
-        "@gjsify/gtksource-core": "^0.61.0",
+        "@gjsify/adwaita-core": "^0.63.0",
+        "@gjsify/adwaita-fonts": "^0.63.0",
+        "@gjsify/adwaita-icons": "^0.63.0",
+        "@gjsify/gtksource-core": "^0.63.0",
         "@lezer/highlight": "^1.2.3"
     },
     "peerDependencies": {
-        "@gjsify/app-settings": "^0.61.0"
+        "@gjsify/app-settings": "^0.63.0"
     },
     "peerDependenciesMeta": {
         "@gjsify/app-settings": {
@@ -69,11 +73,11 @@
         }
     },
     "devDependencies": {
-        "@gjsify/app-settings": "^0.61.0",
-        "@gjsify/blueprint": "^0.61.0",
-        "@gjsify/cli": "^0.61.0",
-        "@gjsify/unit": "^0.61.0",
-        "@gjsify/vite-plugin-blueprint": "^0.61.0",
+        "@gjsify/app-settings": "^0.63.0",
+        "@gjsify/blueprint": "^0.63.0",
+        "@gjsify/cli": "^0.63.0",
+        "@gjsify/unit": "^0.63.0",
+        "@gjsify/vite-plugin-blueprint": "^0.63.0",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },

package/src/application.spec.ts

@@ -63,6 +63,39 @@ export const ApplicationTest = async () => {
         await it('Adw.Application is a Gtk.Application', () => {
             expect(Adw.Application.prototype instanceof Gtk.Application).toBe(true);
         });
+        await it('a keydown in the window runs the accelerator, with its target', () => {
+            const app = new Adw.Application({ application_id: 'org.gjsify.vec.WebAccel' });
+            const window = scene.window(app as never) as Element;
+            const hits: unknown[] = [];
+            for (const [owner, name] of [
+                [app, 'save'],
+                [window, 'open'],
+                [app, 'view'],
+            ] as const) {
+                const action = new Gio.SimpleAction({ name });
+                action.connect('activate', (_a: unknown, parameter: unknown) => hits.push([name, parameter ?? null]));
+                (owner as unknown as { add_action(a: object): void }).add_action(action);
+            }
+            app.set_accels_for_action('app.save', ['<Primary>s']);
+            app.set_accels_for_action('win.open', ['<Primary><Shift>o']);
+            app.set_accels_for_action('app.view::list', ['<Primary>l']);
+            const press = (init: KeyboardEventInit): boolean => {
+                const event = new KeyboardEvent('keydown', { bubbles: true, cancelable: true, ...init });
+                window.dispatchEvent(event);
+                return event.defaultPrevented;
+            };
+            expect(press({ key: 's', ctrlKey: true })).toBe(true);
+            expect(press({ key: 'O', ctrlKey: true, shiftKey: true })).toBe(true);
+            expect(press({ key: 'l', ctrlKey: true })).toBe(true);
+            expect(press({ key: 's' })).toBe(false);
+            expect(hits).toStrictEqual([
+                ['save', null],
+                ['open', null],
+                ['view', 'list'],
+            ]);
+            (window as unknown as { application: object | null }).application = null;
+            expect(press({ key: 's', ctrlKey: true })).toBe(false);
+        });
         await it('quit() takes the windows it added off the page', async () => {
             const app = new Adw.Application({ application_id: 'org.gjsify.vec.WebQuit' });
             const window = scene.window(app as never) as Element;

package/src/application.ts

@@ -11,6 +11,7 @@ import {
     activateWidgetAction as activateIn,
     activateMenuItem,
     applicationOfWindow,
+    dispatchAccelerator,
     menuActionsFor,
     installActionMap,
     type AdwMenuItem,
@@ -18,6 +19,7 @@ import {
     type AdwMenuModel,
     type ApplicationHost,
 } from '@gjsify/adwaita-core';
+import { webPlatformHost } from './platform-host.js';
 
 export const webHost: ApplicationHost = {
     name: 'adwaita-web',
@@ -70,6 +72,19 @@ export class AdwApplication extends GtkApplication {}
 
 type WindowApplication = { add_window(window: object): void; remove_window(window: object): void };
 
+const ACCEL_LISTENERS = new WeakMap<object, () => void>();
+
+/** Key presses in a window of an application run its accelerators; keydown of descendants bubbles here. */
+function followAccelerators(window: object, application: WindowApplication | null): void {
+    ACCEL_LISTENERS.get(window)?.();
+    ACCEL_LISTENERS.delete(window);
+    if (application === null) return;
+    ACCEL_LISTENERS.set(
+        window,
+        webPlatformHost.listenKeys(window, (event) => dispatchAccelerator(window, event, parentOfElement)),
+    );
+}
+
 /**
  * `Gtk.Window:application` and the window's `Gio.ActionMap` (`win.` actions) on an element class.
  * Setting the property is `add_window`, as on GTK; setting it to `null` is `remove_window`.
@@ -87,6 +102,7 @@ export function defineWindowApplication(proto: object): void {
             if (current === value) return;
             current?.remove_window(this);
             value?.add_window(this);
+            followAccelerators(this, value);
         },
     });
 }

package/src/canvas2d/canvas2d-bridge.ts

@@ -0,0 +1,218 @@
+// <gjsify-canvas2d-bridge> — the browser half of `Canvas2DBridge` from `@gjsify/canvas2d` (ADR 0107).
+//
+// On GJS the bridge is a `Gtk.DrawingArea` that hands the app a Cairo-backed canvas. Here the
+// canvas is a real `<canvas>` and `getContext('2d')` returns the browser's own context, so the
+// size and resize semantics are the GJS widget's, name for name:
+//
+//   · the canvas exists from the first allocation, sized to it in LOGICAL pixels (no DPR backing),
+//   · `onReady(cb)` runs once canvas and context exist, synchronously if they already do,
+//   · the size is NOT synced again until the allocation changes, so a ready callback that sized
+//     the canvas for a static render keeps its pixels,
+//   · an allocation change sets `canvas.width/height`, dispatches a DOM `resize` event on the
+//     canvas, then calls the `onResize` callbacks and the `resize` signal handlers.
+//
+// The canvas sits at the top-left at its natural size; the host clips the rest. That is the GJS
+// widget's blit: the surface painted unscaled at (0, 0).
+
+import { registerTemplateClass } from '../template-classes.js';
+
+type ReadyCallback = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) => void;
+type ResizeCallback = (width: number, height: number) => void;
+type SignalHandler = (emitter: Canvas2DBridgeElement, ...args: unknown[]) => unknown;
+
+const TAG = 'gjsify-canvas2d-bridge';
+
+/** `G_MAXINT`, the top of `g_param_spec_int`'s range. */
+const MAX_INT = 2147483647;
+
+function intAttribute(element: HTMLElement, name: string): number {
+    const raw = Number.parseInt(element.getAttribute(name) ?? '', 10);
+    return Number.isFinite(raw) ? raw : 0;
+}
+
+export class Canvas2DBridgeElement extends HTMLElement {
+    static readonly GTypeName = 'GjsifyCanvas2DBridge';
+    /** The signals `connect()` accepts, as `Gtk.Widget` names them. */
+    static readonly signals: Record<string, string> = { resize: 'resize' };
+
+    private _canvas: HTMLCanvasElement | null = null;
+    private _ctx: CanvasRenderingContext2D | null = null;
+    private _readyCallbacks: ReadyCallback[] = [];
+    private _resizeCallbacks: ResizeCallback[] = [];
+    private _handlers = new Map<number, { signal: string; handler: SignalHandler }>();
+    private _nextHandler = 0;
+    private _observer: ResizeObserver | null = null;
+    private _width = -1;
+    private _height = -1;
+    private _drawFrame: number | null = null;
+
+    static get observedAttributes() {
+        return ['content-width', 'content-height'];
+    }
+
+    /** `Gtk.DrawingArea:content-width`, the minimum and natural width. Defaults to 0. */
+    get contentWidth(): number {
+        return intAttribute(this, 'content-width');
+    }
+
+    set contentWidth(v: number) {
+        this._write('content-width', Math.min(Math.max(Math.trunc(v) || 0, 0), MAX_INT));
+    }
+
+    /** `Gtk.DrawingArea:content-height`, the minimum and natural height. Defaults to 0. */
+    get contentHeight(): number {
+        return intAttribute(this, 'content-height');
+    }
+
+    set contentHeight(v: number) {
+        this._write('content-height', Math.min(Math.max(Math.trunc(v) || 0, 0), MAX_INT));
+    }
+
+    get content_width(): number {
+        return this.contentWidth;
+    }
+
+    set content_width(v: number) {
+        this.contentWidth = v;
+    }
+
+    get content_height(): number {
+        return this.contentHeight;
+    }
+
+    set content_height(v: number) {
+        this.contentHeight = v;
+    }
+
+    private _write(name: string, value: number): void {
+        if (this.getAttribute(name) !== String(value)) this.setAttribute(name, String(value));
+    }
+
+    /** The `<canvas>` backing this widget. Available after the first allocation. */
+    get canvas(): HTMLCanvasElement | null {
+        return this._canvas;
+    }
+
+    /** The browser's own 2D context; available after the first allocation. */
+    getContext(_id: '2d'): CanvasRenderingContext2D | null {
+        return this._ctx;
+    }
+
+    /** Runs `cb` once the 2D context is ready, synchronously if it already is. */
+    onReady(cb: ReadyCallback): void {
+        if (this._canvas && this._ctx) {
+            cb(this._canvas, this._ctx);
+            return;
+        }
+        this._readyCallbacks.push(cb);
+    }
+
+    /** Runs `cb` on every allocation change, with the canvas dimensions already updated. */
+    onResize(cb: ResizeCallback): void {
+        this._resizeCallbacks.push(cb);
+    }
+
+    /** The browser's own, here only so the call reads the same on every target. */
+    requestAnimationFrame(cb: FrameRequestCallback): number {
+        return globalThis.requestAnimationFrame(cb);
+    }
+
+    /** A no-op: the browser already has `requestAnimationFrame` and `performance`. */
+    installGlobals(): void {}
+
+    /** `gtk_widget_queue_draw`: nothing to blit here, the canvas IS the screen. */
+    queue_draw(): void {}
+
+    queueDraw(): void {}
+
+    connect(signal: string, handler: SignalHandler): number {
+        if (!(signal in Canvas2DBridgeElement.signals)) {
+            throw new Error(
+                `<${TAG}> declares no signal '${signal}'. It emits: ${Object.keys(Canvas2DBridgeElement.signals).join(', ')}.`,
+            );
+        }
+        const id = ++this._nextHandler;
+        this._handlers.set(id, { signal, handler });
+        return id;
+    }
+
+    disconnect(id: number): void {
+        if (!this._handlers.delete(id)) throw new Error(`No handler with id ${id} is connected to <${TAG}>`);
+    }
+
+    connectedCallback() {
+        if (!this.style.display) this.style.display = 'block';
+        this.style.overflow = 'hidden';
+        this.style.position = 'relative';
+        this._publishSize();
+        this._observe();
+    }
+
+    disconnectedCallback() {
+        this._observer?.disconnect();
+        this._observer = null;
+    }
+
+    attributeChangedCallback(name: string) {
+        if (name === 'content-width' || name === 'content-height') this._publishSize();
+    }
+
+    private _publishSize(): void {
+        const size: [string, number][] = [
+            ['min-width', this.contentWidth],
+            ['min-height', this.contentHeight],
+        ];
+        for (const [property, value] of size) {
+            if (value > 0) this.style.setProperty(property, `${value}px`);
+            else this.style.removeProperty(property);
+        }
+    }
+
+    private _observe(): void {
+        if (this._observer) return;
+        this._observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const box = entry.contentBoxSize?.[0];
+                this._allocated(
+                    Math.round(box ? box.inlineSize : entry.contentRect.width),
+                    Math.round(box ? box.blockSize : entry.contentRect.height),
+                );
+            }
+        });
+        this._observer.observe(this);
+    }
+
+    /** The GJS widget's `_onDraw`, minus the blit. */
+    private _allocated(width: number, height: number): void {
+        if (!this._canvas) {
+            const canvas = document.createElement('canvas');
+            canvas.style.cssText = 'position:absolute;left:0;top:0;';
+            canvas.width = width;
+            canvas.height = height;
+            this._canvas = canvas;
+            this._ctx = canvas.getContext('2d');
+            this._width = width;
+            this._height = height;
+            this.replaceChildren(canvas);
+            const ready = this._readyCallbacks;
+            this._readyCallbacks = [];
+            if (this._ctx) for (const cb of ready) cb(canvas, this._ctx);
+            return;
+        }
+        if (this._width === width && this._height === height) return;
+        this._width = width;
+        this._height = height;
+        this._canvas.width = width;
+        this._canvas.height = height;
+        this._canvas.dispatchEvent(new Event('resize'));
+        for (const { signal, handler } of Array.from(this._handlers.values())) {
+            if (signal === 'resize') handler(this, width, height);
+        }
+        for (const cb of this._resizeCallbacks) cb(width, height);
+    }
+}
+
+if (customElements.get(TAG) === undefined) customElements.define(TAG, Canvas2DBridgeElement);
+registerTemplateClass(Canvas2DBridgeElement.GTypeName, TAG);
+
+export { Canvas2DBridgeElement as Canvas2DBridge };

package/src/canvas2d/index.ts

@@ -0,0 +1,5 @@
+// @gjsify/adwaita-web/canvas2d — opt-in entry for `Canvas2DBridge` (ADR 0107). Importing this
+// module defines <gjsify-canvas2d-bridge> and registers it as the template class
+// `$GjsifyCanvas2DBridge`, so a `.blp` names it the way it names the GJS widget.
+
+export { Canvas2DBridge, Canvas2DBridgeElement } from './canvas2d-bridge.js';

package/src/elements/adw-alert-dialog.ts

@@ -25,9 +25,11 @@
 // `Adw.AlertDialog:heading-use-markup` and `:body-use-markup` both default to FALSE
 // (`Adw.Banner:use-markup` is the one that defaults to TRUE, which is why
 // `adw-banner.ts` documents a deliberate departure and this file does not need to).
-// Opting in renders through `innerHTML`, which is the author asserting the string is
-// trusted — Pango markup has a fixed tag set and no scripting, HTML has neither
-// property.
+// Opting in renders PANGO MARKUP through `renderPangoMarkup`: the string is PARSED by
+// `@gjsify/adwaita-core` and turned into nodes one at a time, never handed to
+// `innerHTML`. So opting in is no longer an assertion that the string is trusted —
+// `<b>` is drawn bold whether or not the author vouched for it, and a tag pango does
+// not know comes back as text.
 //
 // Buttons are stacked vertically by default (the Adw.AlertDialog default at medium
 // sizes) and laid out horizontally when prefer-wide-layout is set and there are no more
@@ -56,6 +58,7 @@
 import { AdwAlertResponses } from '@gjsify/adwaita-core';
 import type { AdwResponseAppearance } from '@gjsify/adwaita-core';
 
+import { renderPangoMarkup } from '../pango-markup.js';
 import { bindEmptySections } from '../empty-sections.js';
 import { bindSlottedChildren } from '../slotted-children.js';
 import { AdwModalSurface } from './modal-surface.js';
@@ -463,12 +466,12 @@ export class AdwAlertDialog extends HTMLElement {
         this.classList.toggle('open', this.open);
 
         const heading = this.heading;
-        if (this.headingUseMarkup) this._headingEl.innerHTML = heading;
+        if (this.headingUseMarkup) renderPangoMarkup(this._headingEl, heading);
         else this._headingEl.textContent = heading;
         this._headingEl.hidden = heading.length === 0;
 
         const body = this.body;
-        if (this.bodyUseMarkup) this._bodyEl.innerHTML = body;
+        if (this.bodyUseMarkup) renderPangoMarkup(this._bodyEl, body);
         else this._bodyEl.textContent = body;
         this._bodyEl.hidden = body.length === 0;
 

package/src/elements/adw-banner.ts

@@ -20,6 +20,8 @@ import {
     parseBannerButtonStyle,
 } from '@gjsify/adwaita-core';
 
+import { renderPangoMarkup } from '../pango-markup.js';
+
 export class AdwBanner extends HTMLElement {
     private _titleEl!: HTMLSpanElement;
     private _button!: HTMLButtonElement;
@@ -52,17 +54,20 @@ export class AdwBanner extends HTMLElement {
 
     private _render() {
         const title = this.getAttribute('title') ?? '';
-        // DELIBERATE DEPARTURE FROM THE C DEFAULT. `Adw.Banner:use-markup`
-        // defaults to TRUE and `@gjsify/adwaita-core`
-        // carries that as the spec value — but Pango markup is not HTML. Pango
-        // has a fixed tag set and no scripting; `innerHTML` will run an
-        // `onerror` handler. Adopting the C default here would turn every
-        // `title` attribute into an injection sink for a widget that is not one
-        // in GTK, so on this renderer markup is OPT-IN and the default is text.
-        // The opt-in is the developer asserting the title is trusted.
+        // DELIBERATE DEPARTURE FROM THE C DEFAULT, and the departure is now about
+        // SAFETY rather than about how markup is spelt. `Adw.Banner:use-markup`
+        // defaults to TRUE and `@gjsify/adwaita-core` carries that as the spec
+        // value — but a `title` attribute is an ATTRIBUTE, and a renderer that
+        // parsed it as markup would be one an author (or an injected value) could
+        // drive. Adopting the C default here would make every banner title markup
+        // by default for a widget that is not one in GTK, so on this renderer
+        // markup is OPT-IN and the default is text.
+        // Opting in renders PANGO markup — parsed by `renderPangoMarkup`, never
+        // handed to `innerHTML`, so nothing the title carries can become a node
+        // beyond the eleven tags pango itself knows.
         // The title label carries `use-underline=False` in the template
         //, so its underscores are literal — no stripping here.
-        if (this.hasAttribute('use-markup')) this._titleEl.innerHTML = title;
+        if (this.hasAttribute('use-markup')) renderPangoMarkup(this._titleEl, title);
         else this._titleEl.textContent = title;
 
         // `label && label[0]` — a first-character test, so a label of