@blotch/dolan 22.2.2 → 22.2.4

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

@@ -1,13 +1,30 @@
+import { Component } from '@angular/core';
 import { render } from '@blotch/angular-lynx-testing-library';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
+import { lynxMainThread } from '../../../test-utils/lynx-main-thread';
 import { UiSkeleton } from './skeleton';
 
+@Component({
+  imports: [UiSkeleton],
+  template: `<ui-skeleton class="h-4 w-32" />`,
+})
+class SkeletonHost {}
+
 describe('UiSkeleton', () => {
-  it('renders and starts the pulse animation', async () => {
-    // The `effect()` schedules pulse(el) once the view child resolves — just
-    // asserting no throw covers the effect body, host template, and computed
-    // class binding in a single mount.
-    const { container } = await render(UiSkeleton);
-    expect(container).toBeTruthy();
+  it('renders a muted placeholder with the given class', async () => {
+    const { container } = await render(SkeletonHost);
+    const skeleton = container.querySelector('.bg-muted');
+    expect(skeleton?.classList).toContain('h-4');
+    expect(skeleton?.classList).toContain('w-32');
+  });
+
+  it('pulses', async () => {
+    const animate = vi.spyOn(lynxMainThread(), '__ElementAnimate');
+    const { container } = await render(SkeletonHost);
+    expect(animate).toHaveBeenCalledWith(
+      container.querySelector('.bg-muted'),
+      expect.any(Array),
+    );
+    animate.mockRestore();
   });
 });

package/dist/ui/components/skeleton/skeleton.ts

@@ -9,7 +9,7 @@ import {
 } from '@angular/core';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 
-import { type AnimationHandle, pulse } from '../../utils/animate';
+import { pulse } from '../../utils/animate';
 import { cn } from '../../utils/cn';
 
 @Component({
@@ -22,22 +22,16 @@ import { cn } from '../../utils/cn';
 export class UiSkeleton {
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly skeletonRef = viewChild<ElementRef>('skeleton');
-  #pulseAnim?: AnimationHandle;
+  readonly skeletonRef = viewChild.required<ElementRef>('skeleton');
 
-  constructor() {
-    // Start the pulse animation once the element is available
-    effect(() => {
-      const el = this.skeletonRef()?.nativeElement;
-      // pulse() calls el.animate() which is inert in jsdom — coverage
-      // for the pulsing loop is exercised on-device.
-      /* v8 ignore start */
-      if (!el) return;
-      this.#pulseAnim?.cancel();
-      this.#pulseAnim = pulse(el);
-      /* v8 ignore stop */
-    });
-  }
+  /**
+   * Pulses the skeleton. 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 pulsing = effect(() => {
+    pulse(this.skeletonRef().nativeElement);
+  });
 
   protected readonly skeletonClass = computed(() =>
     cn('rounded-md bg-muted', this.userClass()),

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

@@ -1,39 +1,84 @@
+import { Component, signal } from '@angular/core';
 import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
-import { describe, expect, it } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { describe, expect, it, vi } from 'vitest';
+import { lynxMainThread } from '../../../test-utils/lynx-main-thread';
+import { ICON_LIGHT_COLORS } from '../icon/icon-theme';
 import { UiSpinner } from './spinner';
 
-describe('UiSpinner', () => {
-  it('renders the SVG at the default size', async () => {
-    const { container } = await render(UiSpinner);
-    expect(container).toBeTruthy();
-    // The default size is 'md' → sizeStyle should render at 24px.
-    const view = container.querySelector('view');
-    expect(view?.getAttribute('style')).toContain('24px');
-  });
+@Component({
+  imports: [UiSpinner],
+  template: `
+    <ui-spinner [size]="size()" [color]="color()" [class]="className()" />
+  `,
+})
+class SpinnerHost {
+  readonly size = signal<'xs' | 'sm' | 'md' | 'lg'>('md');
+  readonly color = signal<string | undefined>(undefined);
+  readonly className = signal('');
+}
 
-  it('substitutes currentColor when the color input is set', async () => {
-    const { container, componentRef } = await render(UiSpinner);
-    setInputSignal((componentRef.instance as UiSpinner).color, 'rgb(0, 0, 0)');
-    // Flush CD so the computed re-runs and the `content` attribute updates.
-    await waitForUpdate();
-    const svg = container.querySelector('svg');
-    expect(svg?.getAttribute('content')).toContain('rgb(0, 0, 0)');
-    expect(svg?.getAttribute('content')).not.toContain('currentColor');
+const renderSpinner = async () => {
+  const result = await render(SpinnerHost);
+  return {
+    ...result,
+    host: result.componentRef.instance as SpinnerHost,
+    // The spinner's own view: the one that holds the svg.
+    spinner: () => result.container.querySelector('svg')!.parentElement!,
+    svgContent: () =>
+      result.container.querySelector('svg')!.getAttribute('content'),
+  };
+};
+
+describe('UiSpinner', () => {
+  it('renders the loader at the default size', async () => {
+    const { spinner } = await renderSpinner();
+    expect(spinner().getAttribute('style')).toContain('width: 24px');
+    expect(spinner().getAttribute('style')).toContain('height: 24px');
   });
 
   it('resizes for each supported size', async () => {
-    const { componentRef, container } = await render(UiSpinner);
+    const { host, spinner } = await renderSpinner();
     for (const [size, px] of [
       ['xs', 16],
       ['sm', 20],
       ['md', 24],
       ['lg', 32],
     ] as const) {
-      setInputSignal((componentRef.instance as UiSpinner).size, size);
+      host.size.set(size);
       await waitForUpdate();
-      const view = container.querySelector('view');
-      expect(view?.getAttribute('style')).toContain(`${px}px`);
+      expect(spinner().getAttribute('style')).toContain(`width: ${px}px`);
     }
   });
+
+  it("draws in the theme's foreground when no color is set", async () => {
+    // Lynx's SVG parser reads neither `currentColor` nor CSS variables.
+    const { svgContent } = await renderSpinner();
+    expect(svgContent()).toContain(ICON_LIGHT_COLORS['foreground']);
+    expect(svgContent()).not.toContain('currentColor');
+  });
+
+  it('draws in a literal color or a theme token', async () => {
+    const { host, svgContent } = await renderSpinner();
+    host.color.set('rgb(0, 0, 0)');
+    await waitForUpdate();
+    expect(svgContent()).toContain('rgb(0, 0, 0)');
+
+    host.color.set('var(--primary-foreground)');
+    await waitForUpdate();
+    expect(svgContent()).toContain(ICON_LIGHT_COLORS['primary-foreground']);
+  });
+
+  it('takes the class input', async () => {
+    const { host, spinner } = await renderSpinner();
+    host.className.set('ml-2');
+    await waitForUpdate();
+    expect(spinner().getAttribute('class')).toBe('ml-2');
+  });
+
+  it('turns continuously', async () => {
+    const animate = vi.spyOn(lynxMainThread(), '__ElementAnimate');
+    const { spinner } = await renderSpinner();
+    expect(animate).toHaveBeenCalledWith(spinner(), expect.any(Array));
+    animate.mockRestore();
+  });
 });

package/dist/ui/components/spinner/spinner.ts

@@ -9,13 +9,15 @@ import {
 } from '@angular/core';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 
+import { cn } from '../../utils/cn';
+import { injectIconColor } from '../icon/icon-theme';
+
 const LOADER_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4"/><path d="m16.2 7.8 2.9-2.9"/><path d="M18 12h4"/><path d="m16.2 16.2 2.9 2.9"/><path d="M12 18v4"/><path d="m4.9 19.1 2.9-2.9"/><path d="M2 12h4"/><path d="m4.9 4.9 2.9 2.9"/></svg>`;
 
 const SIZE_MAP = { xs: 16, sm: 20, md: 24, lg: 32 } as const;
 
 @Component({
   selector: 'ui-spinner',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   // SVG markup is passed via [attr.content] rather than as child elements.
@@ -24,58 +26,63 @@ const SIZE_MAP = { xs: 16, sm: 20, md: 24, lg: 32 } as const;
   // SVG markup string as the `content` attribute is the Lynx-native way to
   // embed vector graphics.
   template: `
-    <view #spinner [style]="sizeStyle()">
+    <view #spinner [class]="containerClass()" [style]="sizeStyle()">
       <svg [attr.content]="svgContent()" style="width: 100%; height: 100%;" />
     </view>
   `,
 })
 export class UiSpinner {
   readonly size = input<'xs' | 'sm' | 'md' | 'lg'>('md');
+  /**
+   * A literal color or a theme token (`var(--primary)`). Without one, the
+   * spinner takes the color its container sets (see `UI_ICON_COLOR`), then the
+   * theme's foreground.
+   */
   readonly color = input<string | undefined>(undefined);
+  readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly spinnerRef = viewChild<ElementRef>('spinner');
+  readonly #resolveColor = injectIconColor();
 
-  constructor() {
-    effect(() => {
-      const el = this.spinnerRef()?.nativeElement;
-      // el.animate() is inert in jsdom (see animate.ts's transitionTransform
-      // rationale). The continuous rotation is exercised on-device.
-      /* v8 ignore start */
-      if (!el) return;
-      el.animate(
-        [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
-        {
-          duration: 1600,
-          iterations: Infinity,
-          easing: 'linear',
-        },
-      );
-      /* v8 ignore stop */
-    });
-  }
+  readonly spinnerRef = viewChild.required<ElementRef>('spinner');
 
-  protected readonly svgContent = computed(() => {
-    const c = this.color();
-    if (c) {
-      // Lynx SVG elements don't inherit the CSS `color` property into their
-      // stroke attributes, so we substitute the literal `currentColor` in the
-      // SVG string rather than relying on `currentColor` propagation via CSS.
-      //
-      // Uses split().join() instead of String.prototype.replaceAll(). replaceAll
-      // is ES2021, but Lynx's main thread runs on PrimJS at an ES2019 target;
-      // because it's a runtime method (not syntax) the build's down-leveling does
-      // not polyfill it, so it simply doesn't exist there. Calling it throws
-      // "main-thread.js exception: not a function" from inside Angular change
-      // detection, which aborts the whole tick before Lynx flushes the element
-      // tree — so the spinner never paints, and the error count climbs on every
-      // render as each tick re-runs and re-throws. split/join is ES2019-safe and
-      // is preferred over `replace(/.../g)` here because the search term is a
-      // plain literal and needs no regex escaping.
-      return LOADER_SVG.split('currentColor').join(c);
-    }
-    return LOADER_SVG;
+  /**
+   * Turns the spinner for as long as it's shown. 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 rotation = effect(() => {
+    this.spinnerRef().nativeElement.animate(
+      [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
+      {
+        duration: 1600,
+        iterations: Infinity,
+        easing: 'linear',
+      },
+    );
   });
 
+  // Lynx SVG elements don't inherit the CSS `color` property into their stroke
+  // attributes, so we substitute the literal `currentColor` in the SVG string
+  // rather than relying on `currentColor` propagation via CSS. The color is
+  // resolved first: the SVG parser can't read `var(--x)` either (see
+  // icon-theme.ts).
+  //
+  // Uses split().join() instead of String.prototype.replaceAll(). replaceAll is
+  // ES2021, but Lynx's main thread runs on PrimJS at an ES2019 target; because
+  // it's a runtime method (not syntax) the build's down-leveling does not
+  // polyfill it, so it simply doesn't exist there. Calling it throws
+  // "main-thread.js exception: not a function" from inside Angular change
+  // detection, which aborts the whole tick before Lynx flushes the element tree
+  // — so the spinner never paints, and the error count climbs on every render
+  // as each tick re-runs and re-throws. split/join is ES2019-safe and is
+  // preferred over `replace(/.../g)` here because the search term is a plain
+  // literal and needs no regex escaping.
+  protected readonly svgContent = computed(() =>
+    LOADER_SVG.split('currentColor').join(this.#resolveColor(this.color())),
+  );
+
+  protected readonly containerClass = computed(() => cn(this.userClass()));
+
   protected readonly sizeStyle = computed(() => {
     const px = SIZE_MAP[this.size()];
     return `width: ${px}px; height: ${px}px;`;

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

@@ -1,63 +1,133 @@
-import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
-import { describe, expect, it, vi } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { Component, signal } from '@angular/core';
+import {
+  fireEvent,
+  render,
+  waitForUpdate,
+} from '@blotch/angular-lynx-testing-library';
+import {
+  type MockInstance,
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from 'vitest';
+import {
+  type LynxMainThread,
+  lynxMainThread,
+} from '../../../test-utils/lynx-main-thread';
 import { UiSwitch } from './switch';
 
+@Component({
+  imports: [UiSwitch],
+  template: `
+    <ui-switch
+      [(checked)]="checked"
+      [disabled]="disabled()"
+      class="ml-2"
+      (changed)="changes.push($event)"
+    />
+  `,
+})
+class SwitchHost {
+  readonly checked = signal(false);
+  readonly disabled = signal(false);
+  readonly changes: boolean[] = [];
+}
+
+const renderSwitch = async () => {
+  const result = await render(SwitchHost);
+  return {
+    ...result,
+    host: result.componentRef.instance as SwitchHost,
+    track: () => result.container.querySelector('.flex-row')!,
+    thumb: () => result.container.querySelector('.bg-background')!,
+  };
+};
+
+/** `__ElementAnimate`'s first argument for starting an animation. */
+const START = 0;
+/** `__ElementAnimate`'s first argument for canceling one. */
+const CANCEL = 3;
+
 describe('UiSwitch', () => {
-  it('renders in the off position by default', async () => {
-    const { container } = await render(UiSwitch);
-    expect(container).toBeTruthy();
+  // Watched per test: the testing library resets the main thread after each.
+  let animate: MockInstance<LynxMainThread['__ElementAnimate']>;
+  beforeEach(() => {
+    animate = vi.spyOn(lynxMainThread(), '__ElementAnimate');
   });
+  afterEach(() => animate.mockRestore());
 
-  it('toggle() flips checked and emits `changed`', async () => {
-    const { componentRef } = await render(UiSwitch);
-    const inst = componentRef.instance as UiSwitch;
-    const emitted: boolean[] = [];
-    inst.changed.subscribe((v) => emitted.push(v));
-
-    inst.toggle();
-    expect(inst.checked()).toBe(true);
-    inst.toggle();
-    expect(inst.checked()).toBe(false);
-    expect(emitted).toEqual([true, false]);
+  it('renders off, with the thumb at the left and the given class', async () => {
+    const { track, thumb } = await renderSwitch();
+    expect(track().classList).toContain('bg-input');
+    expect(track().classList).toContain('ml-2');
+    expect(thumb().getAttribute('style')).toContain('translateX(2px)');
   });
 
-  it('toggle() is a no-op when disabled', async () => {
-    const { componentRef } = await render(UiSwitch);
-    const inst = componentRef.instance as UiSwitch;
-    setInputSignal(inst.disabled, true);
-    const listener = vi.fn();
-    inst.changed.subscribe(listener);
+  it('turns on and off on tap, emitting `changed`', async () => {
+    const { host, track, thumb } = await renderSwitch();
 
-    inst.toggle();
-    expect(inst.checked()).toBe(false);
-    expect(listener).not.toHaveBeenCalled();
+    fireEvent.tap(track());
+    await waitForUpdate();
+    expect(host.checked()).toBe(true);
+    expect(track().classList).toContain('bg-primary');
+    expect(thumb().getAttribute('style')).toContain('translateX(22px)');
+
+    fireEvent.tap(track());
+    await waitForUpdate();
+    expect(host.checked()).toBe(false);
+    expect(host.changes).toEqual([true, false]);
   });
 
-  it('positions the thumb differently in ON vs OFF state', async () => {
-    const { componentRef, container } = await render(UiSwitch);
-    const inst = componentRef.instance as UiSwitch;
-    let thumb = container.querySelectorAll('view')[1];
-    expect(thumb?.getAttribute('style')).toContain('translateX(2px)');
+  it('springs the thumb across the track, squishing it halfway', async () => {
+    const { track, thumb } = await renderSwitch();
 
-    inst.checked.set(true);
+    fireEvent.tap(track());
+    expect(animate).toHaveBeenCalledWith(thumb(), [
+      START,
+      expect.any(String),
+      [
+        { transform: 'translateX(2px) scale(1)' },
+        { transform: 'translateX(12px) scale(1.1)' },
+        { transform: 'translateX(22px) scale(1)' },
+      ],
+      expect.objectContaining({ fill: 'forwards' }),
+    ]);
+
+    // Turning it back off cuts the first spring short and springs it back.
+    fireEvent.tap(track());
+    expect(animate).toHaveBeenCalledWith(thumb(), [CANCEL, expect.any(String)]);
+    expect(animate).toHaveBeenLastCalledWith(thumb(), [
+      START,
+      expect.any(String),
+      [
+        { transform: 'translateX(22px) scale(1)' },
+        { transform: 'translateX(12px) scale(1.1)' },
+        { transform: 'translateX(2px) scale(1)' },
+      ],
+      expect.objectContaining({ fill: 'forwards' }),
+    ]);
+  });
+
+  it('follows its checked binding', async () => {
+    const { host, thumb } = await renderSwitch();
+    host.checked.set(true);
     await waitForUpdate();
-    thumb = container.querySelectorAll('view')[1];
-    expect(thumb?.getAttribute('style')).toContain('translateX(22px)');
+    expect(thumb().getAttribute('style')).toContain('translateX(22px)');
   });
 
-  it('applies opacity-50 when disabled and includes a user class', async () => {
-    // Covers the disabled=true branch of trackClass() (line 62) and the
-    // userClass() concatenation. Without a render + detectChanges cycle the
-    // computed never runs with disabled=true and the branch stays uncovered.
-    const { componentRef, container } = await render(UiSwitch);
-    const inst = componentRef.instance as UiSwitch;
-    setInputSignal(inst.disabled, true);
-    setInputSignal(inst.userClass, 'custom-cls');
+  it('dims and ignores taps while disabled', async () => {
+    const { host, track } = await renderSwitch();
+    host.disabled.set(true);
+    await waitForUpdate();
+    expect(track().classList).toContain('opacity-50');
+
+    fireEvent.tap(track());
     await waitForUpdate();
-    const track = container.querySelectorAll('view')[0];
-    const cls = track?.getAttribute('class') ?? '';
-    expect(cls).toContain('opacity-50');
-    expect(cls).toContain('custom-cls');
+    expect(host.checked()).toBe(false);
+    expect(host.changes).toEqual([]);
+    expect(animate).not.toHaveBeenCalled();
   });
 });

package/dist/ui/components/switch/switch.ts

@@ -52,7 +52,8 @@ export class UiSwitch {
 
   readonly changed = output<boolean>();
 
-  readonly thumbRef = viewChild<ElementRef>('thumb');
+  /** The thumb is always in the template, so toggle() can always slide it. */
+  readonly thumbRef = viewChild.required<ElementRef>('thumb');
   #activeAnimation?: AnimationHandle;
 
   protected readonly trackClass = computed(() =>
@@ -76,21 +77,15 @@ export class UiSwitch {
   toggle(): void {
     if (this.disabled()) return;
 
-    const thumb = this.thumbRef()?.nativeElement;
+    const thumb = this.thumbRef().nativeElement;
     const wasChecked = this.checked();
     const next = !wasChecked;
 
-    // springTranslateX calls thumb.animate() which is inert in jsdom (see
-    // animate.ts). The spring physics of the thumb is exercised on-device.
-    /* v8 ignore start */
-    if (thumb) {
-      this.#activeAnimation?.cancel();
-      const from = wasChecked ? THUMB_OFFSET_ON : THUMB_OFFSET_OFF;
-      const to = next ? THUMB_OFFSET_ON : THUMB_OFFSET_OFF;
-      // Spring translate with squish effect at midpoint
-      this.#activeAnimation = springTranslateX(thumb, from, to);
-    }
-    /* v8 ignore stop */
+    this.#activeAnimation?.cancel();
+    const from = wasChecked ? THUMB_OFFSET_ON : THUMB_OFFSET_OFF;
+    const to = next ? THUMB_OFFSET_ON : THUMB_OFFSET_OFF;
+    // Spring translate with squish effect at midpoint
+    this.#activeAnimation = springTranslateX(thumb, from, to);
 
     this.checked.set(next);
     this.changed.emit(next);

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

@@ -0,0 +1 @@
+export { UiTabBar, UiTabBarItem } from './tab-bar';