@blotch/dolan 22.2.3 → 22.2.4

package/dist/ui/components/glass/glass.ts

@@ -0,0 +1,360 @@
+import {
+  booleanAttribute,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  numberAttribute,
+  ViewEncapsulation,
+} from '@angular/core';
+import { LYNX_ELEMENTS, LynxAccessibilitySettings } from '@blotch/angular-lynx';
+
+import { cn } from '../../utils/cn';
+import {
+  injectColorScheme,
+  resolveIconColor,
+  UI_ICON_COLOR,
+  UI_ICON_THEME,
+} from '../icon/icon-theme';
+import { injectGlassDesign, injectSystemDrawsGlass } from './glass-design';
+
+/**
+ * `'regular'` glass, the default, frosts what's behind it and suits most
+ * controls. `'clear'` glass barely frosts it, for controls over photos and
+ * video; put a dimming layer under it when what's behind is bright (see
+ * `bg-glass-dim`). Don't mix the two on one screen.
+ */
+export type GlassVariant = 'regular' | 'clear';
+
+/**
+ * A capsule (fully rounded ends, the default for controls), a circle (give
+ * it equal width and height) or a rectangle with `radius` corners.
+ */
+export type GlassShape = 'capsule' | 'circle' | 'rounded';
+
+/**
+ * What a glass element draws:
+ *
+ * - `'glass'`: Liquid Glass.
+ * - `'frosted'`: a blur material, on iOS 15 to 25.
+ * - `'solid'`: an opaque surface. That's Material on Android, unless the app
+ *   opted into glass there, and glass under Reduce Transparency on Android
+ *   and the web, which can't adapt the glass they draw. iOS adapts its own.
+ */
+export type GlassSurface = 'glass' | 'frosted' | 'solid';
+
+/**
+ * How much the glass blurs where the blur is drawn by the runtime: Android's
+ * approximation, and the web before WebGL takes over. iOS's glass ignores it.
+ * Clear glass barely blurs.
+ */
+const GLASS_BLUR: Readonly<Record<GlassVariant, string>> = {
+  regular: '16px',
+  clear: '6px',
+};
+
+/** The blur of the frosted materials before iOS 26. */
+const FROSTED_BLUR = '20px';
+
+/**
+ * A solid surface floats over the content as glass does, so it gets
+ * Material's elevation shadow (level 2). An inline style, because Tailwind's
+ * shadow classes draw nothing on Lynx.
+ */
+const SOLID_ELEVATION =
+  '0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15)';
+
+/** AngularLynx's wrapper of the native `blur-view` the component sits on. */
+type BlurViewElement = { setAttribute(name: string, value: unknown): void };
+
+/**
+ * The color an icon projected into the glass draws with when it's given
+ * none: the glass's foreground (see UI_ICON_COLOR), the way text there reads
+ * `text-glass-foreground`. A named function, not an inline factory: the
+ * component's metadata keeps its own copy of an inline one, which nothing
+ * calls, so an app's coverage report would show it as uncovered.
+ */
+const glassIconColor = () => {
+  const glass = inject(UiGlass);
+  return computed(() => glass.foreground());
+};
+
+/**
+ * Liquid Glass, for the controls and bars that float above an app's content:
+ * a `<blur-view>` that draws the right material on each platform.
+ *
+ * ```html
+ * <blur-view ui-glass class="flex-row items-center gap-2 px-4 py-2">
+ *   <text class="text-glass-foreground">Now playing</text>
+ * </blur-view>
+ * ```
+ *
+ * It sits on the `<blur-view>` itself rather than wrapping one, so the
+ * element you lay out and style is the glass, and what you put in it is
+ * inside the glass. That matters on iOS: interactive glass reacts only to
+ * touches on itself and what's in it, not on views stacked over it.
+ *
+ * What it draws follows the platform (see GlassDesign): UIKit's Liquid Glass
+ * on iOS 26 and later, a frosted blur material on iOS 15 to 25, an opaque
+ * Material surface on Android unless the app opts into glass with
+ * `provideGlass({ android: 'glass' })`, and the runtime's WebGL glass in the
+ * web preview. It also follows the user's accessibility settings where the
+ * platform doesn't: see {@link surface}.
+ *
+ * Text and icons inside read `text-glass-foreground` (and
+ * `text-glass-muted-foreground`), which the glass points at the right color
+ * for its variant and the user's contrast setting. Glass belongs to the
+ * layer above content, and shouldn't be layered on glass.
+ */
+@Component({
+  selector: 'blur-view[ui-glass]',
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  // Icons projected into the glass inject this through its element injector,
+  // which content projection keeps them under.
+  providers: [{ provide: UI_ICON_COLOR, useFactory: glassIconColor }],
+  host: {
+    '[class]': 'surfaceClass()',
+    '[style.border-radius.px]': 'cornerRadius()',
+    '[style.background-color]': 'solidTint()',
+    '[style.box-shadow]': 'elevation()',
+  },
+  // iOS draws no background on a blur view, so a frosted material takes its
+  // tint from a fill under the content, the shape of the glass: the filled
+  // button of the design before Liquid Glass.
+  template: `
+    @if (frostedTint(); as color) {
+      <view
+        [class]="fillClass()"
+        [style.background-color]="color"
+        [style.border-radius.px]="cornerRadius()"
+      ></view>
+    }
+    <ng-content />
+  `,
+})
+export class UiGlass {
+  /** `'regular'` or `'clear'`; see GlassVariant. */
+  readonly variant = input<GlassVariant>('regular');
+  /** `'capsule'`, `'circle'` or `'rounded'`; see GlassShape. */
+  readonly shape = input<GlassShape>('capsule');
+  /**
+   * The corner radius of a `'rounded'` shape, in px. For a shape nested in
+   * it, see `concentricRadius()`.
+   */
+  readonly radius = input(20, { transform: numberAttribute });
+  /**
+   * A color the glass takes on, such as `var(--glass-tint)` for the theme's
+   * tint or `#2563eb`: a theme token or any CSS color. Use it sparingly, for
+   * the screen's main action. It fills a solid surface or a frosted
+   * material, as Material, and iOS before Liquid Glass, fill a button.
+   */
+  readonly tint = input<string | undefined>(undefined);
+  /**
+   * The glass reacts to touch, swelling and brightening under the finger as
+   * a Liquid Glass control does: on iOS 26 and later, and in the web preview.
+   */
+  readonly interactive = input(false, { transform: booleanAttribute });
+
+  readonly #settings = inject(LynxAccessibilitySettings);
+  readonly #systemDrawsGlass = injectSystemDrawsGlass();
+  readonly #scheme = injectColorScheme();
+  readonly #theme = inject(UI_ICON_THEME);
+  readonly #host = inject<ElementRef<BlurViewElement>>(ElementRef);
+
+  /**
+   * The design on this platform, which components built on the glass follow
+   * for their own form (see GlassDesign).
+   */
+  readonly design = injectGlassDesign();
+
+  /**
+   * What the glass draws (see GlassSurface): the design's material, or an
+   * opaque surface. Where the runtime draws the glass (Android's opt-in and
+   * the web), Reduce Transparency turns it opaque, as UIKit turns its own.
+   */
+  readonly surface = computed<GlassSurface>(() => {
+    const design = this.design();
+    if (design === 'material') return 'solid';
+    if (!this.#systemDrawsGlass && this.#settings.reduceTransparency()) {
+      return 'solid';
+    }
+    return design;
+  });
+
+  /** Whether what's behind shows through clear glass. */
+  readonly #seeThrough = computed(
+    () => this.variant() === 'clear' && this.surface() !== 'solid',
+  );
+
+  /**
+   * The color of text and icons on this glass, as a `var()`: the clear
+   * foreground on see-through clear glass, which sits over photos and video,
+   * and the glass foreground otherwise. Projected `<ui-icon>`s get it, and an
+   * SVG of your own can resolve it the way icons do (see icon-theme.ts).
+   */
+  readonly foreground = computed(() =>
+    this.#seeThrough()
+      ? 'var(--glass-clear-foreground)'
+      : 'var(--glass-foreground)',
+  );
+
+  /**
+   * The tint as a color the native element can parse: an attribute can't
+   * read CSS variables, so a theme token is swapped for its value in the
+   * active scheme, as icons do.
+   */
+  readonly #tintColor = computed(() => {
+    const tint = this.tint();
+    return tint ? resolveIconColor(tint, this.#theme[this.#scheme()]) : null;
+  });
+
+  /**
+   * A tinted solid surface is filled with the tint, as Material's filled
+   * buttons are, and as iOS draws tinted glass under Reduce Transparency.
+   */
+  protected readonly solidTint = computed(() =>
+    this.surface() === 'solid' ? this.#tintColor() : null,
+  );
+
+  protected readonly frostedTint = computed(() =>
+    this.surface() === 'frosted' ? this.#tintColor() : null,
+  );
+
+  protected readonly fillClass = computed(() =>
+    cn(
+      'h-full w-full absolute left-0 top-0',
+      this.shape() !== 'rounded' && 'rounded-full',
+    ),
+  );
+
+  protected readonly elevation = computed(() =>
+    this.surface() === 'solid' ? SOLID_ELEVATION : null,
+  );
+
+  protected readonly cornerRadius = computed(() =>
+    this.shape() === 'rounded' ? this.radius() : null,
+  );
+
+  protected readonly surfaceClass = computed(() => {
+    const increaseContrast = this.#settings.increaseContrast();
+    return cn(
+      this.shape() !== 'rounded' && 'rounded-full',
+      // Material's tonal surface, and the opaque glass of Reduce
+      // Transparency, unless a tint fills it (see solidTint). iOS ignores a
+      // blur-view's background, but never draws a solid surface.
+      this.surface() === 'solid' && !this.tint() && 'bg-secondary',
+      // Increase Contrast gives the glass a visible edge, as UIKit gives its
+      // own glass one.
+      increaseContrast &&
+        !this.#systemDrawsGlass &&
+        'border border-glass-foreground',
+      // The glass points the foreground tokens its content reads at the
+      // right color (a variable redefined here reaches the projected text,
+      // since variables inherit and `color` doesn't): white on see-through
+      // clear glass, and full strength for muted text under Increase
+      // Contrast.
+      this.#seeThrough()
+        ? '[--glass-foreground:var(--glass-clear-foreground)] [--glass-muted-foreground:var(--glass-clear-foreground)]'
+        : increaseContrast &&
+            '[--glass-muted-foreground:var(--glass-foreground)]',
+    );
+  });
+
+  /**
+   * The blur-view's attributes for the surface. Glass is forced to the app's
+   * color scheme (`ios-user-interface-style`), which iOS would otherwise take
+   * from the device: an app in its light theme on a phone in dark mode would
+   * get dark glass under dark text. The frosted materials before iOS 26 don't
+   * adapt to dark mode, so the scheme picks one. A solid surface turns the
+   * blur off, and on Android stops the blur-view redrawing the page behind it
+   * on every frame (`enable-auto-blur`), which it does even with no radius.
+   */
+  readonly #attributes = computed(() => {
+    const surface = this.surface();
+    const variant = this.variant();
+    const dark = this.#scheme() === 'dark';
+    let effect = 'light';
+    let radius = '0px';
+    if (surface === 'glass') {
+      effect = 'glass';
+      radius = GLASS_BLUR[variant];
+    } else if (surface === 'frosted') {
+      // Apple's controls over media used the dark material in either theme.
+      effect = dark || variant === 'clear' ? 'dark' : 'extra-light';
+      radius = FROSTED_BLUR;
+    }
+    return {
+      'blur-effect': effect,
+      'blur-radius': radius,
+      'enable-auto-blur': surface !== 'solid',
+      'glass-style': variant,
+      'glass-tint-color': this.#tintColor(),
+      'glass-interactive': this.interactive() || null,
+      'ios-user-interface-style': dark ? 'dark' : 'light',
+    };
+  });
+
+  // Set on the element as they are, rather than through host attribute
+  // bindings, which turn every value into a string: Lynx reads
+  // `glass-interactive` and `enable-auto-blur` as booleans. `null` removes an
+  // attribute, which restores Lynx's default.
+  protected readonly material = effect(() => {
+    const element = this.#host.nativeElement;
+    for (const [name, value] of Object.entries(this.#attributes())) {
+      element.setAttribute(name, value);
+    }
+  });
+}
+
+/**
+ * Merges the glass elements inside it, as iOS 26 draws a group of glass
+ * controls: shapes closer than `spacing` flow into each other like droplets,
+ * and the group draws them in one pass. Put a `<blur-view ui-glass>` directly
+ * inside it for each shape: iOS merges the glass in the group's own content,
+ * and a wrapper that draws anything of its own comes between them.
+ *
+ * ```html
+ * <blur-view ui-glass-group [spacing]="16" class="flex-row gap-2">
+ *   <blur-view ui-glass shape="circle" class="h-12 w-12">…</blur-view>
+ *   <blur-view ui-glass shape="circle" class="h-12 w-12">…</blur-view>
+ * </blur-view>
+ * ```
+ *
+ * The group draws nothing itself. Shapes merge on iOS 26 and later and in
+ * the web preview. Android's glass doesn't merge, and the frosted and
+ * Material designs have no glass to merge.
+ *
+ * Moving or resizing a shape, with a CSS transition for example, morphs the
+ * merged glass with it. A shape that's added or removed appears or
+ * disappears at once: iOS's glass doesn't animate that in Lynx.
+ */
+@Component({
+  selector: 'blur-view[ui-glass-group]',
+  encapsulation: ViewEncapsulation.None,
+  template: `<ng-content />`,
+})
+export class UiGlassGroup {
+  /** How close two glass shapes come before they merge, in px. */
+  readonly spacing = input(0, { transform: numberAttribute });
+
+  readonly #design = injectGlassDesign();
+  readonly #host = inject<ElementRef<BlurViewElement>>(ElementRef);
+
+  // As UiGlass sets its own (see there). A container that isn't merging
+  // glass is a plain transparent view: `light` with no radius draws nothing,
+  // where `glass-container` would log an error before iOS 26. It never blurs,
+  // so on Android it never redraws the page behind it either.
+  protected readonly material = effect(() => {
+    const element = this.#host.nativeElement;
+    element.setAttribute(
+      'blur-effect',
+      this.#design() === 'glass' ? 'glass-container' : 'light',
+    );
+    element.setAttribute('blur-radius', '0px');
+    element.setAttribute('enable-auto-blur', false);
+    element.setAttribute('spacing', this.spacing());
+  });
+}

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

@@ -0,0 +1,18 @@
+export {
+  UiGlass,
+  UiGlassGroup,
+  type GlassShape,
+  type GlassSurface,
+  type GlassVariant,
+} from './glass';
+export {
+  FIRST_GLASS_IOS,
+  UI_GLASS_OPTIONS,
+  glassDesignFor,
+  injectGlassDesign,
+  injectSystemDrawsGlass,
+  provideGlass,
+  type GlassDesign,
+  type GlassOptions,
+} from './glass-design';
+export { concentricRadius } from './concentric-radius';

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

@@ -11,6 +11,7 @@ import {
   ICON_LIGHT_COLORS,
   UI_ICON_COLOR,
   UI_ICON_THEME,
+  injectColorScheme,
   injectIconColor,
   provideIconTheme,
   resolveIconColor,
@@ -92,6 +93,41 @@ describe('provideIconTheme', () => {
   });
 });
 
+describe('injectColorScheme', () => {
+  const scheme = (providers: Provider[], dark = signal(false)) =>
+    runInInjectionContext(
+      Injector.create({
+        providers: [
+          { provide: LynxTheme, useValue: { isDarkMode: dark } },
+          {
+            provide: UI_ICON_THEME,
+            useValue: { light: ICON_LIGHT_COLORS, dark: ICON_DARK_COLORS },
+          },
+          ...providers,
+        ],
+      }),
+      () => injectColorScheme(),
+    );
+
+  it("is light unless the theme says otherwise, whatever the device's appearance", () => {
+    expect(scheme([], signal(true))()).toBe('light');
+    expect(scheme([provideIconTheme({ colorScheme: 'dark' })])()).toBe('dark');
+  });
+
+  it("follows the device with 'system', or the app's own state", () => {
+    const dark = signal(false);
+    const system = scheme([provideIconTheme({ colorScheme: 'system' })], dark);
+    expect(system()).toBe('light');
+    dark.set(true);
+    expect(system()).toBe('dark');
+
+    const own = signal<'light' | 'dark'>('dark');
+    expect(scheme([provideIconTheme({ colorScheme: () => own() })])()).toBe(
+      'dark',
+    );
+  });
+});
+
 describe('injectIconColor', () => {
   it('draws with the light foreground by default, even on a dark device', () => {
     const resolve = setup([], signal(true));

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

@@ -80,6 +80,12 @@ export const ICON_LIGHT_COLORS: IconColorTokens = {
   'chart-3': 'rgba(39, 71, 84, 1)',
   'chart-4': 'rgba(232, 196, 104, 1)',
   'chart-5': 'rgba(244, 164, 98, 1)',
+  'glass-tint': 'rgba(24, 24, 27, 1)',
+  'glass-tint-foreground': 'rgba(250, 250, 250, 1)',
+  'glass-foreground': 'rgba(9, 9, 11, 1)',
+  'glass-muted-foreground': 'rgba(63, 63, 70, 1)',
+  'glass-clear-foreground': 'rgba(255, 255, 255, 1)',
+  'glass-dim': 'rgba(0, 0, 0, 0.35)',
 };
 
 export const ICON_DARK_COLORS: IconColorTokens = {
@@ -107,6 +113,12 @@ export const ICON_DARK_COLORS: IconColorTokens = {
   'chart-3': 'rgba(232, 140, 48, 1)',
   'chart-4': 'rgba(175, 87, 219, 1)',
   'chart-5': 'rgba(226, 54, 112, 1)',
+  'glass-tint': 'rgba(250, 250, 250, 1)',
+  'glass-tint-foreground': 'rgba(24, 24, 27, 1)',
+  'glass-foreground': 'rgba(250, 250, 250, 1)',
+  'glass-muted-foreground': 'rgba(212, 212, 216, 1)',
+  'glass-clear-foreground': 'rgba(255, 255, 255, 1)',
+  'glass-dim': 'rgba(0, 0, 0, 0.35)',
 };
 
 export const UI_ICON_THEME = new InjectionToken<UiIconTheme>('UI_ICON_THEME', {
@@ -175,6 +187,26 @@ export const resolveIconColor = (
     : resolveIconColor(inner.slice(comma + 1), tokens);
 };
 
+/**
+ * The color scheme the app's theme is in, as {@link provideIconTheme} sets it
+ * (`'light'` unless it says otherwise). For what has to match the app's CSS
+ * theme but can't read it: icons pick their color table with it, and glass
+ * picks a light or dark material.
+ */
+export const injectColorScheme = (): Signal<IconColorScheme> => {
+  const option = inject(UI_ICON_THEME).colorScheme ?? 'light';
+  const appearance = inject(LynxTheme);
+  return computed(() =>
+    option === 'system'
+      ? appearance.isDarkMode()
+        ? 'dark'
+        : 'light'
+      : typeof option === 'function'
+        ? option()
+        : option,
+  );
+};
+
 /**
  * For an SVG component's constructor: a function that resolves its `color`
  * input (or, without one, the surrounding {@link UI_ICON_COLOR}, then the
@@ -183,21 +215,12 @@ export const resolveIconColor = (
  */
 export const injectIconColor = (): ((color: string | undefined) => string) => {
   const theme = inject(UI_ICON_THEME);
-  const appearance = inject(LynxTheme);
+  const scheme = injectColorScheme();
   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;
-  });
+  const tokens = computed(() =>
+    scheme() === 'dark' ? theme.dark : theme.light,
+  );
 
   return (color) =>
     resolveIconColor(color ?? inherited?.() ?? DEFAULT_ICON_COLOR, tokens());

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

@@ -1,8 +1,6 @@
 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,
@@ -13,84 +11,97 @@ import {
 import { ICONS, type IconName } from './icons';
 
 @Component({
-  imports: [UiIcon, LYNX_ELEMENTS],
-  template: `<ui-icon [name]="name" [size]="size" [color]="color" />`,
+  imports: [UiIcon],
+  template: `
+    <ui-icon
+      [name]="name()"
+      [size]="size()"
+      [color]="color()"
+      [class]="className()"
+    />
+  `,
 })
 class IconHost {
-  name: IconName = 'check';
-  size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
-  color?: string;
+  readonly name = signal<IconName>('check');
+  readonly size = signal<'xs' | 'sm' | 'md' | 'lg'>('md');
+  readonly color = signal<string | undefined>(undefined);
+  readonly className = signal('');
 }
 
+const renderIcon = async (providers: Parameters<typeof render>[1] = {}) => {
+  const result = await render(IconHost, providers);
+  return {
+    ...result,
+    host: result.componentRef.instance as IconHost,
+    svg: () => result.container.querySelector('svg')!,
+  };
+};
+
 describe('UiIcon', () => {
-  it('renders the requested icon at default size', async () => {
-    const { container } = await render(IconHost);
-    expect(container).toBeTruthy();
+  it('draws the named icon at the default size', async () => {
+    const { svg } = await renderIcon();
+    expect(svg().getAttribute('style')).toContain('24px');
+    expect(svg().getAttribute('content')).toContain('<svg');
+  });
+
+  it('draws another icon when the name changes', async () => {
+    const { host, svg } = await renderIcon();
+    const check = svg().getAttribute('content');
+    host.name.set('x');
+    await waitForUpdate();
+    expect(svg().getAttribute('content')).not.toBe(check);
   });
 
   it('applies the size input to the width/height style', async () => {
-    // JIT template bindings are inert against `input()` — drive the signals
-    // directly so sizeStyle and svgContent both re-run.
-    const { componentRef, container } = await render(UiIcon);
-    setInputSignal((componentRef.instance as UiIcon).name, 'check' as IconName);
-    setInputSignal((componentRef.instance as UiIcon).size, 'xs');
+    const { host, svg } = await renderIcon();
+    host.size.set('xs');
     await waitForUpdate();
-    const svg = container.querySelector('svg');
-    expect(svg?.getAttribute('style')).toContain('16px');
+    expect(svg().getAttribute('style')).toContain('16px');
   });
 
   it('substitutes currentColor with the color input value', async () => {
-    const { componentRef, container } = await render(UiIcon);
-    setInputSignal((componentRef.instance as UiIcon).name, 'check' as IconName);
-    setInputSignal((componentRef.instance as UiIcon).color, 'rgb(255, 0, 0)');
+    // Lynx's SVG parser reads neither `currentColor` nor CSS variables.
+    const { host, svg } = await renderIcon();
+    host.color.set('rgb(255, 0, 0)');
     await waitForUpdate();
-    const svg = container.querySelector('svg');
-    expect(svg?.getAttribute('content')).toContain('rgb(255, 0, 0)');
-    expect(svg?.getAttribute('content')).not.toContain('currentColor');
+    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');
+    const { svg } = await renderIcon();
+    const content = 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, {
+    const { host, svg } = await renderIcon({
       providers: [provideIconTheme({ colorScheme: 'dark' })],
     });
-    const icon = componentRef.instance as UiIcon;
-    setInputSignal(icon.name, 'check' as IconName);
-    setInputSignal(icon.color, 'var(--primary)');
+    host.color.set('var(--primary)');
     await waitForUpdate();
-    expect(container.querySelector('svg')?.getAttribute('content')).toContain(
+    expect(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, {
+    const { svg } = await renderIcon({
       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(
+    expect(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');
+    const { host, svg } = await renderIcon();
+    host.className.set('mr-2');
     await waitForUpdate();
-    expect(container.querySelector('svg')?.getAttribute('class')).toBe('mr-2');
+    expect(svg().getAttribute('class')).toBe('mr-2');
   });
 });