@blotch/dolan 22.2.4 → 22.2.6

package/dist/ui/components/toggle/toggle.ts

@@ -2,7 +2,9 @@ import {
   type ElementRef,
   Component,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
+  contentChildren,
   inject,
   input,
   model,
@@ -17,6 +19,14 @@ import {
   pressRelease,
 } from '../../utils/animate';
 import { cn } from '../../utils/cn';
+import { UI_ICON_COLOR } from '../icon/icon-theme';
+import {
+  type SegmentedHost,
+  segmentPlace,
+  UI_SEGMENTED_HOST,
+  UiSegmentedControl,
+  UiSegmentedIndicator,
+} from '../segmented-control/segmented-control';
 
 const toggleVariants = cva('items-center rounded-md flex justify-center', {
   variants: {
@@ -43,9 +53,39 @@ export type ToggleSize = NonNullable<
   VariantProps<typeof toggleVariants>['size']
 >;
 
+/**
+ * A group's look: a toggle variant for every item, or `'segmented'` for the
+ * platform's segmented control (see UiToggleGroup).
+ */
+export type ToggleGroupVariant = ToggleVariant | 'segmented';
+
+/**
+ * `UiToggleGroupItem`, for the group's content query. A call rather than
+ * the class itself: for a class, Angular's test build keeps an arrow
+ * function that nothing calls, which an app's coverage report would show as
+ * uncovered.
+ */
+const itemType = () => UiToggleGroupItem;
+
+/**
+ * The group, as the segmented control it provides reads it. Named, not
+ * inline: the component's metadata keeps its own copy of an inline factory,
+ * which nothing calls.
+ */
+const toggleGroupHost = (): SegmentedHost => inject(UiToggleGroup);
+
+/**
+ * The color icons projected into an item draw with (see UI_ICON_COLOR): a
+ * Material segment's content color, or else whatever surrounds the group.
+ */
+const itemIconColor = () => {
+  const item = inject(UiToggleGroupItem);
+  const surrounding = inject(UI_ICON_COLOR, { optional: true, skipSelf: true });
+  return computed(() => item.iconColor() ?? surrounding?.());
+};
+
 @Component({
   selector: 'ui-toggle',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `
@@ -68,7 +108,7 @@ export class UiToggle {
   readonly pressed = model(false);
   readonly variant = input<ToggleVariant>('default');
   readonly size = input<ToggleSize>('default');
-  readonly disabled = input(false);
+  readonly disabled = input(false, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
   readonly containerRef = viewChild<ElementRef>('container');
@@ -106,27 +146,77 @@ export class UiToggle {
   }
 }
 
+/**
+ * A row of toggles where one (`type="single"`) or several
+ * (`type="multiple"`) are pressed. Its `variant` and `size` style every item.
+ *
+ * `variant="segmented"` draws the platform's segmented control instead
+ * (see UiSegmentedControl): iOS 26's capsule with a thumb that lifts into
+ * Liquid Glass as it slides between the items, iOS 13 to 18's raised thumb
+ * before iOS 26, and Material 3 Expressive's connected button group on
+ * Android. The items share the row's width. A single selection has one
+ * indicator that slides, which can also be dragged across the items, and
+ * keeps one item selected: tapping it again doesn't clear it, as a
+ * segmented control's segment doesn't. In a multiple selection each pressed
+ * item draws its own thumb, and nothing slides: one indicator can't mark
+ * several items. `size` and the other variants don't apply to it.
+ */
 @Component({
   selector: 'ui-toggle-group',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
+  imports: [LYNX_ELEMENTS, UiSegmentedIndicator],
   encapsulation: ViewEncapsulation.None,
+  providers: [
+    UiSegmentedControl,
+    { provide: UI_SEGMENTED_HOST, useFactory: toggleGroupHost },
+  ],
+  // The mouse leaving the row lets go of an indicator dragged in the web
+  // preview, where a drag gets no touchcancel.
   template: `
-    <view [class]="containerClass()">
+    <view
+      [class]="containerClass()"
+      (bindmouseleave)="segmentedControl.cancel()"
+    >
+      @if (segmentedControl.underlay()) {
+        <ui-segmented-indicator />
+      }
       <ng-content />
     </view>
   `,
 })
-export class UiToggleGroup {
+export class UiToggleGroup implements SegmentedHost {
   readonly type = input<'single' | 'multiple'>('single');
   readonly value = model<string[]>([]);
-  readonly variant = input<ToggleVariant>('default');
+  /**
+   * `'default'` or `'outline'` for every item, or `'segmented'` for the
+   * platform's segmented control.
+   */
+  readonly variant = input<ToggleGroupVariant>('default');
   readonly size = input<ToggleSize>('default');
-  readonly disabled = input(false);
+  readonly disabled = input(false, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
+  protected readonly segmentedControl = inject(UiSegmentedControl);
+  /** The items in the group, in order. */
+  readonly items = contentChildren(itemType(), { descendants: true });
+
+  /** Whether the group is drawn as a segmented control (SegmentedHost). */
+  readonly segmented = computed(() => this.variant() === 'segmented');
+  /** The items' values, in order (SegmentedHost). */
+  readonly segmentValues = computed(() =>
+    this.items().map((item) => item.itemValue()),
+  );
+  /** The pressed items' values (SegmentedHost). */
+  readonly selectedValues = this.value.asReadonly();
+  /** Whether several items can be pressed (SegmentedHost). */
+  readonly multiple = computed(() => this.type() === 'multiple');
+
   protected readonly containerClass = computed(() =>
-    cn('flex-row items-center gap-1 flex', this.userClass()),
+    cn(
+      this.segmented()
+        ? this.segmentedControl.trackClass()
+        : 'flex-row items-center gap-1 flex',
+      this.userClass(),
+    ),
   );
 
   toggle(val: string): void {
@@ -135,8 +225,9 @@ export class UiToggleGroup {
       const current = this.value();
       // Single mode allows deselection: tapping the active item again clears
       // the selection to []. This differs from a radio group, which requires
-      // one item to always be selected.
-      this.value.set(current.includes(val) ? [] : [val]);
+      // one item to always be selected. A segmented control's segment stays
+      // selected, as on iOS and Android.
+      this.value.set(current.includes(val) && !this.segmented() ? [] : [val]);
     } else {
       this.value.update((list) =>
         list.includes(val) ? list.filter((v) => v !== val) : [...list, val],
@@ -144,6 +235,14 @@ export class UiToggleGroup {
     }
   }
 
+  /**
+   * Selects one item, as dragging the segmented control's indicator onto it
+   * does (SegmentedHost).
+   */
+  select(val: string): void {
+    this.value.set([val]);
+  }
+
   isSelected(val: string): boolean {
     return this.value().includes(val);
   }
@@ -151,68 +250,184 @@ export class UiToggleGroup {
 
 @Component({
   selector: 'ui-toggle-group-item',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
+  // Icons projected into the item inject this: they're declared inside it.
+  providers: [{ provide: UI_ICON_COLOR, useFactory: itemIconColor }],
+  host: {
+    '[class]': 'hostClass()',
+    // The segmented control places its indicator from each item's width.
+    '(bindlayoutchange)': 'measure($event)',
+  },
   template: `
+    <!-- A labeled item is selected to a screen reader while pressed, which
+         iOS reads. lynxAccessibilityTraits adds the trait to button on iOS,
+         and leaves Android, which reads one trait, with button. -->
     <view
       #container
       [class]="containerClass()"
-      (bindtouchstart)="onPressStart()"
+      [style]="containerStyle()"
+      [attr.accessibility-element]="accessibilityLabel() ? 'true' : null"
+      [attr.accessibility-traits]="accessibilityLabel() ? 'button' : null"
+      [attr.accessibility-label]="accessibilityLabel() || null"
+      [lynxAccessibilityTraits]="{ selected: selectedTrait() }"
+      (bindtouchstart)="onPressStart($event)"
+      (bindtouchmove)="onPressMove($event)"
       (bindtouchend)="onPressEnd()"
       (bindtouchcancel)="onPressCancel()"
-      (bindmousedown)="onPressStart()"
+      (bindmousedown)="onPressStart($event)"
+      (bindmousemove)="onPressMove($event)"
       (bindmouseup)="onPressEnd()"
-      (bindmouseleave)="onPressCancel()"
+      (bindmouseleave)="onPointerLeave()"
       (bindtap)="onTap()"
     >
+      @if (stateLayerClass(); as stateLayer) {
+        <view [class]="stateLayer"></view>
+      }
       <ng-content />
     </view>
   `,
 })
 export class UiToggleGroupItem {
   readonly #group = inject(UiToggleGroup);
+  readonly #segmented = inject(UiSegmentedControl);
 
   readonly itemValue = input.required<string>({ alias: 'value' });
+  /**
+   * What a screen reader says for the item. With it, the item is one
+   * accessibility element, a button that's `selected` while pressed. An
+   * item of only an icon needs one.
+   */
+  readonly accessibilityLabel = input<string | undefined>(undefined, {
+    alias: 'accessibility-label',
+  });
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly containerRef = viewChild<ElementRef>('container');
+  // Required: always in the template.
+  readonly containerRef = viewChild.required<ElementRef>('container');
   #pressAnim?: AnimationHandle;
 
   protected readonly isSelected = computed(() =>
     this.#group.isSelected(this.itemValue()),
   );
+  /** Only a labeled item is an accessibility element to be `selected`. */
+  protected readonly selectedTrait = computed(
+    () => !!this.accessibilityLabel() && this.isSelected(),
+  );
 
-  protected readonly containerClass = computed(() =>
-    cn(
+  /** Whether the item is a segment of a segmented control. */
+  readonly #segment = computed(() => this.#segmented.enabled());
+
+  /**
+   * The color of icons projected into the item, as a token, or undefined
+   * for the surrounding one. A Material segment's content takes the color
+   * of its fill's content.
+   */
+  readonly iconColor = computed(() =>
+    this.#segment() ? this.#segmented.iconColor(this.itemValue()) : undefined,
+  );
+
+  /**
+   * A segment's host is the track's flex item, an equal share of it. Angular
+   * puts the app's static `class` on the host as well as on the item, so the
+   * two are merged here: `class="flex-[2]"` makes a wider segment.
+   */
+  protected readonly hostClass = computed(() =>
+    this.#segment()
+      ? cn(this.#segmented.segmentHostClass, this.userClass())
+      : '',
+  );
+
+  protected readonly containerClass = computed(() => {
+    if (this.#segment()) {
+      return cn(
+        this.#segmented.segmentClass(
+          this.itemValue(),
+          segmentPlace(this.#group.items(), this),
+        ),
+        this.userClass(),
+      );
+    }
+    return cn(
       toggleVariants({
-        variant: this.#group.variant(),
+        // The group's variant is a toggle variant unless it's segmented.
+        variant: this.#group.variant() as ToggleVariant,
         size: this.#group.size(),
       }),
       this.isSelected() ? 'bg-accent' : 'bg-transparent',
       this.#group.disabled() && 'opacity-50',
       this.userClass(),
-    ),
+    );
+  });
+
+  protected readonly containerStyle = computed(() =>
+    this.#segment() ? this.#segmented.segmentStyle(this.itemValue()) : null,
   );
 
-  protected onPressStart(): void {
+  protected readonly stateLayerClass = computed(() =>
+    this.#segment() ? this.#segmented.stateLayerClass(this.itemValue()) : null,
+  );
+
+  protected measure(event: unknown): void {
+    this.#segmented.measure(this.itemValue(), event);
+  }
+
+  /**
+   * A press. A segment's touches go to the segmented control, which draws
+   * their feedback and moves its indicator; other items shrink under the
+   * finger.
+   */
+  protected onPressStart(event: unknown): void {
     if (this.#group.disabled()) return;
+    if (this.#segment()) {
+      this.#segmented.press(this.itemValue(), event);
+      return;
+    }
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressDown(this.containerRef()?.nativeElement);
+    this.#pressAnim = pressDown(this.containerRef().nativeElement);
+  }
+
+  protected onPressMove(event: unknown): void {
+    this.#segmented.move(event);
   }
 
   protected onPressEnd(): void {
     if (this.#group.disabled()) return;
+    if (this.#segment()) {
+      this.#segmented.release();
+      return;
+    }
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+    this.#pressAnim = pressRelease(this.containerRef().nativeElement);
   }
 
   protected onPressCancel(): void {
-    this.#pressAnim?.cancel();
-    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+    if (this.#segment()) {
+      this.#segmented.cancel();
+      return;
+    }
+    this.#release();
+  }
+
+  /**
+   * The mouse leaving one segment doesn't end a drag across the others.
+   */
+  protected onPointerLeave(): void {
+    if (this.#segment()) {
+      this.#segmented.leave(this.itemValue());
+      return;
+    }
+    this.#release();
   }
 
   protected onTap(): void {
-    this.#group.toggle(this.itemValue());
+    if (this.#segmented.tap(this.itemValue())) {
+      this.#group.toggle(this.itemValue());
+    }
+  }
+
+  #release(): void {
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressRelease(this.containerRef().nativeElement);
   }
 }

package/dist/ui/components/toolbar/bar-scroll.test.ts

@@ -0,0 +1,310 @@
+import { Component, signal } from '@angular/core';
+import {
+  fireEvent,
+  render,
+  waitForUpdate,
+} from '@blotch/angular-lynx-testing-library';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { fireLynxEvent } from '../../../test-utils/fire-lynx-event';
+import { provideGlass } from '../glass/glass-design';
+import { UiBarScroll, UiBarState } from './bar-scroll';
+
+@Component({
+  imports: [LYNX_ELEMENTS, UiBarScroll],
+  template: `
+    @if (first()) {
+      <scroll-view ui-bar-scroll id="first" scroll-orientation="vertical">
+        <view style="height: 2000px"></view>
+      </scroll-view>
+    }
+    @if (second()) {
+      <scroll-view ui-bar-scroll id="second" scroll-orientation="vertical">
+        <view style="height: 2000px"></view>
+      </scroll-view>
+    }
+  `,
+})
+class ScrollHost {
+  readonly first = signal(true);
+  readonly second = signal(false);
+}
+
+const IOS_26 = { platform: 'iOS', osVersion: '26.0' };
+const IOS_18 = { platform: 'iOS', osVersion: '18.5' };
+const ANDROID = { platform: 'Android', osVersion: '15' };
+const WEB = { platform: 'web', osVersion: '' };
+
+/**
+ * The bars a screen would have, as a navigation bar and a toolbar say.
+ */
+const topBar = (largeTitle: string | null = null) => ({
+  height: signal(44),
+  largeTitle: signal(largeTitle),
+});
+const bottomBar = () => ({ height: signal(52) });
+
+const renderScroll = async (
+  platform: { platform: string; osVersion: string } = IOS_26,
+) => {
+  vi.stubGlobal('SystemInfo', platform);
+  const result = await render(ScrollHost);
+  const host = result.componentRef.instance as ScrollHost;
+  const state = result.componentRef.injector.get(UiBarState);
+  const scrollView = (id = 'first') =>
+    result.container.querySelector<HTMLElement>(`#${id}`)!;
+  /**
+   * The spacers the scroll view puts at its ends for the bars.
+   */
+  const topSpacer = () => scrollView().firstElementChild as HTMLElement;
+  const bottomSpacer = () => scrollView().lastElementChild as HTMLElement;
+  const update = async (change: () => void) => {
+    change();
+    await waitForUpdate();
+  };
+  /**
+   * Scrolls the content to `scrollTop`, as Lynx reports it.
+   */
+  const scrollTo = (scrollTop: number, id = 'first') =>
+    fireEvent.scroll(scrollView(id), {
+      detail: { scrollTop, scrollHeight: 2000 },
+    });
+  /**
+   * Lays the scroll view out `height` px tall, and its spacers.
+   */
+  const layOut = async (height: number, top = 0, bottom = 0) => {
+    fireEvent.layoutchange(scrollView(), { detail: { width: 402, height } });
+    fireEvent.layoutchange(topSpacer(), {
+      detail: { width: 402, height: top },
+    });
+    fireEvent.layoutchange(bottomSpacer(), {
+      detail: { width: 402, height: bottom },
+    });
+    await waitForUpdate();
+  };
+  return {
+    ...result,
+    host,
+    state,
+    scrollView,
+    topSpacer,
+    bottomSpacer,
+    update,
+    scrollTo,
+    layOut,
+  };
+};
+
+/**
+ * The scroll view's mask as [how much shows, where] stops, however the DOM
+ * writes it back: jsdom versions differ, writing opaque black as
+ * `rgb(0, 0, 0)` and leaving out the default `to bottom`.
+ */
+const maskStops = (element: HTMLElement): [number, string][] =>
+  Array.from(
+    element.style
+      .getPropertyValue('mask-image')
+      .matchAll(
+        /rgba?\(0, 0, 0(?:, ([\d.]+))?\) (calc\([^)]*\)|[\d.]+(?:%|px))/g,
+      ),
+    ([, alpha, at]): [number, string] => [
+      alpha === undefined ? 1 : Number(alpha),
+      at,
+    ],
+  );
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('UiBarScroll', () => {
+  it('makes no room and draws no edge without bars over it', async () => {
+    const { topSpacer, bottomSpacer, scrollView, layOut, queryByRole } =
+      await renderScroll();
+    await layOut(800);
+    expect(topSpacer().style.height).toBe('');
+    expect(bottomSpacer().style.height).toBe('');
+    expect(scrollView().style.getPropertyValue('mask-image')).toBe('');
+    expect(queryByRole('heading')).toBeNull();
+  });
+
+  it('starts the content below the top bar and ends it above the bottom bar', async () => {
+    const { state, topSpacer, bottomSpacer, update } = await renderScroll();
+    await update(() => {
+      state.topBar.set(topBar());
+      state.bottomBar.set(bottomBar());
+    });
+    // The status bar and the home indicator count too. jsdom versions write
+    // the sum in different orders.
+    expect(topSpacer().style.height).toContain('44px');
+    expect(topSpacer().style.height).toContain('env(safe-area-inset-top)');
+    expect(bottomSpacer().style.height).toContain('52px');
+    expect(bottomSpacer().style.height).toContain(
+      'env(safe-area-inset-bottom)',
+    );
+  });
+
+  it('puts the large title at the top of the content, and tells the bar when it has scrolled under', async () => {
+    const { state, update, getByRole, scrollTo } = await renderScroll();
+    await update(() => state.topBar.set(topBar('Inbox')));
+    const title = getByRole('heading', { name: 'Inbox' });
+    expect(title.className).toContain('text-[34px]');
+    expect(title.parentElement?.className).toContain('h-[52px]');
+
+    scrollTo(20);
+    expect(state.scrolledUnderTop()).toBe(true);
+    expect(state.largeTitleUnder()).toBe(false);
+    scrollTo(44);
+    expect(state.largeTitleUnder()).toBe(true);
+    scrollTo(0);
+    expect(state.scrolledUnderTop()).toBe(false);
+    expect(state.largeTitleUnder()).toBe(false);
+  });
+
+  it('draws Material’s large title, the medium flexible app bar’s', async () => {
+    const { state, update, getByRole, scrollTo } = await renderScroll(ANDROID);
+    await update(() => state.topBar.set(topBar('Inbox')));
+    const title = getByRole('heading', { name: 'Inbox' });
+    expect(title.className).toContain('text-[28px]');
+    expect(title.parentElement?.className).toContain('h-[48px]');
+    scrollTo(40);
+    expect(state.largeTitleUnder()).toBe(true);
+  });
+
+  it('says whether content continues under the bottom bar', async () => {
+    const { state, scrollView, scrollTo, layOut } = await renderScroll();
+    // Before the scroll view is laid out, it can't tell.
+    scrollTo(0);
+    expect(state.scrolledUnderBottom()).toBe(false);
+
+    await layOut(800);
+    expect(state.scrolledUnderBottom()).toBe(true);
+    scrollTo(1200);
+    expect(state.scrolledUnderBottom()).toBe(false);
+
+    // iOS and Android say when the content's height changes.
+    fireLynxEvent(scrollView(), 'contentsizechanged', {
+      detail: { scrollTop: 1200, scrollHeight: 2400 },
+    });
+    expect(state.scrolledUnderBottom()).toBe(true);
+  });
+
+  it('fades content out under glass bars, from their measured room', async () => {
+    const { state, scrollView, update, layOut } = await renderScroll();
+    await update(() => {
+      state.topBar.set(topBar());
+      state.bottomBar.set(bottomBar());
+    });
+    // Not laid out yet: no edge.
+    expect(scrollView().style.getPropertyValue('mask-image')).toBe('');
+
+    // 1000px tall, with 100px for the top bar and 50px for the bottom one.
+    await layOut(1000, 100, 50);
+    expect(scrollView().style.getPropertyValue('mask-image')).toContain(
+      'linear-gradient(',
+    );
+    expect(maskStops(scrollView())).toEqual([
+      [0, '0.00%'],
+      [0, '7.00%'],
+      [0.12, '9.00%'],
+      [1, '10.00%'],
+      [1, '95.00%'],
+      [0.12, '95.50%'],
+      [0, '96.50%'],
+      [0, '100.00%'],
+    ]);
+
+    // A top bar alone fades the top only, and a bottom bar alone the bottom.
+    await layOut(1000, 100, 0);
+    expect(maskStops(scrollView()).slice(-2)).toEqual([
+      [1, '10.00%'],
+      [1, '100.00%'],
+    ]);
+    await layOut(1000, 0, 50);
+    expect(maskStops(scrollView()).slice(0, 2)).toEqual([
+      [1, '0.00%'],
+      [1, '95.00%'],
+    ]);
+  });
+
+  it('fades with lengths in the web preview, whose scroll view reports no layout', async () => {
+    const { state, scrollView, update, topSpacer, bottomSpacer } =
+      await renderScroll(WEB);
+    await update(() => {
+      state.topBar.set(topBar());
+      state.bottomBar.set(bottomBar());
+    });
+    fireEvent.layoutchange(topSpacer(), {
+      detail: { width: 402, height: 100 },
+    });
+    await waitForUpdate();
+    expect(maskStops(scrollView())).toEqual([
+      [0, '0px'],
+      [0, '70px'],
+      [0.12, '90px'],
+      [1, '100px'],
+      [1, 'calc(100% - 0px)'],
+    ]);
+
+    fireEvent.layoutchange(bottomSpacer(), {
+      detail: { width: 402, height: 50 },
+    });
+    await waitForUpdate();
+    expect(maskStops(scrollView()).slice(-4)).toEqual([
+      [1, 'calc(100% - 50px)'],
+      [0.12, 'calc(100% - 45px)'],
+      [0, 'calc(100% - 35px)'],
+      [0, 'calc(100% - 0px)'],
+    ]);
+  });
+
+  it('leaves the edge to Android’s glass bars, as its scroll view takes no mask', async () => {
+    vi.stubGlobal('SystemInfo', ANDROID);
+    const result = await render(ScrollHost, {
+      providers: [provideGlass({ android: 'glass' })],
+    });
+    const state = result.componentRef.injector.get(UiBarState);
+    state.topBar.set(topBar());
+    await waitForUpdate();
+    const scrollView = result.container.querySelector<HTMLElement>('#first')!;
+    fireEvent.layoutchange(scrollView, {
+      detail: { width: 402, height: 1000 },
+    });
+    fireEvent.layoutchange(scrollView.firstElementChild!, {
+      detail: { width: 402, height: 100 },
+    });
+    await waitForUpdate();
+    expect(scrollView.style.getPropertyValue('mask-image')).toBe('');
+  });
+
+  it('leaves the edge to the bars before iOS 26, which mark it with their background', async () => {
+    const { state, scrollView, update, layOut } = await renderScroll(IOS_18);
+    await update(() => state.topBar.set(topBar()));
+    await layOut(1000, 100);
+    expect(scrollView().style.getPropertyValue('mask-image')).toBe('');
+  });
+
+  it('lets the last scroll view tell the bars, and resets them when it goes', async () => {
+    const { host, state, update, scrollTo } = await renderScroll();
+    scrollTo(200);
+    expect(state.scrolledUnderTop()).toBe(true);
+
+    // A second scroll view, a sheet's say, takes over.
+    await update(() => host.second.set(true));
+    scrollTo(0, 'second');
+    expect(state.scrolledUnderTop()).toBe(false);
+    scrollTo(200);
+    expect(state.scrolledUnderTop()).toBe(false);
+
+    // The first going leaves the second's state alone.
+    scrollTo(300, 'second');
+    await update(() => host.first.set(false));
+    expect(state.scrolledUnderTop()).toBe(true);
+    expect(state.content()).not.toBeNull();
+
+    // The last going resets it, for the next screen.
+    await update(() => host.second.set(false));
+    expect(state.content()).toBeNull();
+    expect(state.scrolledUnderTop()).toBe(false);
+  });
+});