@blotch/dolan 22.2.2 → 22.2.3

package/dist/ui/components/chart/index.ts

@@ -0,0 +1,24 @@
+export {
+  UiChart,
+  UiChartTooltip,
+  type UiChartTooltipContext,
+  tooltip,
+} from './chart';
+export {
+  type ChartColorScheme,
+  type ChartColorSchemeOption,
+  type ChartColorTokens,
+  CHART_DARK_COLORS,
+  CHART_LIGHT_COLORS,
+  DEFAULT_CHART_THEME,
+  UI_CHART_THEME,
+  type UiChartTheme,
+  provideChartTheme,
+  resolveChartPaint,
+} from './chart-theme';
+export {
+  type CartesianPresetOptions,
+  type ChartPadding,
+  type XYDatum,
+} from './chart-presets';
+export { type ChartViewport, type ChartZoomAxes } from './chart-zoom';

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

@@ -1,7 +1,8 @@
 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 {
   UiDialog,
@@ -12,7 +13,6 @@ import {
 } from './dialog';
 
 @Component({
-  standalone: true,
   imports: [
     UiDialog,
     UiDialogHeader,
@@ -36,6 +36,47 @@ class DialogHost {
 }
 
 describe('UiDialog', () => {
+  it('stops its close timers when it is destroyed while closing', async () => {
+    const warn = vi.spyOn(console, 'warn');
+    const { componentRef, unmount } = await render(UiDialog);
+    const inst = componentRef.instance as UiDialog;
+    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 dialog
+    // 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(UiDialog);
+    const inst = componentRef.instance as UiDialog;
+    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');
+  });
+
   it('renders header, title, description, and footer', async () => {
     const { getByText } = await render(DialogHost);
     expect(getByText('Title')).toBeTruthy();
@@ -91,12 +132,18 @@ describe('UiDialog', () => {
     // Covers the early-return branches in #animateIn / #animateOut.
     const { componentRef } = await render(UiDialog);
     const inst = componentRef.instance as UiDialog;
+    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('overlayStyle switches between visible and hidden variants', async () => {

package/dist/ui/components/dialog/dialog.ts

@@ -1,5 +1,6 @@
 import {
   type ElementRef,
+  type OnDestroy,
   Component,
   ViewEncapsulation,
   computed,
@@ -26,20 +27,24 @@ import { cn } from '../../utils/cn';
 
 @Component({
   selector: 'ui-dialog',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `
     <overlay [attr.visible]="overlayVisible()" [style]="overlayStyle()">
       <view #backdrop [class]="backdropClass()" (bindtap)="onBackdropTap()">
-        <view #panel [class]="panelClass()" (catchtap)="onPanelTap()">
+        <view
+          #panel
+          [class]="panelClass()"
+          [accessibility-exclusive-focus]="overlayVisible()"
+          (catchtap)="onPanelTap()"
+        >
           <ng-content />
         </view>
       </view>
     </overlay>
   `,
 })
-export class UiDialog {
+export class UiDialog implements OnDestroy {
   readonly open = model(false);
   readonly userClass = input<string>('', { alias: 'class' });
 
@@ -52,6 +57,9 @@ export class UiDialog {
   #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
@@ -110,15 +118,37 @@ export class UiDialog {
    */
   protected onPanelTap(): void {}
 
+  /**
+   * The dialog 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);
   }
 
@@ -127,9 +157,9 @@ export class UiDialog {
    * 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);
@@ -146,9 +176,14 @@ export class UiDialog {
 
     // Backdrop fades in first
     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');
 
     // Panel scales in with gentle spring (staggered 30ms after backdrop)
-    setTimeout(() => {
+    this.#later(() => {
       this.#panelAnim = scaleIn(panel, {
         duration: DURATION.slow,
         easing: EASING.springSubtle,
@@ -181,7 +216,6 @@ export class UiDialog {
 
 @Component({
   selector: 'ui-dialog-header',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `
@@ -200,7 +234,6 @@ export class UiDialogHeader {
 
 @Component({
   selector: 'ui-dialog-title',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `<text [class]="textClass()"><ng-content /></text>`,
@@ -215,7 +248,6 @@ export class UiDialogTitle {
 
 @Component({
   selector: 'ui-dialog-description',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `<text [class]="textClass()"><ng-content /></text>`,
@@ -230,7 +262,6 @@ export class UiDialogDescription {
 
 @Component({
   selector: 'ui-dialog-footer',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `

package/dist/ui/components/icon/icon-theme.test.ts

@@ -0,0 +1,133 @@
+import {
+  Injector,
+  type Provider,
+  runInInjectionContext,
+  signal,
+} from '@angular/core';
+import { LynxTheme } from '@blotch/angular-lynx';
+import { describe, expect, it } from 'vitest';
+import {
+  ICON_DARK_COLORS,
+  ICON_LIGHT_COLORS,
+  UI_ICON_COLOR,
+  UI_ICON_THEME,
+  injectIconColor,
+  provideIconTheme,
+  resolveIconColor,
+} from './icon-theme';
+
+const LIGHT_FOREGROUND = ICON_LIGHT_COLORS['foreground'];
+const DARK_FOREGROUND = ICON_DARK_COLORS['foreground'];
+
+/**
+ * Runs injectIconColor() against a device appearance and extra providers. A
+ * plain Injector has no root scope, so it gets the default theme explicitly;
+ * the token's own factory is covered by the component tests.
+ */
+const setup = (providers: Provider[] = [], dark = signal(false)) => {
+  const injector = Injector.create({
+    providers: [
+      { provide: LynxTheme, useValue: { isDarkMode: dark } },
+      {
+        provide: UI_ICON_THEME,
+        useValue: { light: ICON_LIGHT_COLORS, dark: ICON_DARK_COLORS },
+      },
+      ...providers,
+    ],
+  });
+  return runInInjectionContext(injector, () => injectIconColor());
+};
+
+describe('resolveIconColor', () => {
+  it('passes a literal color through', () => {
+    expect(resolveIconColor('#2563eb', ICON_LIGHT_COLORS)).toBe('#2563eb');
+    expect(resolveIconColor(' rgba(1, 2, 3, 1) ', ICON_LIGHT_COLORS)).toBe(
+      'rgba(1, 2, 3, 1)',
+    );
+  });
+
+  it('swaps a theme token for its value', () => {
+    expect(resolveIconColor('var(--primary)', ICON_LIGHT_COLORS)).toBe(
+      ICON_LIGHT_COLORS['primary'],
+    );
+    expect(resolveIconColor('var( --destructive )', ICON_DARK_COLORS)).toBe(
+      ICON_DARK_COLORS['destructive'],
+    );
+  });
+
+  it("falls back to the var()'s fallback for an unknown token", () => {
+    expect(resolveIconColor('var(--brand, #ff0000)', ICON_LIGHT_COLORS)).toBe(
+      '#ff0000',
+    );
+    // The fallback may itself be a token.
+    expect(
+      resolveIconColor('var(--brand, var(--primary))', ICON_LIGHT_COLORS),
+    ).toBe(ICON_LIGHT_COLORS['primary']);
+  });
+
+  it('falls back to the foreground for an unknown token with no fallback', () => {
+    expect(resolveIconColor('var(--brand)', ICON_LIGHT_COLORS)).toBe(
+      LIGHT_FOREGROUND,
+    );
+  });
+
+  it('leaves an unknown token as it is when the table has no foreground', () => {
+    expect(resolveIconColor('var(--brand)', {})).toBe('var(--brand)');
+  });
+});
+
+describe('provideIconTheme', () => {
+  it('merges the overrides over the default tables', () => {
+    const provider = provideIconTheme({
+      light: { primary: '#123456' },
+      colorScheme: 'dark',
+    }) as { provide: unknown; useValue: Record<string, unknown> };
+    expect(provider.provide).toBe(UI_ICON_THEME);
+    expect(provider.useValue['light']).toEqual({
+      ...ICON_LIGHT_COLORS,
+      primary: '#123456',
+    });
+    expect(provider.useValue['dark']).toEqual(ICON_DARK_COLORS);
+    expect(provider.useValue['colorScheme']).toBe('dark');
+  });
+});
+
+describe('injectIconColor', () => {
+  it('draws with the light foreground by default, even on a dark device', () => {
+    const resolve = setup([], signal(true));
+    expect(resolve(undefined)).toBe(LIGHT_FOREGROUND);
+  });
+
+  it('resolves an explicit color against the active table', () => {
+    const resolve = setup([provideIconTheme({ colorScheme: 'dark' })]);
+    expect(resolve('var(--primary)')).toBe(ICON_DARK_COLORS['primary']);
+    expect(resolve('#00ff00')).toBe('#00ff00');
+  });
+
+  it("follows the device appearance with 'system'", () => {
+    const dark = signal(false);
+    const resolve = setup([provideIconTheme({ colorScheme: 'system' })], dark);
+    expect(resolve(undefined)).toBe(LIGHT_FOREGROUND);
+    dark.set(true);
+    expect(resolve(undefined)).toBe(DARK_FOREGROUND);
+  });
+
+  it("reads the app's own theme state from a function", () => {
+    const scheme = signal<'light' | 'dark'>('dark');
+    const resolve = setup([provideIconTheme({ colorScheme: () => scheme() })]);
+    expect(resolve(undefined)).toBe(DARK_FOREGROUND);
+    scheme.set('light');
+    expect(resolve(undefined)).toBe(LIGHT_FOREGROUND);
+  });
+
+  it("uses the container's color when the icon sets none", () => {
+    const inherited = signal<string | undefined>('var(--destructive)');
+    const resolve = setup([{ provide: UI_ICON_COLOR, useValue: inherited }]);
+    expect(resolve(undefined)).toBe(ICON_LIGHT_COLORS['destructive']);
+    // The icon's own color still wins.
+    expect(resolve('var(--primary)')).toBe(ICON_LIGHT_COLORS['primary']);
+    // A container that sets no color leaves the foreground.
+    inherited.set(undefined);
+    expect(resolve(undefined)).toBe(LIGHT_FOREGROUND);
+  });
+});

package/dist/ui/components/icon/icon-theme.ts

@@ -0,0 +1,204 @@
+import {
+  computed,
+  inject,
+  InjectionToken,
+  type Provider,
+  type Signal,
+} from '@angular/core';
+import { LynxTheme } from '@blotch/angular-lynx';
+
+/**
+ * Colors for the components that draw with Lynx's `<svg>`: `<ui-icon>`,
+ * `<ui-spinner>`, and the parts built on them (pagination's chevrons, a loading
+ * button's spinner).
+ *
+ * ## Why colors live in TypeScript as well as CSS
+ * `<svg>` parses its markup by itself. It never sees the page's CSS: on the web
+ * preview the markup becomes an `<img>`, and the native elements in Lynx 4.1
+ * read only a literal `current-color`. So `var(--foreground)` and text color
+ * classes can't reach a stroke, and Lynx has no computed-style API to read a
+ * variable's value from JS. Instead these components take `var(--token)` colors
+ * and swap each for its value in the active table below before they write the
+ * markup. This mirrors how `<ui-chart>` colors its marks (`chart-theme.ts`).
+ *
+ * The tables mirror `default.css` and `dark.css` (a test in the theme folder
+ * keeps them in step). If you change a color there, change it here too, or pass
+ * your own with {@link provideIconTheme}.
+ */
+
+/** Theme token name (without `--`) to a complete CSS color. */
+export type IconColorTokens = Readonly<Record<string, string>>;
+
+export type IconColorScheme = 'light' | 'dark';
+
+/**
+ * Which table the colors come from: a fixed scheme, `'system'` to follow the
+ * device appearance (`LynxTheme`), or a function reading the app's own theme
+ * state.
+ *
+ * It has to match how the app switches its CSS theme, since the text next to an
+ * icon reads the CSS variables. The ui theme's dark mode is opt-in (the app
+ * toggles the `.dark` class), so the default is `'light'`: an icon in an app
+ * without dark mode stays visible when the device is dark.
+ */
+export type IconColorSchemeOption =
+  | IconColorScheme
+  | 'system'
+  | (() => IconColorScheme);
+
+export type UiIconTheme = {
+  /** Token values for light mode; mirrors `default.css`. */
+  readonly light: IconColorTokens;
+  /** Token values for dark mode; mirrors `dark.css`. */
+  readonly dark: IconColorTokens;
+  /** See {@link IconColorSchemeOption}; `'light'` when unset. */
+  readonly colorScheme?: IconColorSchemeOption;
+};
+
+export const ICON_LIGHT_COLORS: IconColorTokens = {
+  background: 'rgba(255, 255, 255, 1)',
+  foreground: 'rgba(9, 9, 11, 1)',
+  card: 'rgba(255, 255, 255, 1)',
+  'card-foreground': 'rgba(9, 9, 11, 1)',
+  primary: 'rgba(24, 24, 27, 1)',
+  'primary-foreground': 'rgba(250, 250, 250, 1)',
+  secondary: 'rgba(244, 244, 245, 1)',
+  'secondary-foreground': 'rgba(24, 24, 27, 1)',
+  muted: 'rgba(244, 244, 245, 1)',
+  'muted-foreground': 'rgba(113, 113, 122, 1)',
+  accent: 'rgba(244, 244, 245, 1)',
+  'accent-foreground': 'rgba(24, 24, 27, 1)',
+  destructive: 'rgba(239, 68, 68, 1)',
+  'destructive-foreground': 'rgba(250, 250, 250, 1)',
+  'destructive-subtle': 'rgba(239, 68, 68, 0.1)',
+  border: 'rgba(228, 228, 231, 1)',
+  input: 'rgba(228, 228, 231, 1)',
+  ring: 'rgba(24, 24, 27, 1)',
+  'ring-subtle': 'rgba(24, 24, 27, 0.4)',
+  'chart-1': 'rgba(231, 110, 80, 1)',
+  'chart-2': 'rgba(42, 157, 144, 1)',
+  'chart-3': 'rgba(39, 71, 84, 1)',
+  'chart-4': 'rgba(232, 196, 104, 1)',
+  'chart-5': 'rgba(244, 164, 98, 1)',
+};
+
+export const ICON_DARK_COLORS: IconColorTokens = {
+  background: 'rgba(9, 9, 11, 1)',
+  foreground: 'rgba(250, 250, 250, 1)',
+  card: 'rgba(9, 9, 11, 1)',
+  'card-foreground': 'rgba(250, 250, 250, 1)',
+  primary: 'rgba(250, 250, 250, 1)',
+  'primary-foreground': 'rgba(24, 24, 27, 1)',
+  secondary: 'rgba(39, 39, 42, 1)',
+  'secondary-foreground': 'rgba(250, 250, 250, 1)',
+  muted: 'rgba(39, 39, 42, 1)',
+  'muted-foreground': 'rgba(161, 161, 170, 1)',
+  accent: 'rgba(39, 39, 42, 1)',
+  'accent-foreground': 'rgba(250, 250, 250, 1)',
+  destructive: 'rgba(127, 29, 29, 1)',
+  'destructive-foreground': 'rgba(250, 250, 250, 1)',
+  'destructive-subtle': 'rgba(127, 29, 29, 0.1)',
+  border: 'rgba(39, 39, 42, 1)',
+  input: 'rgba(39, 39, 42, 1)',
+  ring: 'rgba(212, 212, 216, 1)',
+  'ring-subtle': 'rgba(212, 212, 216, 0.4)',
+  'chart-1': 'rgba(38, 98, 217, 1)',
+  'chart-2': 'rgba(46, 184, 138, 1)',
+  'chart-3': 'rgba(232, 140, 48, 1)',
+  'chart-4': 'rgba(175, 87, 219, 1)',
+  'chart-5': 'rgba(226, 54, 112, 1)',
+};
+
+export const UI_ICON_THEME = new InjectionToken<UiIconTheme>('UI_ICON_THEME', {
+  providedIn: 'root',
+  factory: () => ({ light: ICON_LIGHT_COLORS, dark: ICON_DARK_COLORS }),
+});
+
+/**
+ * Overrides icon colors, merged over the defaults: pass only the tokens you
+ * changed in your CSS, or just a color scheme.
+ *
+ * ```ts
+ * // An app that switches .dark with the device appearance:
+ * providers: [provideIconTheme({ colorScheme: 'system' })]
+ * ```
+ */
+export const provideIconTheme = (theme: {
+  light?: IconColorTokens;
+  dark?: IconColorTokens;
+  colorScheme?: IconColorSchemeOption;
+}): Provider => ({
+  provide: UI_ICON_THEME,
+  useValue: {
+    light: { ...ICON_LIGHT_COLORS, ...theme.light },
+    dark: { ...ICON_DARK_COLORS, ...theme.dark },
+    colorScheme: theme.colorScheme,
+  } satisfies UiIconTheme,
+});
+
+/**
+ * The color icons inside an element use when they're given none. A container
+ * whose variant recolors its content (a destructive nav drawer item) provides
+ * it, and every `<ui-icon>` projected into it picks it up through DI, the way
+ * text would inherit `color` on the web.
+ */
+export const UI_ICON_COLOR = new InjectionToken<Signal<string | undefined>>(
+  'UI_ICON_COLOR',
+);
+
+/** What an icon draws with when nothing sets its color. */
+export const DEFAULT_ICON_COLOR = 'var(--foreground)';
+
+/**
+ * Turns a color into one an SVG parser can draw: `var(--token)` (with or
+ * without a fallback) becomes the token's value. Anything else (`#2563eb`,
+ * `rgba(…)`) is already concrete and passes through.
+ */
+export const resolveIconColor = (
+  color: string,
+  tokens: IconColorTokens,
+): string => {
+  const value = color.trim();
+  if (!value.startsWith('var(') || !value.endsWith(')')) return value;
+
+  const inner = value.slice(4, -1);
+  // A custom property name can't contain a comma, so the first comma always
+  // separates the name from the fallback.
+  const comma = inner.indexOf(',');
+  const name = (comma < 0 ? inner : inner.slice(0, comma)).trim();
+  const token = tokens[name.replace(/^--/, '')];
+  if (token !== undefined) return token;
+  // An unknown token falls back the way CSS does: to the var()'s fallback when
+  // it has one, and otherwise to the foreground so the icon stays visible.
+  return comma < 0
+    ? (tokens['foreground'] ?? value)
+    : resolveIconColor(inner.slice(comma + 1), tokens);
+};
+
+/**
+ * For an SVG component's constructor: a function that resolves its `color`
+ * input (or, without one, the surrounding {@link UI_ICON_COLOR}, then the
+ * foreground) against the active color table. It reads signals, so a
+ * `computed()` calling it follows scheme and theme changes.
+ */
+export const injectIconColor = (): ((color: string | undefined) => string) => {
+  const theme = inject(UI_ICON_THEME);
+  const appearance = inject(LynxTheme);
+  const inherited = inject(UI_ICON_COLOR, { optional: true });
+
+  const tokens = computed(() => {
+    const option = theme.colorScheme ?? 'light';
+    const scheme =
+      option === 'system'
+        ? appearance.isDarkMode()
+          ? 'dark'
+          : 'light'
+        : typeof option === 'function'
+          ? option()
+          : option;
+    return scheme === 'dark' ? theme.dark : theme.light;
+  });
+
+  return (color) =>
+    resolveIconColor(color ?? inherited?.() ?? DEFAULT_ICON_COLOR, tokens());
+};

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

@@ -1,13 +1,18 @@
-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 { UiIcon } from './icon';
+import {
+  ICON_DARK_COLORS,
+  ICON_LIGHT_COLORS,
+  UI_ICON_COLOR,
+  provideIconTheme,
+} from './icon-theme';
 import { ICONS, type IconName } from './icons';
 
 @Component({
-  standalone: true,
   imports: [UiIcon, LYNX_ELEMENTS],
   template: `<ui-icon [name]="name" [size]="size" [color]="color" />`,
 })
@@ -43,6 +48,50 @@ describe('UiIcon', () => {
     expect(svg?.getAttribute('content')).toContain('rgb(255, 0, 0)');
     expect(svg?.getAttribute('content')).not.toContain('currentColor');
   });
+
+  it("draws in the light theme's foreground when no color is set", async () => {
+    const { componentRef, container } = await render(UiIcon);
+    setInputSignal((componentRef.instance as UiIcon).name, 'check' as IconName);
+    await waitForUpdate();
+    const content = container.querySelector('svg')?.getAttribute('content');
+    expect(content).toContain(ICON_LIGHT_COLORS['foreground']);
+    expect(content).not.toContain('currentColor');
+  });
+
+  it('resolves a theme token against the active color scheme', async () => {
+    const { componentRef, container } = await render(UiIcon, {
+      providers: [provideIconTheme({ colorScheme: 'dark' })],
+    });
+    const icon = componentRef.instance as UiIcon;
+    setInputSignal(icon.name, 'check' as IconName);
+    setInputSignal(icon.color, 'var(--primary)');
+    await waitForUpdate();
+    expect(container.querySelector('svg')?.getAttribute('content')).toContain(
+      ICON_DARK_COLORS['primary'],
+    );
+  });
+
+  it("takes its container's color when it sets none", async () => {
+    const { componentRef, container } = await render(UiIcon, {
+      providers: [
+        { provide: UI_ICON_COLOR, useValue: signal('var(--destructive)') },
+      ],
+    });
+    setInputSignal((componentRef.instance as UiIcon).name, 'x' as IconName);
+    await waitForUpdate();
+    expect(container.querySelector('svg')?.getAttribute('content')).toContain(
+      ICON_LIGHT_COLORS['destructive'],
+    );
+  });
+
+  it('applies the class input to the svg', async () => {
+    const { componentRef, container } = await render(UiIcon);
+    const icon = componentRef.instance as UiIcon;
+    setInputSignal(icon.name, 'check' as IconName);
+    setInputSignal(icon.userClass, 'mr-2');
+    await waitForUpdate();
+    expect(container.querySelector('svg')?.getAttribute('class')).toBe('mr-2');
+  });
 });
 
 describe('ICONS registry', () => {