@blotch/dolan 22.2.4 → 22.2.5

package/dist/ui/components/menu/menu.ts

@@ -7,7 +7,6 @@ import {
   ViewEncapsulation,
   booleanAttribute,
   computed,
-  effect,
   inject,
   input,
   model,
@@ -18,19 +17,12 @@ import {
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 
 import { cn } from '../../utils/cn';
+import { UiGlass } from '../glass/glass';
 import { injectGlassDesign } from '../glass/glass-design';
 import { UiIcon } from '../icon/icon';
 import { type IconName } from '../icon/icons';
 import { type MenuElement, UiMenuPopup } from './menu-popup';
 
-/**
- * AngularLynx's element, which can add an accessibility trait to the app's
- * own (see LynxElement.setAccessibilityTrait).
- */
-type AccessibleElement = {
-  setAccessibilityTrait(trait: string, on: boolean): void;
-};
-
 /**
  * What a menu's items need from the menu they're in: `ui-menu` or
  * `ui-context-menu`.
@@ -46,6 +38,14 @@ export type UiMenuHost = {
  */
 export const UI_MENU = new InjectionToken<UiMenuHost>('UI_MENU');
 
+/**
+ * `booleanAttribute` for an input that can also be unset: a bare attribute
+ * is true, as it is for the other boolean inputs, and `undefined` stays
+ * `undefined` rather than becoming false.
+ */
+const optionalBooleanAttribute = (value: unknown): boolean | undefined =>
+  value === undefined ? undefined : booleanAttribute(value);
+
 /**
  * A menu item: a label, with an optional icon, that does something and
  * closes the menu.
@@ -65,12 +65,15 @@ export const UI_MENU = new InjectionToken<UiMenuHost>('UI_MENU');
   imports: [LYNX_ELEMENTS, UiIcon],
   encapsulation: ViewEncapsulation.None,
   template: `
+    <!-- A checked item is selected to a screen reader, which iOS reads.
+         lynxAccessibilityTraits adds the trait to button on iOS, and leaves
+         Android, which reads one trait, with button. -->
     <view
-      #row
       [class]="rowClass()"
       [accessibility-element]="true"
       accessibility-traits="button"
       [accessibility-label]="spokenLabel()"
+      [lynxAccessibilityTraits]="{ selected: checked() === true }"
       (bindtouchstart)="hold(true)"
       (bindtouchend)="hold(false)"
       (bindtouchcancel)="hold(false)"
@@ -79,11 +82,11 @@ export const UI_MENU = new InjectionToken<UiMenuHost>('UI_MENU');
       (bindmouseleave)="hold(false)"
       (bindtap)="choose()"
     >
-      <!-- The pressed highlight: the glass's own foreground at a tenth, so it
-           suits light and dark glass, and is Material's state layer. -->
+      <!-- The pressed highlight, in the glass's own foreground, so it suits
+           light and dark glass (see highlightClass). -->
       <view
-        class="h-full w-full bg-glass-foreground absolute left-0 top-0"
-        [style.opacity]="held() ? 0.1 : 0"
+        [class]="highlightClass()"
+        [style.opacity]="highlightOpacity()"
       ></view>
       @if (checked() !== undefined) {
         <!-- A checkable item keeps the column for the checkmark when it's
@@ -120,7 +123,9 @@ export class UiMenuItem {
    * set it, true or false, on each item of a group of options, so their
    * labels line up.
    */
-  readonly checked = input<boolean | undefined>(undefined);
+  readonly checked = input<boolean | undefined, unknown>(undefined, {
+    transform: optionalBooleanAttribute,
+  });
   /** Shows the item without letting it be chosen. */
   readonly disabled = input(false, { transform: booleanAttribute });
   /**
@@ -135,9 +140,6 @@ export class UiMenuItem {
   /** Whether a finger (or the mouse) is down on the item. */
   protected readonly held = signal(false);
 
-  // Required: always in the template.
-  readonly row = viewChild.required<ElementRef<AccessibleElement>>('row');
-
   readonly #material = computed(() => this.#design() === 'material');
   readonly #destructive = computed(() => this.variant() === 'destructive');
 
@@ -153,6 +155,25 @@ export class UiMenuItem {
     this.#iconLeads() ? undefined : this.icon(),
   );
 
+  /**
+   * iOS 26's menus highlight a pressed row with a capsule inset 10pt from
+   * the menu's sides, 8% darker than the glass, measured on iOS 27's Files
+   * menu. Before, Apple's menus filled the row edge to edge, and so does
+   * Material's state layer, at a tenth.
+   */
+  protected readonly highlightClass = computed(() =>
+    cn(
+      'bg-glass-foreground absolute bottom-0 top-0',
+      this.#design() === 'glass'
+        ? 'rounded-full left-[10px] right-[10px]'
+        : 'left-0 right-0',
+    ),
+  );
+  protected readonly highlightOpacity = computed(() => {
+    if (!this.held()) return 0;
+    return this.#design() === 'glass' ? 0.08 : 0.1;
+  });
+
   protected readonly rowClass = computed(() =>
     cn(
       'flex-row items-center gap-3 flex relative',
@@ -164,17 +185,6 @@ export class UiMenuItem {
     ),
   );
 
-  /**
-   * A checked item is `selected` to a screen reader, which iOS reads.
-   * Through the runtime, which adds the trait to `button` on iOS and leaves
-   * Android, which reads one trait, with `button`.
-   */
-  protected readonly selectedTrait = effect(() => {
-    this.row().nativeElement.setAccessibilityTrait(
-      'selected',
-      this.checked() === true,
-    );
-  });
   protected readonly labelClass = computed(() =>
     cn(
       'flex-1',
@@ -271,6 +281,9 @@ export class UiMenuSeparator {
   });
 }
 
+/** How many pull-down menus there have been, for their glass ids. */
+let menuCount = 0;
+
 /**
  * The `ui-menu` a trigger is in, for `UI_MENU`. A named function rather than
  * an inline factory: the component's metadata keeps its own copy of an
@@ -314,6 +327,7 @@ const pullDownMenu = (): UiMenuHost => inject(UiMenu);
       #popup
       [open]="open()"
       [anchor]="anchor()"
+      [glassId]="glassId"
       (dismissed)="close()"
       (closed)="closed.emit()"
     >
@@ -330,6 +344,13 @@ export class UiMenu implements UiMenuHost {
   readonly #host = inject<ElementRef<MenuElement>>(ElementRef);
   readonly #trigger = signal<MenuElement | null>(null);
 
+  /**
+   * The id the menu's glass and a glass trigger share (see UiGlass's
+   * `glassId`), unique to the menu, so the menu takes over the trigger's
+   * glass as it grows out of it.
+   */
+  readonly glassId = `ui-menu-${++menuCount}`;
+
   // Required: always in the template.
   readonly popup = viewChild.required<UiMenuPopup>('popup');
 
@@ -345,6 +366,13 @@ export class UiMenu implements UiMenuHost {
    * Whether the menu covers its trigger now: a glass or frosted menu grows
    * out of it and shrinks back into it, so the trigger hides meanwhile, as
    * on iOS. A Material menu opens beside it.
+   *
+   * It hides with `visibility`, in the same update that shows the menu's
+   * glass at the trigger's place, and shows again in the one that hides the
+   * glass. On iOS 26 and later, the shell pairs a glass trigger with the menu
+   * across that change (see UiGlass's `glassId`): the menu takes over the
+   * trigger's corners, and the trigger's content fades out in it, and back in
+   * as the menu closes.
    */
   readonly coversTrigger = computed(() => {
     const popup = this.popup();
@@ -387,29 +415,41 @@ export class UiMenu implements UiMenuHost {
   selector: '[uiMenuTrigger]',
   host: {
     '(click)': 'menu.toggle()',
-    '[style.opacity]': 'menu.coversTrigger() ? 0 : null',
+    '[style.visibility]': 'menu.coversTrigger() ? "hidden" : null',
   },
 })
 export class UiMenuTrigger {
   protected readonly menu = inject(UiMenu);
 
-  /** Points the menu at this element until the directive is destroyed. */
+  /**
+   * Points the menu at this element until the directive is destroyed. A
+   * trigger that's glass itself (`<blur-view ui-glass uiMenuTrigger>`)
+   * shares the menu's glass id meanwhile, so the menu takes its glass over
+   * (see UiMenu's coversTrigger).
+   */
   protected readonly unregister = registerTrigger(
     this.menu,
     inject<ElementRef<MenuElement>>(ElementRef).nativeElement,
+    inject(UiGlass, { self: true, optional: true }),
     inject(DestroyRef),
   );
 }
 
 /**
- * Makes `trigger` the element `menu` grows out of, until `destroyRef` is
- * destroyed. Returns what takes the registration back early.
+ * Makes `trigger` the element `menu` grows out of, and pairs its `glass`, if
+ * it's glass, with the menu's, until `destroyRef` is destroyed. Returns what
+ * takes the registration back early.
  */
 const registerTrigger = (
   menu: UiMenu,
   trigger: MenuElement,
+  glass: UiGlass | null,
   destroyRef: DestroyRef,
 ): (() => void) => {
   menu.setTrigger(trigger);
-  return destroyRef.onDestroy(() => menu.setTrigger(null));
+  glass?.pair(menu.glassId);
+  return destroyRef.onDestroy(() => {
+    menu.setTrigger(null);
+    glass?.pair(null);
+  });
 };

package/dist/ui/components/nav-drawer/nav-drawer.ts

@@ -3,6 +3,7 @@ import {
   type OnDestroy,
   Component,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   contentChildren,
   effect,
@@ -407,8 +408,8 @@ export class UiNavDrawerItem {
   readonly #drawer = inject(UiNavDrawer);
 
   readonly variant = input<'default' | 'destructive'>('default');
-  readonly active = input(false);
-  readonly autoClose = input(true);
+  readonly active = input(false, { transform: booleanAttribute });
+  readonly autoClose = input(true, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
   readonly pressed = output<void>();

package/dist/ui/components/navigation-bar/index.ts

@@ -0,0 +1 @@
+export { UiNavigationBar } from './navigation-bar';

package/dist/ui/components/navigation-bar/navigation-bar.test.ts

@@ -0,0 +1,425 @@
+import { Location, LocationStrategy } from '@angular/common';
+import { MockLocationStrategy } from '@angular/common/testing';
+import { Component, type Provider, signal, viewChild } from '@angular/core';
+import { Router, RouterOutlet, type Routes } from '@angular/router';
+import {
+  fireEvent,
+  render,
+  waitForUpdate,
+} from '@blotch/angular-lynx-testing-library';
+import {
+  LYNX_ELEMENTS,
+  LynxAccessibilitySettings,
+  LynxSystemInfo,
+  provideRouter,
+} from '@blotch/angular-lynx';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { provideGlass } from '../glass/glass-design';
+import { UiBarScroll, UiBarState } from '../toolbar/bar-scroll';
+import { UiToolbarItem } from '../toolbar/toolbar';
+import { UiNavigationBar } from './navigation-bar';
+
+@Component({
+  selector: 'notes-page',
+  imports: [LYNX_ELEMENTS],
+  template: `<text>Notes page</text>`,
+})
+class NotesPage {}
+
+@Component({
+  selector: 'note-page',
+  imports: [LYNX_ELEMENTS],
+  template: `<text>Note page</text>`,
+})
+class NotePage {}
+
+const routes: Routes = [
+  { path: '', component: NotesPage },
+  { path: 'note', component: NotePage },
+];
+
+@Component({
+  imports: [
+    LYNX_ELEMENTS,
+    RouterOutlet,
+    UiBarScroll,
+    UiNavigationBar,
+    UiToolbarItem,
+  ],
+  template: `
+    @if (scroll()) {
+      <scroll-view ui-bar-scroll id="scroll" scroll-orientation="vertical">
+        <view style="height: 2000px"></view>
+      </scroll-view>
+    }
+    <ui-navigation-bar
+      id="bar"
+      [title]="title()"
+      [largeTitle]="largeTitle()"
+      [titleCentered]="titleCentered()"
+      [backLabel]="backLabel()"
+      [backRoute]="backRoute()"
+      [backButtonHidden]="backButtonHidden()"
+      [class]="barClass()"
+    >
+      <ui-toolbar-item leading label="Edit" />
+      <ui-toolbar-item icon="plus" label="New note" />
+    </ui-navigation-bar>
+    <router-outlet />
+  `,
+})
+class BarHost {
+  readonly title = signal('Notes');
+  readonly largeTitle = signal(false);
+  readonly titleCentered = signal(false);
+  readonly backLabel = signal('Back');
+  readonly backRoute = signal<string | undefined>(undefined);
+  readonly backButtonHidden = signal(false);
+  readonly barClass = signal('');
+  readonly scroll = signal(false);
+  readonly bar = viewChild.required(UiNavigationBar);
+}
+
+/** Accessibility settings a test can change, as the host app would. */
+const settings = {
+  reduceMotion: signal(false),
+  reduceTransparency: signal(false),
+  increaseContrast: signal(false),
+};
+
+const IOS_26 = { platform: 'iOS', osVersion: '26.0' };
+const IOS_18 = { platform: 'iOS', osVersion: '18.5' };
+const ANDROID = { platform: 'Android', osVersion: '15' };
+
+/**
+ * Runs change detection until `done` holds: a navigation takes a few ticks.
+ */
+const until = async (done: () => boolean): Promise<void> => {
+  for (let i = 0; i < 20 && !done(); i++) {
+    await waitForUpdate();
+  }
+  expect(done()).toBe(true);
+};
+
+/**
+ * Renders the bar on a platform, with the router unless `router` is false.
+ * The platform is provided rather than stubbed as a global: the router's
+ * setup switches the testing library's threads, which puts back its own
+ * SystemInfo before the bar reads it.
+ */
+const renderBar = async (
+  platform: { platform: string; osVersion: string },
+  providers: Provider[] = [],
+) => {
+  const result = await render(BarHost, {
+    providers: [
+      provideRouter(routes),
+      { provide: LynxSystemInfo, useValue: platform },
+      { provide: LynxAccessibilitySettings, useValue: settings },
+      ...providers,
+    ],
+  });
+  const host = result.componentRef.instance as BarHost;
+  const injector = result.componentRef.injector;
+  const state = injector.get(UiBarState);
+  const { container } = result;
+  const bar = () => container.querySelector<HTMLElement>('#bar')!;
+  const row = () =>
+    Array.from(bar().children).find((child) =>
+      child.className.includes('justify-between'),
+    ) as HTMLElement;
+  /**
+   * The bar's two ends: the views holding Edit and New note.
+   */
+  const leading = () =>
+    result.getByRole('button', { name: 'Edit' }).parentElement!;
+  const trailing = () =>
+    result.getByRole('button', { name: 'New note' }).parentElement!;
+  const title = () => result.queryByRole('heading', { name: host.title() });
+  /**
+   * The view holding the bar's title, not the copy that measures it.
+   */
+  const titleBox = () =>
+    Array.from(row().children).find(
+      (child) =>
+        child.className.includes('flex-1') ||
+        child.className.includes('bottom-0'),
+    ) as HTMLElement;
+  const back = () => result.queryByRole('button', { name: host.backLabel() });
+  const page = () =>
+    Array.from(container.querySelectorAll('text'))
+      .map((text) => text.textContent ?? '')
+      .find((text) => text.endsWith(' page'));
+  const update = async (change: () => void) => {
+    change();
+    await waitForUpdate();
+  };
+  await until(() => page() === 'Notes page');
+  return {
+    ...result,
+    host,
+    injector,
+    state,
+    bar,
+    row,
+    leading,
+    trailing,
+    title,
+    titleBox,
+    back,
+    page,
+    update,
+  };
+};
+
+const style = (element: HTMLElement, name: string) =>
+  element.style.getPropertyValue(name);
+
+// The components' selectors aren't Lynx elements, so the renderer falls back
+// to a <view> for each and warns.
+beforeEach(() => {
+  vi.spyOn(console, 'warn').mockImplementation(() => {});
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  settings.reduceMotion.set(false);
+});
+
+describe('UiNavigationBar on iOS 26 and later', () => {
+  it('floats over the top of the content below the status bar, with no background', async () => {
+    const { bar, state, row } = await renderBar(IOS_26);
+    expect(bar().classList).toContain('absolute');
+    expect(bar().classList).toContain('top-0');
+    expect(bar().classList).toContain('pt-safe');
+    expect(bar().classList).not.toContain('bg-background');
+    expect(bar().querySelector('[shape="rounded"]')).toBeNull();
+    expect(row().className).toContain('h-[44px]');
+    expect(style(row(), 'padding-left')).toBe('16px');
+    // It tells the scroll view under it how much room it takes.
+    expect(state.topBar()?.height()).toBe(44);
+    expect(state.topBar()?.largeTitle()).toBeNull();
+  });
+
+  it('shows the title as a heading, with the leading items after the Back button and the rest at the end', async () => {
+    const { title, leading, trailing, row, host, update } =
+      await renderBar(IOS_26);
+    expect(title()?.className).toContain('font-semibold');
+    expect(title()?.className).toContain('text-center');
+    const ends = Array.from(row().children);
+    expect(ends.indexOf(leading())).toBeLessThan(ends.indexOf(trailing()));
+
+    await update(() => host.title.set('Inbox'));
+    expect(title()?.textContent).toBe('Inbox');
+  });
+
+  it('centers the title on the screen when it fits, or between the ends when it doesn’t', async () => {
+    const { row, leading, trailing, titleBox, container } =
+      await renderBar(IOS_26);
+    const copy = () =>
+      container.querySelector<HTMLElement>(
+        '[accessibility-elements-hidden="true"] text',
+      )!;
+    const lay = async (element: Element, width: number) => {
+      fireEvent.layoutchange(element, { detail: { width, height: 44 } });
+      await waitForUpdate();
+    };
+    await lay(row(), 402);
+    await lay(leading(), 44);
+    await lay(trailing(), 100);
+    await lay(copy(), 80);
+    // Clear of the wider end on both sides: 16 + 100 + 8.
+    expect(style(titleBox(), 'left')).toBe('124px');
+    expect(style(titleBox(), 'right')).toBe('124px');
+
+    // Too wide for that: between the ends.
+    await lay(copy(), 200);
+    expect(style(titleBox(), 'left')).toBe('68px');
+    expect(style(titleBox(), 'right')).toBe('124px');
+  });
+
+  it('shows a Back button while there’s a screen to go back to, and goes back through the router', async () => {
+    const { back, injector, page, host, update } = await renderBar(IOS_26);
+    expect(back()).toBeNull();
+
+    await injector.get(Router).navigateByUrl('/note');
+    await until(() => page() === 'Note page');
+    await update(() => host.backLabel.set('Notes'));
+    expect(back()).not.toBeNull();
+    expect(host.bar().canGoBack()).toBe(true);
+
+    fireEvent.tap(back()!);
+    await until(() => page() === 'Notes page');
+    expect(back()).toBeNull();
+  });
+
+  it('hides the Back button on a screen that asks', async () => {
+    const { back, injector, page, host, update } = await renderBar(IOS_26);
+    await injector.get(Router).navigateByUrl('/note');
+    await until(() => page() === 'Note page');
+    await update(() => host.backButtonHidden.set(true));
+    expect(back()).toBeNull();
+  });
+
+  it('goes to backRoute in place of the screen when there’s no history', async () => {
+    const { back, injector, page, host, update } = await renderBar(IOS_26);
+    await injector.get(Router).navigateByUrl('/note', { replaceUrl: true });
+    await until(() => page() === 'Note page');
+    expect(back()).toBeNull();
+
+    await update(() => host.backRoute.set('/'));
+    fireEvent.tap(back()!);
+    await until(() => page() === 'Notes page');
+    // It replaced the note: there's still nothing to go back to.
+    expect(host.bar().canGoBack()).toBe(false);
+    expect(injector.get(Location).path()).toBe('');
+  });
+
+  it('does nothing on goBack() with nowhere to go', async () => {
+    const { host, page } = await renderBar(IOS_26);
+    host.bar().goBack();
+    await waitForUpdate();
+    expect(page()).toBe('Notes page');
+  });
+
+  it('starts the title large at the top of the content, and shows it once it has scrolled under', async () => {
+    const { host, state, update, title, titleBox, getAllByRole } =
+      await renderBar(IOS_26);
+    await update(() => host.largeTitle.set(true));
+    // Without a scroll view there's no large title, so the bar keeps it.
+    expect(title()).not.toBeNull();
+    expect(state.topBar()?.largeTitle()).toBe('Notes');
+
+    await update(() => host.scroll.set(true));
+    // The scroll view draws the large title; the bar's hides.
+    expect(getAllByRole('heading', { name: 'Notes' })).toHaveLength(1);
+    expect(style(titleBox(), 'opacity')).toBe('0');
+    expect(style(titleBox(), 'transition')).toContain('opacity');
+
+    await update(() => state.largeTitleUnder.set(true));
+    expect(getAllByRole('heading', { name: 'Notes' })).toHaveLength(2);
+    expect(style(titleBox(), 'opacity')).toBe('1');
+  });
+
+  it('shows the title at once under Reduce Motion', async () => {
+    const { host, update, titleBox } = await renderBar(IOS_26);
+    await update(() => {
+      host.largeTitle.set(true);
+      host.scroll.set(true);
+      settings.reduceMotion.set(true);
+    });
+    expect(style(titleBox(), 'transition')).toBe('none');
+  });
+
+  it('takes extra classes', async () => {
+    const { host, update, bar } = await renderBar(IOS_26);
+    await update(() => host.barClass.set('z-10'));
+    expect(bar().classList).toContain('z-10');
+  });
+});
+
+describe('UiNavigationBar before iOS 26', () => {
+  it("is clear at the top of the content, and on the bars' chrome material with a hairline once content scrolls under it", async () => {
+    const { bar, state, update, row } = await renderBar(IOS_18);
+    const material = () => bar().querySelector('[shape="rounded"]');
+    expect(material()).toBeNull();
+    expect(style(row(), 'padding-left')).toBe('8px');
+
+    await update(() => state.scrolledUnderTop.set(true));
+    expect(material()?.getAttribute('blur-material')).toBe('chrome');
+    expect(material()?.getAttribute('blur-effect')).toBe('extra-light');
+    expect(bar().querySelector('.h-\\[0\\.5px\\]')).not.toBeNull();
+  });
+
+  it('shows the previous screen’s title beside the Back button’s chevron', async () => {
+    const { back, injector, page, host, update } = await renderBar(IOS_18);
+    await injector.get(Router).navigateByUrl('/note');
+    await until(() => page() === 'Note page');
+    await update(() => host.backLabel.set('Notes'));
+    expect(back()?.querySelector('text')?.textContent).toBe('Notes');
+  });
+});
+
+describe('UiNavigationBar on Android', () => {
+  it('is Material 3’s small top app bar, the title at the start', async () => {
+    const { bar, row, state, title, titleBox, leading, trailing, container } =
+      await renderBar(ANDROID);
+    expect(row().className).toContain('h-[64px]');
+    expect(state.topBar()?.height()).toBe(64);
+    expect(bar().classList).toContain('bg-background');
+    expect(title()?.className).toContain('text-[22px]');
+    expect(title()?.className).not.toContain('text-center');
+    expect(titleBox().className).toContain('flex-1');
+    expect(leading().className).toContain('min-w-[12px]');
+    expect(trailing().className).toContain('pr-[4px]');
+    // Laid out in the row, so it measures no copy.
+    expect(
+      container.querySelector('[accessibility-elements-hidden="true"]'),
+    ).toBeNull();
+  });
+
+  it('centers the title in the center-aligned app bar', async () => {
+    const { host, update, title, titleBox, leading } = await renderBar(ANDROID);
+    await update(() => host.titleCentered.set(true));
+    expect(title()?.className).toContain('text-center');
+    expect(titleBox().className).toContain('top-0');
+    expect(leading().className).not.toContain('min-w-[12px]');
+  });
+
+  it('turns to the surface container color as content scrolls under it', async () => {
+    const { bar, state, update } = await renderBar(ANDROID);
+    expect(style(bar(), 'transition')).toContain('background-color');
+    await update(() => state.scrolledUnderTop.set(true));
+    expect(bar().classList).toContain('bg-secondary');
+
+    await update(() => settings.reduceMotion.set(true));
+    expect(style(bar(), 'transition')).toBe('');
+  });
+});
+
+/**
+ * A bar in an app without the router.
+ */
+@Component({
+  imports: [LYNX_ELEMENTS, UiNavigationBar],
+  template: `<ui-navigation-bar title="Settings" backRoute="/" />`,
+})
+class PlainBarHost {
+  readonly bar = viewChild.required(UiNavigationBar);
+}
+
+describe('UiNavigationBar with glass on Android', () => {
+  it('fades the content beneath it itself, as Android’s scroll view takes no mask', async () => {
+    const { bar } = await renderBar(ANDROID, [
+      provideGlass({ android: 'glass' }),
+    ]);
+    const fade = style(bar(), 'background-image');
+    expect(fade).toContain('linear-gradient(to bottom');
+    expect(fade).toContain('var(--background-rgb)');
+    // It isn't Material's bar.
+    expect(bar().classList).not.toContain('bg-background');
+  });
+});
+
+describe('UiNavigationBar without the Lynx router', () => {
+  it('has no history to go back through without the router', async () => {
+    const result = await render(PlainBarHost, {
+      providers: [
+        { provide: LynxSystemInfo, useValue: IOS_26 },
+        { provide: LynxAccessibilitySettings, useValue: settings },
+      ],
+    });
+    const host = result.componentRef.instance as PlainBarHost;
+    expect(host.bar().canGoBack()).toBe(false);
+    // backRoute still shows the button, for an app with routes of its own.
+    expect(result.getByRole('button', { name: 'Back' })).toBeTruthy();
+  });
+
+  it('has no Back button with a LocationStrategy of the app’s own', async () => {
+    const { back, host } = await renderBar(IOS_26, [
+      { provide: LocationStrategy, useClass: MockLocationStrategy },
+    ]);
+    expect(back()).toBeNull();
+    expect(host.bar().canGoBack()).toBe(false);
+  });
+});