@blotch/dolan 22.2.2 → 22.2.4

package/dist/ui/components/action-sheet/action-sheet.ts

@@ -1,5 +1,6 @@
 import {
   type ElementRef,
+  type OnDestroy,
   Component,
   ViewEncapsulation,
   computed,
@@ -29,7 +30,6 @@ import { cn } from '../../utils/cn';
 
 @Component({
   selector: 'ui-action-sheet',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `
@@ -37,9 +37,9 @@ import { cn } from '../../utils/cn';
       <!-- bg-black/50 dims the content behind the sheet. The fadeIn/fadeOut in
            #animateIn/#animateOut already tween this element's opacity over
            DURATION.normal, so the dim animates in lockstep with the panel slide —
-           matching the dialog/bottom-sheet backdrop. A named color with an opacity
-           modifier is required here: bg-black/50 compiles to rgb(0 0 0 / 0.5),
-           which Lynx accepts, whereas opacity modifiers on semantic tokens don't. -->
+           matching the dialog/bottom-sheet backdrop. It's a named color, not a
+           theme one, because the dim is black in light and dark mode alike;
+           bg-black/50 compiles to rgb(0 0 0 / 0.5), which Lynx accepts. -->
       <view
         #backdrop
         class="h-full w-full bg-black/50"
@@ -49,6 +49,7 @@ import { cn } from '../../utils/cn';
           #panel
           [class]="panelClass()"
           [style]="panelPositionStyle()"
+          [accessibility-exclusive-focus]="overlayVisible()"
           (catchtap)="onPanelTap()"
         >
           <!-- The elevation shadow is an inline rgba() box-shadow rather than a
@@ -72,7 +73,7 @@ import { cn } from '../../utils/cn';
     </overlay>
   `,
 })
-export class UiActionSheet {
+export class UiActionSheet implements OnDestroy {
   readonly open = model(false);
   readonly userClass = input<string>('', { alias: 'class' });
 
@@ -91,27 +92,36 @@ export class UiActionSheet {
       : 'position: fixed; overflow: visible; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 999; display: none;',
   );
 
-  readonly backdropRef = viewChild<ElementRef>('backdrop');
-  readonly panelRef = viewChild<ElementRef>('panel');
+  // Required: both are always in the template (the overlay is hidden, never
+  // removed), and nothing reads them before the first render.
+  readonly backdropRef = viewChild.required<ElementRef>('backdrop');
+  readonly panelRef = viewChild.required<ElementRef>('panel');
   #backdropAnim?: AnimationHandle;
   #panelAnim?: AnimationHandle;
   #hasBeenOpen = false;
+  // The open and close sequences' pending timers, so ngOnDestroy can stop
+  // them.
+  readonly #timers = new Set<ReturnType<typeof setTimeout>>();
 
-  constructor() {
-    // `#hasBeenOpen` prevents the close animation from running on the initial
-    // effect evaluation when `open` starts as false. Without this guard, the
-    // first run would call #doClose() and emit `closed` before the action
-    // sheet has ever been opened.
-    effect(() => {
-      const isOpen = this.open();
-      if (isOpen) {
-        this.#hasBeenOpen = true;
-        this.#doOpen();
-      } else if (this.#hasBeenOpen) {
-        this.#doClose();
-      }
-    });
-  }
+  /**
+   * Opens or closes the action sheet as `open` changes. A field rather than a
+   * constructor: Angular's test build keeps a function for a constructor that
+   * nothing calls, which an app's coverage report would show as uncovered.
+   *
+   * `#hasBeenOpen` prevents the close animation from running on the initial
+   * effect evaluation when `open` starts as false. Without this guard, the
+   * first run would call #doClose() and emit `closed` before the action
+   * sheet has ever been opened.
+   */
+  protected readonly openOrClose = effect(() => {
+    const isOpen = this.open();
+    if (isOpen) {
+      this.#hasBeenOpen = true;
+      this.#doOpen();
+    } else if (this.#hasBeenOpen) {
+      this.#doClose();
+    }
+  });
 
   protected readonly panelClass = computed(() =>
     cn('w-full flex-col gap-2 px-4 pb-6 flex', this.userClass()),
@@ -137,15 +147,37 @@ export class UiActionSheet {
    */
   protected onPanelTap(): void {}
 
+  /**
+   * The action sheet can be destroyed while its open or close sequence is still
+   * running, for example by an `@if` around it or a route change right after
+   * closing it. The rest of the sequence then ran on the destroyed component:
+   * it animated detached elements and emitted `closed` from a destroyed
+   * output, which Angular warns about in dev builds (NG0953).
+   */
+  ngOnDestroy(): void {
+    for (const timer of this.#timers) clearTimeout(timer);
+  }
+
+  /**
+   * `setTimeout`, tracked so that ngOnDestroy can cancel it.
+   */
+  #later(callback: () => void, ms: number): void {
+    const timer = setTimeout(() => {
+      this.#timers.delete(timer);
+      callback();
+    }, ms);
+    this.#timers.add(timer);
+  }
+
   /**
    * Two-phase open: make overlay visible first (so native elements exist in
    * the tree), then animate on the next frame. See nav-drawer for the same
    * pattern — Lynx animate() requires elements to be mounted before use.
    */
   #doOpen(): void {
-    setTimeout(() => {
+    this.#later(() => {
       this.overlayVisible.set(true);
-      setTimeout(() => this.#animateIn(), 0);
+      this.#later(() => this.#animateIn(), 0);
     }, 0);
   }
 
@@ -154,9 +186,9 @@ export class UiActionSheet {
    * causing elements to disappear before the animation finishes.
    */
   #doClose(): void {
-    setTimeout(() => {
+    this.#later(() => {
       this.#animateOut();
-      setTimeout(() => {
+      this.#later(() => {
         this.overlayVisible.set(false);
         this.closed.emit();
       }, DURATION.normal + 20);
@@ -164,14 +196,18 @@ export class UiActionSheet {
   }
 
   #animateIn(): void {
-    const backdrop = this.backdropRef()?.nativeElement;
-    const panel = this.panelRef()?.nativeElement;
-    if (!backdrop || !panel) return;
+    const backdrop = this.backdropRef().nativeElement;
+    const panel = this.panelRef().nativeElement;
 
     this.#backdropAnim?.cancel();
     this.#panelAnim?.cancel();
 
     this.#backdropAnim = fadeIn(backdrop, { duration: DURATION.normal });
+    // Move a screen reader into the panel. It would otherwise stay on whatever
+    // opened it, which is now behind the overlay. With the panel's
+    // accessibility-exclusive-focus (see the template), it then can't leave
+    // the panel until it closes.
+    panel.invoke?.('requestAccessibilityFocus');
     this.#panelAnim = slideIn(panel, 'up', {
       duration: DURATION.slow,
       easing: EASING.sheet,
@@ -179,9 +215,8 @@ export class UiActionSheet {
   }
 
   #animateOut(): void {
-    const backdrop = this.backdropRef()?.nativeElement;
-    const panel = this.panelRef()?.nativeElement;
-    if (!backdrop || !panel) return;
+    const backdrop = this.backdropRef().nativeElement;
+    const panel = this.panelRef().nativeElement;
 
     this.#backdropAnim?.cancel();
     this.#panelAnim?.cancel();
@@ -196,7 +231,6 @@ export class UiActionSheet {
 
 @Component({
   selector: 'ui-action-sheet-title',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `
@@ -219,7 +253,6 @@ export class UiActionSheetTitle {
 
 @Component({
   selector: 'ui-action-sheet-item',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `
@@ -246,7 +279,8 @@ export class UiActionSheetItem {
 
   readonly pressed = output<void>();
 
-  readonly containerRef = viewChild<ElementRef>('container');
+  // Required: the container is always in the template.
+  readonly containerRef = viewChild.required<ElementRef>('container');
   #pressAnim?: AnimationHandle;
 
   protected readonly containerClass = computed(() =>
@@ -266,19 +300,19 @@ export class UiActionSheetItem {
   protected onPressStart(): void {
     this.#pressAnim?.cancel();
     this.#pressAnim = pressDown(
-      this.containerRef()?.nativeElement,
+      this.containerRef().nativeElement,
       SCALE.pressDownLight,
     );
   }
 
   protected onPressEnd(): void {
     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);
+    this.#pressAnim = pressRelease(this.containerRef().nativeElement);
   }
 
   protected onTap(): void {
@@ -289,7 +323,6 @@ export class UiActionSheetItem {
 
 @Component({
   selector: 'ui-action-sheet-cancel',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `
@@ -315,7 +348,8 @@ export class UiActionSheetCancel {
   readonly label = input('Cancel');
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly containerRef = viewChild<ElementRef>('container');
+  // Required: the container is always in the template.
+  readonly containerRef = viewChild.required<ElementRef>('container');
   #pressAnim?: AnimationHandle;
 
   protected readonly containerClass = computed(() =>
@@ -332,19 +366,19 @@ export class UiActionSheetCancel {
   protected onPressStart(): void {
     this.#pressAnim?.cancel();
     this.#pressAnim = pressDown(
-      this.containerRef()?.nativeElement,
+      this.containerRef().nativeElement,
       SCALE.pressDownLight,
     );
   }
 
   protected onPressEnd(): void {
     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);
+    this.#pressAnim = pressRelease(this.containerRef().nativeElement);
   }
 
   protected onTap(): void {

package/dist/ui/components/alert/alert.test.ts

@@ -1,19 +1,38 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
-import { describe, expect, it } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
-import { UiAlert, alertVariants } from './alert';
+import { describe, expect, it, vi } from 'vitest';
+import { lynxMainThread } from '../../../test-utils/lynx-main-thread';
+import { type AlertVariant, UiAlert, alertVariants } from './alert';
 
 @Component({
-  standalone: true,
   imports: [UiAlert, LYNX_ELEMENTS],
-  template: `<ui-alert [variant]="variant"><text>Message</text></ui-alert>`,
+  template: `
+    <ui-alert
+      [variant]="variant()"
+      [title]="title()"
+      [description]="description()"
+      class="mt-2"
+    >
+      <text>Message</text>
+    </ui-alert>
+  `,
 })
 class AlertHost {
-  variant: 'default' | 'destructive' = 'default';
+  readonly variant = signal<AlertVariant>('default');
+  readonly title = signal('');
+  readonly description = signal('');
 }
 
+const renderAlert = async () => {
+  const result = await render(AlertHost);
+  return {
+    ...result,
+    host: result.componentRef.instance as AlertHost,
+    alert: () => result.container.querySelector('.rounded-lg')!,
+  };
+};
+
 describe('alertVariants', () => {
   it('returns default variant classes', () => {
     expect(alertVariants()).toContain('bg-background');
@@ -27,22 +46,51 @@ describe('alertVariants', () => {
 });
 
 describe('UiAlert', () => {
-  it('renders projected content', async () => {
-    const { getByText } = await render(AlertHost);
+  it('renders projected content, without a title or description', async () => {
+    const { alert, getByText } = await renderAlert();
     expect(getByText('Message')).toBeTruthy();
+    expect(alert().querySelectorAll('text')).toHaveLength(1);
+    expect(alert().classList).toContain('mt-2');
   });
 
-  it('renders title and description slots when their inputs are set', async () => {
-    // JIT template bindings don't propagate through input(); drive the signals
-    // directly so the @if(title()) / @if(description()) branches render and
-    // their computed class functions run.
-    const { componentRef, container } = await render(UiAlert);
-    const inst = componentRef.instance as UiAlert;
-    setInputSignal(inst.title, 'Heads up');
-    setInputSignal(inst.description, 'Your download is ready.');
+  it('renders the title and description when set', async () => {
+    const { host, getByText } = await renderAlert();
+    host.title.set('Heads up');
+    host.description.set('Your download is ready.');
     await waitForUpdate();
+    expect(getByText('Heads up').getAttribute('class')).toContain(
+      'text-foreground',
+    );
+    expect(
+      getByText('Your download is ready.').getAttribute('class'),
+    ).toContain('text-muted-foreground');
+  });
+
+  it('colors every part for the destructive variant', async () => {
+    const { host, alert, getByText } = await renderAlert();
+    host.variant.set('destructive');
+    host.title.set('Error');
+    host.description.set('Something went wrong.');
+    await waitForUpdate();
+    expect(alert().classList).toContain('border-destructive');
+    expect(getByText('Error').classList).toContain('text-destructive');
+    expect(getByText('Something went wrong.').classList).toContain(
+      'text-destructive',
+    );
+  });
 
-    const texts = container.querySelectorAll('text');
-    expect(texts.length).toBeGreaterThanOrEqual(2);
+  it('reveals itself on first render', async () => {
+    const animate = vi.spyOn(lynxMainThread(), '__ElementAnimate');
+    const { alert } = await renderAlert();
+    expect(animate).toHaveBeenCalledWith(alert(), [
+      0, // Starts an animation.
+      expect.any(String),
+      [
+        { transform: 'translateY(4px)', opacity: 0 },
+        { transform: 'translateY(0)', opacity: 1 },
+      ],
+      expect.any(Object),
+    ]);
+    animate.mockRestore();
   });
 });

package/dist/ui/components/alert/alert.ts

@@ -17,9 +17,10 @@ export const alertVariants = cva('flex-col rounded-lg border p-4 flex', {
   variants: {
     variant: {
       default: 'border-border bg-background',
-      // Opacity modifiers on semantic colors don't work on Lynx (opaque rgba
-      // values with no separable channels): use a solid destructive border and
-      // the pre-composed translucent bg-destructive-subtle for the tint.
+      // A solid destructive border over red at 10%. The tint is the
+      // pre-composed bg-destructive-subtle, not bg-destructive/10: a modifier
+      // needs the theme's --destructive-rgb, which themes copied before it
+      // existed don't have.
       destructive: 'border-destructive bg-destructive-subtle',
     },
   },
@@ -75,20 +76,17 @@ export class UiAlert {
   readonly description = input<string>('');
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly containerRef = viewChild<ElementRef>('container');
+  readonly containerRef = viewChild.required<ElementRef>('container');
 
-  constructor() {
-    // Subtle entrance animation on first render
-    effect(() => {
-      const el = this.containerRef()?.nativeElement;
-      // revealIn calls el.animate() which is inert in jsdom — the animation
-      // never plays and the effect can't be verified from a JIT render test.
-      /* v8 ignore next 3 */
-      if (el) {
-        revealIn(el, { fromY: 4 });
-      }
-    });
-  }
+  /**
+   * Reveals the alert with a subtle entrance on first render. A field rather
+   * than a constructor: Angular's test build keeps a function for a
+   * constructor that nothing calls, which an app's coverage report would show
+   * as uncovered.
+   */
+  protected readonly entrance = effect(() => {
+    revealIn(this.containerRef().nativeElement, { fromY: 4 });
+  });
 
   protected readonly containerClass = computed(() =>
     cn(alertVariants({ variant: this.variant() }), this.userClass()),