@blotch/dolan 22.2.2 → 22.2.3

package/dist/ui/components/bottom-sheet/bottom-sheet.test.ts

@@ -1,12 +1,12 @@
 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 { describe, expect, it, vi } from 'vitest';
+import { DURATION } from '../../utils/animate';
 import { setInputSignal } from '../../../test-utils/set-input-signal';
 import { UiBottomSheet } from './bottom-sheet';
 
 @Component({
-  standalone: true,
   imports: [UiBottomSheet, LYNX_ELEMENTS],
   template: `<ui-bottom-sheet [(open)]="open"
     ><text>Panel</text></ui-bottom-sheet
@@ -17,6 +17,47 @@ class BottomSheetHost {
 }
 
 describe('UiBottomSheet', () => {
+  it('stops its close timers when it is destroyed while closing', async () => {
+    const warn = vi.spyOn(console, 'warn');
+    const { componentRef, unmount } = await render(UiBottomSheet);
+    const inst = componentRef.instance as UiBottomSheet;
+    inst.open.set(true);
+    for (let i = 0; i < 5; i++) await waitForUpdate();
+    inst.open.set(false);
+    await waitForUpdate();
+    // Destroyed during the close animation, as an `@if` around the sheet
+    // would do. Its close timer (DURATION.normal + 20) used to fire anyway
+    // and emit `closed` from the destroyed output.
+    unmount();
+    await new Promise((r) => setTimeout(r, DURATION.normal + 50));
+    const warnings = warn.mock.calls.map(([message]) => String(message));
+    warn.mockRestore();
+    expect(warnings.filter((message) => message.includes('NG0953'))).toEqual(
+      [],
+    );
+  });
+
+  it('moves a screen reader into the panel and keeps it there while open', async () => {
+    const { componentRef, container } = await render(UiBottomSheet);
+    const inst = componentRef.instance as UiBottomSheet;
+    const panel = container.querySelector(
+      '[accessibility-exclusive-focus]',
+    ) as Element & { invoke?: unknown };
+    expect(panel.getAttribute('accessibility-exclusive-focus')).toBe('false');
+    const invoke = vi.fn();
+    panel.invoke = invoke;
+    (inst as unknown as { backdropRef: unknown }).backdropRef = signal({
+      nativeElement: panel,
+    });
+    (inst as unknown as { panelRef: unknown }).panelRef = signal({
+      nativeElement: panel,
+    });
+    inst.open.set(true);
+    for (let i = 0; i < 5; i++) await waitForUpdate();
+    expect(invoke).toHaveBeenCalledWith('requestAccessibilityFocus');
+    expect(panel.getAttribute('accessibility-exclusive-focus')).toBe('true');
+  });
+
   const patchRefs = (inst: UiBottomSheet, view: Element) => {
     (inst as unknown as { backdropRef: unknown }).backdropRef = signal({
       nativeElement: view,
@@ -68,12 +109,18 @@ describe('UiBottomSheet', () => {
   it('open effect bails when backdrop/panel refs are undefined', async () => {
     const { componentRef } = await render(UiBottomSheet);
     const inst = componentRef.instance as UiBottomSheet;
+    const closed = vi.fn();
+    inst.closed.subscribe(closed);
     inst.open.set(true);
     await waitForUpdate();
     await waitForUpdate();
     inst.open.set(false);
     await waitForUpdate();
+    // Wait out the close sequence, so #animateOut runs (and bails) while the
+    // component is still alive. Destroying it clears the sequence's timers.
+    await new Promise((r) => setTimeout(r, DURATION.normal + 50));
     expect(inst.open()).toBe(false);
+    expect(closed).toHaveBeenCalledOnce();
   });
 
   it('drag beyond the dismiss threshold closes the sheet', async () => {
@@ -81,19 +128,32 @@ describe('UiBottomSheet', () => {
     const inst = componentRef.instance as UiBottomSheet;
     const view = container.querySelector('view') as Element;
     patchRefs(inst, view);
+    const animate = vi.spyOn(
+      view as Element & { animate: () => unknown },
+      'animate',
+    );
     inst.open.set(true);
     await waitForUpdate();
 
     const cast = inst as unknown as {
       onHandleTouchStart: (e: { touches: { clientY: number }[] }) => void;
       onHandleTouchMove: (e: { touches: { clientY: number }[] }) => void;
-      onHandleTouchEnd: () => void;
+      onDragEnd: () => void;
     };
     cast.onHandleTouchStart({ touches: [{ clientY: 100 }] });
     cast.onHandleTouchMove({ touches: [{ clientY: 300 }] });
-    cast.onHandleTouchEnd();
+    cast.onDragEnd();
     await waitForUpdate();
     expect(inst.open()).toBe(false);
+    // The exit slide starts the next tick, from where the finger let go
+    // rather than from the docked position.
+    await new Promise((r) => setTimeout(r, 0));
+    expect(
+      animate.mock.calls.some(
+        ([keyframes]) =>
+          (keyframes as Keyframe[])[0]?.transform === 'translateY(200px)',
+      ),
+    ).toBe(true);
   });
 
   it('drag below the dismiss threshold snaps back to open', async () => {
@@ -107,11 +167,11 @@ describe('UiBottomSheet', () => {
     const cast = inst as unknown as {
       onHandleTouchStart: (e: { touches: { clientY: number }[] }) => void;
       onHandleTouchMove: (e: { touches: { clientY: number }[] }) => void;
-      onHandleTouchEnd: () => void;
+      onDragEnd: () => void;
     };
     cast.onHandleTouchStart({ touches: [{ clientY: 100 }] });
     cast.onHandleTouchMove({ touches: [{ clientY: 130 }] });
-    cast.onHandleTouchEnd();
+    cast.onDragEnd();
     await waitForUpdate();
     expect(inst.open()).toBe(true);
   });
@@ -122,7 +182,7 @@ describe('UiBottomSheet', () => {
     const cast = inst as unknown as {
       onHandleTouchStart: (e: { touches?: { clientY: number }[] }) => void;
       onHandleTouchMove: (e: { touches?: { clientY: number }[] }) => void;
-      onHandleTouchEnd: () => void;
+      onDragEnd: () => void;
     };
     // touchmove without prior touchstart is a no-op (guards `#isDragging`).
     cast.onHandleTouchMove({ touches: [{ clientY: 200 }] });
@@ -131,8 +191,130 @@ describe('UiBottomSheet', () => {
     cast.onHandleTouchStart({ touches: [{ clientY: 100 }] });
     cast.onHandleTouchMove({ touches: [] });
     // touchend without an active drag is also a no-op.
-    cast.onHandleTouchEnd();
-    cast.onHandleTouchEnd();
+    cast.onDragEnd();
+    cast.onDragEnd();
+  });
+
+  type MouseDrag = {
+    onHandleMouseDown: (e: { y: number }) => void;
+    onMouseDragMove: (e: { y: number; buttons: number }) => void;
+    onDragEnd: () => void;
+    onBackdropMouseDown: () => void;
+    onBackdropTap: () => void;
+  };
+
+  it('mouse drag beyond the dismiss threshold closes the sheet', async () => {
+    const { componentRef, container } = await render(UiBottomSheet);
+    const inst = componentRef.instance as UiBottomSheet;
+    patchRefs(inst, container.querySelector('view') as Element);
+    inst.open.set(true);
+    await waitForUpdate();
+
+    const cast = inst as unknown as MouseDrag;
+    cast.onHandleMouseDown({ y: 100 });
+    cast.onMouseDragMove({ y: 300, buttons: 1 });
+    cast.onDragEnd();
+    await waitForUpdate();
+    expect(inst.open()).toBe(false);
+  });
+
+  it('mouse drag below the dismiss threshold snaps back to open', async () => {
+    const { componentRef, container } = await render(UiBottomSheet);
+    const inst = componentRef.instance as UiBottomSheet;
+    patchRefs(inst, container.querySelector('view') as Element);
+    inst.open.set(true);
+    await waitForUpdate();
+
+    const cast = inst as unknown as MouseDrag;
+    cast.onHandleMouseDown({ y: 100 });
+    cast.onMouseDragMove({ y: 130, buttons: 1 });
+    cast.onDragEnd();
+    await waitForUpdate();
+    expect(inst.open()).toBe(true);
+  });
+
+  it('ignores the backdrop click that follows a moved mouse drag', async () => {
+    const { componentRef } = await render(UiBottomSheet);
+    const inst = componentRef.instance as UiBottomSheet;
+    inst.open.set(true);
+    await waitForUpdate();
+
+    const cast = inst as unknown as MouseDrag;
+    // A drag released above the panel: the browser's click lands on the
+    // backdrop, and must not close the sheet that just snapped back.
+    cast.onHandleMouseDown({ y: 100 });
+    cast.onMouseDragMove({ y: 40, buttons: 1 });
+    cast.onDragEnd();
+    cast.onBackdropTap();
+    expect(inst.open()).toBe(true);
+
+    // Only that one click is ignored: the next backdrop tap closes it.
+    cast.onBackdropTap();
+    expect(inst.open()).toBe(false);
+  });
+
+  it('a new press clears an ignore no click consumed', async () => {
+    const { componentRef } = await render(UiBottomSheet);
+    const inst = componentRef.instance as UiBottomSheet;
+    inst.open.set(true);
+    await waitForUpdate();
+
+    const cast = inst as unknown as MouseDrag;
+    // Released over the panel, so its catchtap ate the click.
+    cast.onHandleMouseDown({ y: 100 });
+    cast.onMouseDragMove({ y: 120, buttons: 1 });
+    cast.onDragEnd();
+    // A real backdrop click starts with a mousedown on the backdrop.
+    cast.onBackdropMouseDown();
+    cast.onBackdropTap();
+    expect(inst.open()).toBe(false);
+  });
+
+  it('a mouse press without a move, or a touch drag, leaves the backdrop tap alone', async () => {
+    const { componentRef } = await render(UiBottomSheet);
+    const inst = componentRef.instance as UiBottomSheet;
+    inst.open.set(true);
+    await waitForUpdate();
+
+    const cast = inst as unknown as MouseDrag & {
+      onHandleTouchStart: (e: { touches: { clientY: number }[] }) => void;
+      onHandleTouchMove: (e: { touches: { clientY: number }[] }) => void;
+    };
+    cast.onHandleMouseDown({ y: 100 });
+    cast.onDragEnd();
+    // A moved touch is never followed by a tap, so nothing is ignored.
+    cast.onHandleTouchStart({ touches: [{ clientY: 100 }] });
+    cast.onHandleTouchMove({ touches: [{ clientY: 120 }] });
+    cast.onDragEnd();
+    cast.onBackdropTap();
+    expect(inst.open()).toBe(false);
+  });
+
+  it('ends a mouse drag whose release it never saw', async () => {
+    const { componentRef, container } = await render(UiBottomSheet);
+    const inst = componentRef.instance as UiBottomSheet;
+    patchRefs(inst, container.querySelector('view') as Element);
+    inst.open.set(true);
+    await waitForUpdate();
+
+    const cast = inst as unknown as MouseDrag;
+    cast.onHandleMouseDown({ y: 100 });
+    cast.onMouseDragMove({ y: 300, buttons: 1 });
+    // The button came up outside the window; the cursor is back without it.
+    cast.onMouseDragMove({ y: 120, buttons: 0 });
+    await waitForUpdate();
+    // Released 200px down, past the threshold, so it closes.
+    expect(inst.open()).toBe(false);
+  });
+
+  it('a mouse move outside a drag leaves the sheet in place', async () => {
+    const { componentRef } = await render(UiBottomSheet);
+    const inst = componentRef.instance as UiBottomSheet;
+    // The cursor moving over an open sheet with no button pressed.
+    (inst as unknown as MouseDrag).onMouseDragMove({ y: 300, buttons: 1 });
+    expect((inst as unknown as { dragOffset: () => number }).dragOffset()).toBe(
+      0,
+    );
   });
 
   it('applies a user class on the panel', async () => {

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

@@ -1,6 +1,7 @@
 // cspell:words WAAPI tweens
 import {
   type ElementRef,
+  type OnDestroy,
   Component,
   ViewEncapsulation,
   computed,
@@ -59,29 +60,44 @@ const BACKDROP_CLEAR_DISTANCE = 500;
  */
 @Component({
   selector: 'ui-bottom-sheet',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `
     <overlay [attr.visible]="overlayVisible()" [style]="overlayStyle()">
+      <!--
+        The mouse drag's move/up listeners sit on the full-screen backdrop,
+        not the handle: a touch keeps targeting the element it started on, but
+        a mouse event targets whatever is under the cursor, so a cursor that
+        outruns the thin handle strip (or drags up off the panel) would stop
+        driving the drag. Mouse events bubble here from anywhere in the sheet,
+        including the handle and the panel. There's no mouseleave: like a
+        touch, the drag carries on until release, and Chrome doesn't deliver
+        mouseleave to Lynx web anyway (see onMouseDragMove for a release
+        outside the view).
+      -->
       <view
         #backdrop
         class="h-full w-full"
         [style]="backdropStyle()"
         (bindtap)="onBackdropTap()"
+        (bindmousedown)="onBackdropMouseDown()"
+        (bindmousemove)="onMouseDragMove($event)"
+        (bindmouseup)="onDragEnd()"
       >
         <view
           #panel
           [class]="panelClass()"
           [style]="panelPositionStyle()"
+          [accessibility-exclusive-focus]="overlayVisible()"
           (catchtap)="onPanelTap()"
         >
           <view
             class="items-center pb-3 pt-2 flex justify-center"
             (catchtouchstart)="onHandleTouchStart($event)"
             (catchtouchmove)="onHandleTouchMove($event)"
-            (catchtouchend)="onHandleTouchEnd()"
-            (catchtouchcancel)="onHandleTouchEnd()"
+            (catchtouchend)="onDragEnd()"
+            (catchtouchcancel)="onDragEnd()"
+            (catchmousedown)="onHandleMouseDown($event)"
           >
             <view class="h-1 w-10 rounded-full bg-muted" />
           </view>
@@ -91,7 +107,7 @@ const BACKDROP_CLEAR_DISTANCE = 500;
     </overlay>
   `,
 })
-export class UiBottomSheet {
+export class UiBottomSheet implements OnDestroy {
   readonly open = model(false);
   readonly userClass = input<string>('', { alias: 'class' });
 
@@ -115,6 +131,9 @@ export class UiBottomSheet {
   #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>>();
 
   // --- Drag-to-dismiss state ---
   // Live downward drag distance (px), applied to the panel as a translateY via
@@ -125,6 +144,15 @@ export class UiBottomSheet {
   // True only between touchstart and touchend on the handle, so unrelated move
   // events can't shift the sheet.
   #isDragging = false;
+  // Set when a mouse drag that actually moved is released. The browser follows
+  // that mouseup with a click on the nearest element under both the mousedown
+  // and the mouseup, which is the backdrop whenever the cursor ended up off the
+  // panel, and Lynx web maps that click to the backdrop's tap. Without this, a
+  // drag released above the panel (where the sheet snaps back) would close it.
+  #ignoreNextBackdropTap = false;
+  // Whether the current drag is a mouse drag that has moved: only those are
+  // followed by a click. A moved touch produces no tap.
+  #mouseDragMoved = false;
 
   constructor() {
     // `#hasBeenOpen` prevents the close animation from running on the initial
@@ -184,9 +212,24 @@ export class UiBottomSheet {
   });
 
   protected onBackdropTap(): void {
+    if (this.#ignoreNextBackdropTap) {
+      this.#ignoreNextBackdropTap = false;
+      return;
+    }
     this.open.set(false);
   }
 
+  /**
+   * A fresh press starts a fresh click, so drop any ignore left over from a
+   * drag whose release didn't produce a backdrop click (one released over the
+   * panel, whose `catchtap` swallows it). Otherwise the next real backdrop tap
+   * would be ignored. The handle catches its own mousedown, which is fine: it
+   * starts a new drag that resets the flag on release.
+   */
+  protected onBackdropMouseDown(): void {
+    this.#ignoreNextBackdropTap = false;
+  }
+
   /**
    * No-op tap handler for the panel. `catchtap` (vs `bindtap`) already stops
    * the tap from bubbling to the backdrop — Lynx controls propagation via the
@@ -196,19 +239,14 @@ export class UiBottomSheet {
   protected onPanelTap(): void {}
 
   /**
-   * Begin a drag on the handle strip. The open slideIn holds the panel at
-   * translateY(0%) via fill:'forwards', which would override our inline
-   * transform — cancel it so `dragOffset` (applied through panelPositionStyle)
-   * actually moves the panel from here on.
+   * Begin a drag on the handle strip.
    */
   protected onHandleTouchStart(e: {
     touches?: ReadonlyArray<{ clientY: number }>;
   }): void {
     const y = e.touches?.[0]?.clientY;
     if (y == null) return;
-    this.#panelAnim?.cancel();
-    this.#isDragging = true;
-    this.#dragStartY = y;
+    this.#startDrag(y);
   }
 
   protected onHandleTouchMove(e: {
@@ -217,20 +255,53 @@ export class UiBottomSheet {
     if (!this.#isDragging) return;
     const y = e.touches?.[0]?.clientY;
     if (y == null) return;
-    // Clamp to >= 0: the sheet is already docked at the bottom, so only a
-    // downward (dismiss-direction) drag should move it.
-    this.dragOffset.set(Math.max(0, y - this.#dragStartY));
+    this.#moveDrag(y);
+  }
+
+  /**
+   * The mouse twin of onHandleTouchStart, so the handle drags on web. A
+   * desktop browser fires no touch events for a mouse, and Lynx web passes
+   * DOM events straight through rather than turning mouse input into touches.
+   * On a touch-only device no mouse events fire, so touch keeps driving it.
+   *
+   * Reads `y`, not `clientY`: Lynx PC reports a mouse event's clientY relative
+   * to the element under the cursor, which changes as the cursor moves across
+   * the sheet, while `y` is relative to the Lynx view on PC and web alike.
+   */
+  protected onHandleMouseDown(e: { y: number }): void {
+    this.#startDrag(e.y);
+  }
+
+  /**
+   * Bound on the backdrop (see the template), so it also sees every move the
+   * cursor makes over an open sheet. Only those during a drag count.
+   */
+  protected onMouseDragMove(e: { y: number; buttons: number }): void {
+    if (!this.#isDragging) return;
+    // No button held means the mouseup happened where the sheet couldn't see
+    // it: a release outside the Lynx view (past the edge of a docs preview, or
+    // outside the browser window) goes to the page, and web-core only listens
+    // inside the view. Treat the first move back as the release, or the panel
+    // would stay mid-drag.
+    if (e.buttons === 0) {
+      this.onDragEnd();
+      return;
+    }
+    this.#mouseDragMoved = true;
+    this.#moveDrag(e.y);
   }
 
   /**
-   * Release the drag. Past the threshold we set `open` to false and let the
+   * Release the drag, from a touchend, touchcancel or mouseup, or a mouse
+   * move with no button held. Past the threshold we set `open` to false and let the
    * effect drive teardown (#doClose → drag-aware #animateOut), which keeps the
    * two-way `open` binding in sync and reuses the `closed` emit. Otherwise the
    * sheet springs back to fully open.
    */
-  protected onHandleTouchEnd(): void {
+  protected onDragEnd(): void {
     if (!this.#isDragging) return;
     this.#isDragging = false;
+    this.#ignoreNextBackdropTap = this.#mouseDragMoved;
     if (this.dragOffset() > DISMISS_THRESHOLD) {
       this.open.set(false);
     } else {
@@ -238,15 +309,55 @@ export class UiBottomSheet {
     }
   }
 
+  /**
+   * The open slideIn holds the panel at translateY(0%) via fill:'forwards',
+   * which would override our inline transform — cancel it so `dragOffset`
+   * (applied through panelPositionStyle) actually moves the panel from here on.
+   */
+  #startDrag(y: number): void {
+    this.#panelAnim?.cancel();
+    this.#isDragging = true;
+    this.#mouseDragMoved = false;
+    this.#dragStartY = y;
+  }
+
+  #moveDrag(y: number): void {
+    // Clamp to >= 0: the sheet is already docked at the bottom, so only a
+    // downward (dismiss-direction) drag should move it.
+    this.dragOffset.set(Math.max(0, y - this.#dragStartY));
+  }
+
+  /**
+   * The 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 the overlay visible first so native elements exist
    * in the tree, then animate on the next frame. Without this, animate()
    * targets elements that haven't been flushed to native yet and silently fails.
    */
   #doOpen(): void {
-    setTimeout(() => {
+    this.#later(() => {
       this.overlayVisible.set(true);
-      setTimeout(() => this.#animateIn(), 0);
+      this.#later(() => this.#animateIn(), 0);
     }, 0);
   }
 
@@ -257,9 +368,9 @@ export class UiBottomSheet {
    * before the fade finishes.
    */
   #doClose(): void {
-    setTimeout(() => {
+    this.#later(() => {
       this.#animateOut();
-      setTimeout(() => {
+      this.#later(() => {
         this.overlayVisible.set(false);
         this.closed.emit();
         // Reset for the next open: the sheet returns to its docked position
@@ -278,6 +389,11 @@ export class UiBottomSheet {
     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,

package/dist/ui/components/button/button-render.test.ts

@@ -91,6 +91,25 @@ describe('UiButton (render)', () => {
     expect(inst.spinnerSize()).toBe('sm');
   });
 
+  it("colors the spinner like each variant's label", async () => {
+    // The template binding doesn't reach the spinner's input under JIT (see
+    // setInputSignal), so check the value the button passes it.
+    const { componentRef } = await render(UiButton);
+    const inst = componentRef.instance as unknown as UiButton & {
+      spinnerColor: () => string;
+    };
+    for (const [variant, color] of [
+      ['default', 'var(--primary-foreground)'],
+      ['destructive', 'var(--destructive-foreground)'],
+      ['outline', 'var(--foreground)'],
+      ['secondary', 'var(--secondary-foreground)'],
+      ['ghost', 'var(--foreground)'],
+    ] as const) {
+      setInputSignal(inst.variant, variant);
+      expect(inst.spinnerColor()).toBe(color);
+    }
+  });
+
   it('press handlers run cleanly (guarded by disabled/loading state)', async () => {
     // onPressStart/End are no-ops when the button is disabled/loading; the
     // active-press path relies on the ref being wired up on-device — assert

package/dist/ui/components/button/button.ts

@@ -65,6 +65,19 @@ const buttonTextVariants = cva('font-medium', {
   },
 });
 
+/**
+ * The spinner's color for each variant: the same token as the label's text
+ * class above. The spinner draws with SVG, which can't read the text classes,
+ * so it gets the token and resolves it itself (see icon-theme.ts).
+ */
+const SPINNER_COLORS = {
+  default: 'var(--primary-foreground)',
+  destructive: 'var(--destructive-foreground)',
+  outline: 'var(--foreground)',
+  secondary: 'var(--secondary-foreground)',
+  ghost: 'var(--foreground)',
+} as const;
+
 export type ButtonVariant = NonNullable<
   VariantProps<typeof buttonVariants>['variant']
 >;
@@ -74,7 +87,6 @@ export type ButtonSize = NonNullable<
 
 @Component({
   selector: 'ui-button',
-  standalone: true,
   imports: [LYNX_ELEMENTS, UiSpinner],
   encapsulation: ViewEncapsulation.None,
   template: `
@@ -100,7 +112,7 @@ export type ButtonSize = NonNullable<
       (bindtap)="onTap()"
     >
       @if (loading()) {
-        <ui-spinner [size]="spinnerSize()" />
+        <ui-spinner [size]="spinnerSize()" [color]="spinnerColor()" />
       } @else {
         <text [class]="labelClass()"><ng-content /></text>
       }
@@ -136,6 +148,10 @@ export class UiButton {
     return s === 'sm' ? ('xs' as const) : ('sm' as const);
   });
 
+  protected readonly spinnerColor = computed(
+    () => SPINNER_COLORS[this.variant()],
+  );
+
   protected onPressStart(): void {
     if (this.disabled() || this.loading()) return;
     // pressDown/pressRelease drive el.setStyle() based CSS transitions on the