@gjsify/adwaita-web 0.62.0 → 0.63.1-next.235

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.62.0",
+    "version": "0.63.1-next.235",
     "description": "Adwaita/Libadwaita web components for browser targets",
     "type": "module",
     "main": "./src/index.ts",
@@ -58,14 +58,14 @@
         "@codemirror/language": "^6.12.4",
         "@codemirror/state": "^6.7.0",
         "@codemirror/view": "^6.43.4",
-        "@gjsify/adwaita-core": "^0.62.0",
-        "@gjsify/adwaita-fonts": "^0.62.0",
-        "@gjsify/adwaita-icons": "^0.62.0",
-        "@gjsify/gtksource-core": "^0.62.0",
+        "@gjsify/adwaita-core": "0.63.1-next.235",
+        "@gjsify/adwaita-fonts": "0.63.1-next.235",
+        "@gjsify/adwaita-icons": "0.63.1-next.235",
+        "@gjsify/gtksource-core": "0.63.1-next.235",
         "@lezer/highlight": "^1.2.3"
     },
     "peerDependencies": {
-        "@gjsify/app-settings": "^0.62.0"
+        "@gjsify/app-settings": "0.63.1-next.235"
     },
     "peerDependenciesMeta": {
         "@gjsify/app-settings": {
@@ -73,11 +73,11 @@
         }
     },
     "devDependencies": {
-        "@gjsify/app-settings": "^0.62.0",
-        "@gjsify/blueprint": "^0.62.0",
-        "@gjsify/cli": "^0.62.0",
-        "@gjsify/unit": "^0.62.0",
-        "@gjsify/vite-plugin-blueprint": "^0.62.0",
+        "@gjsify/app-settings": "0.63.1-next.235",
+        "@gjsify/blueprint": "0.63.1-next.235",
+        "@gjsify/cli": "0.63.1-next.235",
+        "@gjsify/unit": "0.63.1-next.235",
+        "@gjsify/vite-plugin-blueprint": "0.63.1-next.235",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },
@@ -114,5 +114,6 @@
     "bugs": {
         "url": "https://github.com/gjsify/gjsify/issues"
     },
-    "homepage": "https://github.com/gjsify/gjsify/tree/main/packages/web/adwaita-web#readme"
+    "homepage": "https://github.com/gjsify/gjsify/tree/main/packages/web/adwaita-web#readme",
+    "gitHead": "9d2cca56170a0215b3e0792e98421ed1f83e7f72"
 }

package/scss/_window.scss

@@ -35,6 +35,11 @@ adw-application-window {
     outline: none;
     box-shadow: none;
   }
+
+  // `present()` and `hide-on-close` toggle `hidden`, which `display: flex` would override.
+  &[hidden] {
+    display: none;
+  }
 }
 
 // The content area — the one child slot `Adw.Window:content` fills. It takes the
@@ -64,8 +69,8 @@ adw-application-window {
 // through a selector list: `_reset.scss` re-roots the box model at each registered element,
 // and a shared `adw-window, gtk-window` block would put two component resets in one rule.
 //
-// NOT the same as `<adw-window>`, deliberately. `Adw.Window` is a plain styled container —
-// nothing about it is GTK's `GtkWindow` — while this one answers the FRAME properties:
+// NOT the same as `<adw-window>`, deliberately. `Adw.Window` extends `GtkWindow` but has no
+// titlebar area, while this one answers the FRAME properties:
 // `decorated` drops the titlebar strip, `maximized` and `fullscreened` square the corners
 // off and drop the shadow (`_window.scss:66-72`), and the strip itself is either the
 // application's `titlebar` or the two `<gtk-window-controls>` a server-side decoration would

package/src/adw-application-window.spec.ts

@@ -7,6 +7,9 @@
 // `Adw.Window` plus `Gtk.ApplicationWindow:show-menubar`, so the window half is
 // <adw-window>'s spec and only the delta is asserted here.
 import { describe, it, expect } from '@gjsify/unit';
+import { driveWindowVectors, WINDOW_VECTORS } from '@gjsify/adwaita-core/conformance';
+
+import { webWindowSubject } from './gtk-window.spec.js';
 
 import type { AdwApplicationWindow } from './elements/adw-application-window.js';
 
@@ -30,6 +33,11 @@ function makeWindow(model: unknown = MENU_MODEL): AdwApplicationWindow {
 }
 
 export const AdwApplicationWindowTest = async () => {
+    // `Adw.Window` IS a `Gtk.Window` upstream: the same vectors that run against real GTK and
+    // <gtk-window> must hold here, or the state members have fallen off the subclass again.
+    const { subject, dispose } = webWindowSubject('adw-application-window');
+    await driveWindowVectors(subject, { describe, it, expect }, WINDOW_VECTORS);
+    dispose();
     await describe('adw-application-window is an adw-window', async () => {
         await it('places children in the inherited content area', async () => {
             const win = makeWindow();

package/src/adw-data-grid.spec.ts

@@ -33,6 +33,17 @@ export const AdwDataGridTest = async () => {
             grid.remove();
         });
 
+        await it('set_columns / set_rows are the same properties, the spelling the NativeScript port shares', async () => {
+            const grid = makeGrid();
+            grid.set_columns(BWA_COLUMNS);
+            grid.set_rows([{ position: 'Umsatz', total: '1' }]);
+            expect(grid.get_columns().map((column) => column.key)).toStrictEqual(['position', 'total']);
+            expect(grid.columns).toBe(grid.get_columns());
+            expect(grid.get_rows().length).toBe(1);
+            expect(grid.querySelectorAll('.adw-data-grid-row:not(.header)').length).toBe(1);
+            grid.remove();
+        });
+
         await it('falls back to the key when no label is given', async () => {
             const grid = makeGrid([{ key: 'amount' }], []);
             const cell = grid.querySelector('.adw-data-grid-row.header .adw-data-grid-cell');

package/src/adw-window.spec.ts

@@ -4,6 +4,9 @@
 // these specs create elements via document.createElement and assert their DOM
 // behaviour (content area, breakpoints, dialog tracking).
 import { describe, it, expect } from '@gjsify/unit';
+import { driveWindowVectors, WINDOW_VECTORS } from '@gjsify/adwaita-core/conformance';
+
+import { webWindowSubject } from './gtk-window.spec.js';
 
 import type { AdwWindow } from './elements/adw-window.js';
 
@@ -22,6 +25,11 @@ function settle(): Promise<void> {
 }
 
 export const AdwWindowTest = async () => {
+    // `Adw.Window` IS a `Gtk.Window` upstream: the same vectors that run against real GTK and
+    // <gtk-window> must hold here, or the state members have fallen off the subclass again.
+    const { subject, dispose } = webWindowSubject('adw-window');
+    await driveWindowVectors(subject, { describe, it, expect }, WINDOW_VECTORS);
+    dispose();
     await describe('adw-window content', async () => {
         await it('places children in the content area', async () => {
             const win = makeWindow('<p id="hello">Hello</p>');

package/src/application.spec.ts

@@ -23,7 +23,7 @@ const made: Element[] = [];
 const scene: ApplicationScene = {
     window(app) {
         const window = document.createElement('adw-application-window') as Adw.ApplicationWindow;
-        window.application = app;
+        window.application = app as unknown as Gtk.Application;
         document.body.append(window);
         made.push(window);
         return window;
@@ -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/bottom-sheet.spec.ts

@@ -558,6 +558,15 @@ export const AdwBottomSheetTest = async () => {
             sheet.remove();
         });
 
+        await it('get_modal / set_modal are the same property, the spelling the NativeScript port shares', () => {
+            const sheet = mountSheet();
+            sheet.set_modal(false);
+            expect(sheet.modal).toBe(false);
+            expect(sheet.get_modal()).toBe(false);
+            expect(sheet.classList.contains('modal')).toBe(false);
+            sheet.remove();
+        });
+
         await it('the dimming layer becomes interactive only while open AND modal', () => {
             const sheet = mountSheet();
             expect(dimming(sheet).classList.contains('visible')).toBe(false);

package/src/canvas2d/canvas2d-bridge.ts

@@ -16,7 +16,23 @@
 
 import { registerTemplateClass } from '../template-classes.js';
 
-type ReadyCallback = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) => void;
+/**
+ * The DOM types this element names, resolved through `globalThis` so the published `.d.ts`
+ * never names a `lib.dom` type directly: a consumer that loads `lib.dom` gets the real ones,
+ * one that does not still type-checks the declarations with `skipLibCheck: false`.
+ */
+export type BridgeCanvas = typeof globalThis extends { HTMLCanvasElement: { prototype: infer T } } ? T : object;
+export type BridgeContext2D = typeof globalThis extends { CanvasRenderingContext2D: { prototype: infer T } }
+    ? T
+    : object;
+/** `FrameRequestCallback` without `lib.dom`. */
+export type FrameCallback = (time: number) => void;
+type ElementConstructor = typeof globalThis extends { HTMLElement: infer C } ? C : abstract new () => object;
+
+// biome-ignore lint: the annotation, not the value, is what the declaration file keeps
+const HostElement: ElementConstructor = (globalThis as { HTMLElement?: unknown }).HTMLElement as ElementConstructor;
+
+type ReadyCallback = (canvas: BridgeCanvas, ctx: BridgeContext2D) => void;
 type ResizeCallback = (width: number, height: number) => void;
 type SignalHandler = (emitter: Canvas2DBridgeElement, ...args: unknown[]) => unknown;
 
@@ -25,18 +41,18 @@ 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 {
+function intAttribute(element: Element, name: string): number {
     const raw = Number.parseInt(element.getAttribute(name) ?? '', 10);
     return Number.isFinite(raw) ? raw : 0;
 }
 
-export class Canvas2DBridgeElement extends HTMLElement {
+export class Canvas2DBridgeElement extends HostElement {
     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 _canvas: BridgeCanvas | null = null;
+    private _ctx: BridgeContext2D | null = null;
     private _readyCallbacks: ReadyCallback[] = [];
     private _resizeCallbacks: ResizeCallback[] = [];
     private _handlers = new Map<number, { signal: string; handler: SignalHandler }>();
@@ -89,12 +105,12 @@ export class Canvas2DBridgeElement extends HTMLElement {
     }
 
     /** The `<canvas>` backing this widget. Available after the first allocation. */
-    get canvas(): HTMLCanvasElement | null {
+    get canvas(): BridgeCanvas | null {
         return this._canvas;
     }
 
     /** The browser's own 2D context; available after the first allocation. */
-    getContext(_id: '2d'): CanvasRenderingContext2D | null {
+    getContext(_id: '2d'): BridgeContext2D | null {
         return this._ctx;
     }
 
@@ -113,7 +129,7 @@ export class Canvas2DBridgeElement extends HTMLElement {
     }
 
     /** The browser's own, here only so the call reads the same on every target. */
-    requestAnimationFrame(cb: FrameRequestCallback): number {
+    requestAnimationFrame(cb: FrameCallback): number {
         return globalThis.requestAnimationFrame(cb);
     }
 

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-application-window.ts

@@ -23,8 +23,9 @@
 //   menu-model   (the portable menu model, JSON — the stand-in for the model a
 //     GtkApplication would own; the same value `<gtk-menu-button menu-model>` takes)
 //
-// Extends <adw-window> and adds nothing else: the content property, the size request,
-// the breakpoints and the dialog bookkeeping are all inherited.
+// Extends <gtk-application-window>, as Adw.ApplicationWindow extends Gtk.ApplicationWindow,
+// so the Gtk.Window state members come with it. The content property, the size request, the
+// breakpoints and the dialog bookkeeping are the same AdwWindowFeatures <adw-window> uses.
 //
 // Reference: refs/libadwaita/src/adw-application-window.c (the class adds no behaviour)
 // Reference: Gtk-4.0.gir `Gtk.ApplicationWindow:show-menubar` ("If this property is true,
@@ -40,21 +41,56 @@ import {
     type AdwMenuModel,
 } from '@gjsify/adwaita-core';
 
-import { AdwWindow } from './adw-window.js';
+import type { AdwBreakpoint } from '@gjsify/adwaita-core';
+import type { AdwSlot } from '../slotted-children.js';
+import { AdwWindowFeatures } from './adw-window-features.js';
+import { GtkApplicationWindow } from './gtk-application-window.js';
 import { defineWindowApplication } from '../application.js';
 
-export class AdwApplicationWindow extends AdwWindow {
-    /** `Gtk.Window:application`: setting it is `add_window` (ADR 0098), set by `defineWindowApplication`. */
-    declare application: object | null;
-    private _menubarEl: HTMLDivElement | null = null;
+export class AdwApplicationWindow extends GtkApplicationWindow {
+    private readonly _features = new AdwWindowFeatures(this);
     private _model: AdwMenuModel = [];
+    private _menubarEl: HTMLDivElement | null = null;
 
     // The base's list BY NAME, not `super.observedAttributes`: `AdwPasswordEntryRow`
     // spells its spread this way and the attribute readers follow (`adwaita-elements.mjs`
     // resolves a `[...Base.observedAttributes]` spread across files, and reports a
     // `super` one as unreadable rather than as empty).
     static get observedAttributes(): string[] {
-        return [...AdwWindow.observedAttributes, 'show-menubar', 'menu-model'];
+        return [...GtkApplicationWindow.observedAttributes, 'width', 'height', 'menu-model'];
+    }
+
+    /** The content area — the Adw.Window:content property. */
+    get contentArea(): HTMLDivElement {
+        return this._content;
+    }
+
+    get content(): HTMLElement | null {
+        return this._features.content;
+    }
+
+    set content(value: HTMLElement | null) {
+        this._features.content = value;
+    }
+
+    get breakpoints(): readonly AdwBreakpoint[] {
+        return this._features.breakpoints;
+    }
+
+    get currentBreakpoint(): AdwBreakpoint | null {
+        return this._features.currentBreakpoint;
+    }
+
+    get dialogs(): readonly HTMLElement[] {
+        return this._features.dialogs;
+    }
+
+    get visibleDialog(): HTMLElement | null {
+        return this._features.visibleDialog;
+    }
+
+    addBreakpoint(condition: string): AdwBreakpoint {
+        return this._features.addBreakpoint(condition);
     }
 
     /** Whether this window shows the application's menubar (Gtk.ApplicationWindow:show-menubar). */
@@ -84,17 +120,45 @@ export class AdwApplicationWindow extends AdwWindow {
 
     connectedCallback() {
         super.connectedCallback();
-        this._buildMenubar();
+        this._features.adopt(this._content);
+        // EVERY connect, not only the first — see `AdwWindowFeatures.bind`.
+        this._features.bind();
+    }
+
+    disconnectedCallback() {
+        this._features.release();
+        super.disconnectedCallback();
     }
 
     attributeChangedCallback(name: string) {
+        if (name === 'width' || name === 'height') {
+            this.renderFrameSize();
+            return;
+        }
         super.attributeChangedCallback(name);
         // The attribute is the declarative form and it wins when it changes — the same
         // precedence `<gtk-menu-button>` gives `menu-model`, through the same parser.
-        if (name === 'menu-model') this._model = parseMenuModel(this.getAttribute('menu-model'));
-        // Before the first connect the menubar does not exist yet, and `_buildMenubar`
-        // renders from the model this has just read — so nothing is built twice.
-        if (name === 'show-menubar' || name === 'menu-model') this._renderMenubar();
+        if (name === 'menu-model') {
+            this._model = parseMenuModel(this.getAttribute('menu-model'));
+            this._renderMenubar();
+        }
+    }
+
+    /** `Adw.ApplicationWindow` has no titlebar of its own, like `Adw.Window`. */
+    protected override hasTitlebar(): boolean {
+        return false;
+    }
+
+    protected override strips(): Node[] {
+        return [this._content];
+    }
+
+    protected override extraSlots(): AdwSlot[] {
+        return [{ name: 'content', into: this._content }];
+    }
+
+    protected override renderFrameSize(): void {
+        this._features.applySizeRequest();
     }
 
     /**
@@ -104,17 +168,23 @@ export class AdwApplicationWindow extends AdwWindow {
      * into the content area, so a sibling would be re-homed into it one tick later. The
      * content area's own children are not watched, so prepending here is stable — and
      * it is also where the bar belongs: above the toolbar view, inside the window box.
+     * Replaces the base's observer: this bar is filled from the model, not from a slot,
+     * and observing it would re-trigger every render.
      */
-    private _buildMenubar() {
-        if (this._menubarEl) return;
-        this._menubarEl = document.createElement('div');
-        this._menubarEl.className = 'adw-application-window-menubar';
-        this.contentArea.prepend(this._menubarEl);
-
+    protected override _followMenubar(): void {
+        if (this._menubarEl === null) {
+            this._menubarEl = document.createElement('div');
+            this._menubarEl.className = 'adw-application-window-menubar';
+            this._content.prepend(this._menubarEl);
+        }
         this._renderMenubar();
     }
 
-    private _renderMenubar(): void {
+    protected override menubarSection(): HTMLDivElement {
+        return this._menubarEl ?? super.menubarSection();
+    }
+
+    protected override _renderMenubar(): void {
         const bar = this._menubarEl;
         if (bar === null) return;
 

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

package/src/elements/adw-bottom-sheet.ts

@@ -110,6 +110,15 @@ export class AdwBottomSheet extends HTMLElement {
         this._setBoolAttr('modal', value);
     }
 
+    /** `adw_bottom_sheet_get_modal` — the NativeScript port's only door to it (ADR 0112). */
+    get_modal(): boolean {
+        return this.modal;
+    }
+
+    set_modal(modal: boolean): void {
+        this.modal = modal;
+    }
+
     /** Whether the user can dismiss the sheet (dimming / Escape / sheet.close). */
     get canClose(): boolean {
         return this._state.canClose;

package/src/elements/adw-data-grid.ts

@@ -111,6 +111,24 @@ export class AdwDataGrid extends HTMLElement {
         if (this._initialized) this._render();
     }
 
+    // The verbs are the spelling the NativeScript port has to use, where `GridLayout` owns both
+    // accessor names (ADR 0112); offered here too so one code-behind runs on both.
+    get_columns(): AdwDataGridColumn[] {
+        return this.columns;
+    }
+
+    set_columns(value: ReadonlyArray<AdwDataGridColumn>): void {
+        this.columns = value;
+    }
+
+    get_rows(): AdwDataGridRow[] {
+        return this.rows;
+    }
+
+    set_rows(value: ReadonlyArray<AdwDataGridRow>): void {
+        this.rows = value;
+    }
+
     /** The optional grid caption/title (reflected to the attribute). */
     get caption(): string {
         return this.getAttribute('caption') ?? '';