@blotch/dolan 22.2.4 → 22.2.6

package/dist/ui/components/dynamic-color/dynamic-color.test.ts

@@ -0,0 +1,144 @@
+import { Component, computed, signal } from '@angular/core';
+import {
+  DYNAMIC_COLOR_ROLES,
+  LYNX_ELEMENTS,
+  LynxTheme,
+  type DynamicColors,
+  type DynamicColorScheme,
+} from '@blotch/angular-lynx';
+import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { describe, expect, it } from 'vitest';
+import {
+  ICON_LIGHT_COLORS,
+  injectIconColor,
+  provideIconTheme,
+} from '../icon/icon-theme';
+import {
+  DYNAMIC_THEME_ROLES,
+  UiDynamicColor,
+  dynamicThemeColors,
+} from './dynamic-color';
+
+/**
+ * A scheme in one color, with a primary of its own.
+ */
+const scheme = (color: string, primary: string): DynamicColorScheme =>
+  ({
+    ...Object.fromEntries(DYNAMIC_COLOR_ROLES.map((role) => [role, color])),
+    primary,
+  }) as DynamicColorScheme;
+
+const WALLPAPER: DynamicColors = {
+  light: { ...scheme('#fef7ff', '#6750a4'), onSurface: '#1d1b20' },
+  dark: { ...scheme('#141218', '#d0bcff'), onSurface: '#e6e0e9' },
+};
+
+/**
+ * What an icon inside the element draws `var(--primary)` with.
+ */
+@Component({
+  selector: 'test-swatch',
+  imports: [LYNX_ELEMENTS],
+  template: `<text class="swatch">{{ primary() }}</text>`,
+})
+class Swatch {
+  readonly #resolve = injectIconColor();
+  protected readonly primary = computed(() => this.#resolve('var(--primary)'));
+}
+
+@Component({
+  imports: [LYNX_ELEMENTS, UiDynamicColor, Swatch],
+  template: `
+    <view class="root" style="height: 100%" uiDynamicColor>
+      <test-swatch />
+    </view>
+  `,
+})
+class Host {}
+
+const setup = async (colors: DynamicColors | null) => {
+  const dynamicColors = signal(colors);
+  const colorScheme = signal<'light' | 'dark'>('light');
+  const result = await render(Host, {
+    providers: [
+      { provide: LynxTheme, useValue: { dynamicColors } },
+      provideIconTheme({ colorScheme: () => colorScheme() }),
+    ],
+  });
+  const root = result.container.querySelector('.root') as HTMLElement;
+  const swatch = () => result.container.querySelector('.swatch')?.textContent;
+  return { dynamicColors, colorScheme, root, swatch };
+};
+
+describe('dynamicThemeColors', () => {
+  it('gives each theme color its role’s color, and the ring’s subtle form at 40%', () => {
+    const colors = dynamicThemeColors(WALLPAPER.light);
+    expect(colors['primary']).toBe('rgba(103, 80, 164, 1)');
+    expect(colors['ring']).toBe('rgba(103, 80, 164, 1)');
+    expect(colors['ring-subtle']).toBe('rgba(103, 80, 164, 0.4)');
+    expect(colors['foreground']).toBe('rgba(29, 27, 32, 1)');
+    expect(colors['background']).toBe('rgba(254, 247, 255, 1)');
+  });
+
+  it('leaves the destructive and chart colors to the theme', () => {
+    const colors = dynamicThemeColors(WALLPAPER.light);
+    expect(Object.keys(colors)).not.toContain('destructive');
+    expect(Object.keys(colors)).not.toContain('chart-1');
+    expect(Object.keys(colors)).not.toContain('glass-dim');
+  });
+
+  it('only maps theme colors that exist', () => {
+    for (const token of Object.keys(DYNAMIC_THEME_ROLES)) {
+      expect(ICON_LIGHT_COLORS[token]).toBeDefined();
+    }
+  });
+});
+
+describe('UiDynamicColor', () => {
+  it('sets the theme’s variables and their -rgb twins to the wallpaper’s colors', async () => {
+    const { root } = await setup(WALLPAPER);
+    expect(root.style.getPropertyValue('--primary')).toBe(
+      'rgba(103, 80, 164, 1)',
+    );
+    expect(root.style.getPropertyValue('--primary-rgb')).toBe('103, 80, 164');
+    expect(root.style.getPropertyValue('--foreground-rgb')).toBe('29, 27, 32');
+    expect(root.style.getPropertyValue('--ring-subtle')).toBe(
+      'rgba(103, 80, 164, 0.4)',
+    );
+    expect(root.style.getPropertyValue('--ring-subtle-rgb')).toBe('');
+    // The element's own style stays.
+    expect(root.style.getPropertyValue('height')).toBe('100%');
+  });
+
+  it('sets the scheme the app is in', async () => {
+    const { root, colorScheme } = await setup(WALLPAPER);
+    colorScheme.set('dark');
+    await waitForUpdate();
+    expect(root.style.getPropertyValue('--primary')).toBe(
+      'rgba(208, 188, 255, 1)',
+    );
+  });
+
+  it('gives icons inside it the same colors', async () => {
+    const { swatch, colorScheme } = await setup(WALLPAPER);
+    expect(swatch()).toBe('rgba(103, 80, 164, 1)');
+    colorScheme.set('dark');
+    await waitForUpdate();
+    expect(swatch()).toBe('rgba(208, 188, 255, 1)');
+  });
+
+  it('leaves the theme as it is where the host sends no colors, and when they go', async () => {
+    const { root, swatch, dynamicColors } = await setup(null);
+    expect(root.style.getPropertyValue('--primary')).toBe('');
+    expect(swatch()).toBe(ICON_LIGHT_COLORS['primary']);
+
+    dynamicColors.set(WALLPAPER);
+    await waitForUpdate();
+    expect(swatch()).toBe('rgba(103, 80, 164, 1)');
+
+    dynamicColors.set(null);
+    await waitForUpdate();
+    expect(root.style.getPropertyValue('--primary')).toBe('');
+    expect(swatch()).toBe(ICON_LIGHT_COLORS['primary']);
+  });
+});

package/dist/ui/components/dynamic-color/dynamic-color.ts

@@ -0,0 +1,146 @@
+import { computed, Directive, inject } from '@angular/core';
+import {
+  LynxTheme,
+  type DynamicColorRole,
+  type DynamicColorScheme,
+} from '@blotch/angular-lynx';
+
+import {
+  injectColorScheme,
+  UI_THEME_COLORS,
+  type IconColorTokens,
+  type ThemeColors,
+} from '../icon/icon-theme';
+
+/**
+ * The Material 3 role each theme color takes from the wallpaper, so that
+ * everything drawn with the theme, the Material designs and the app's own
+ * classes alike, follows it with no colors of its own to set.
+ *
+ * - The app and its cards stand on the surface, and the Material designs'
+ *   tonal surfaces (`bg-secondary`: bars, sheets, menus, the switch's track)
+ *   on a surface container.
+ * - Selected items (`bg-accent`) take the secondary container, as Material's
+ *   selected chips and navigation items do.
+ * - The destructive and chart colors aren't the wallpaper's: Material keeps
+ *   errors red, and a chart's series tell data apart. So they stay the
+ *   theme's, as do the clear glass's white and the dimming layer under it.
+ */
+export const DYNAMIC_THEME_ROLES: Readonly<Record<string, DynamicColorRole>> = {
+  background: 'surface',
+  foreground: 'onSurface',
+  card: 'surface',
+  'card-foreground': 'onSurface',
+  primary: 'primary',
+  'primary-foreground': 'onPrimary',
+  secondary: 'surfaceContainerHigh',
+  'secondary-foreground': 'onSurface',
+  muted: 'surfaceContainerHighest',
+  'muted-foreground': 'onSurfaceVariant',
+  accent: 'secondaryContainer',
+  'accent-foreground': 'onSecondaryContainer',
+  border: 'outlineVariant',
+  input: 'outlineVariant',
+  ring: 'primary',
+  'glass-tint': 'primary',
+  'glass-tint-foreground': 'onPrimary',
+  'glass-foreground': 'onSurface',
+  'glass-muted-foreground': 'onSurfaceVariant',
+};
+
+/**
+ * `#6750a4` as `103, 80, 164`, the form of the theme's `-rgb` twins.
+ */
+const channels = (hex: string): string =>
+  [1, 3, 5]
+    .map((start) => parseInt(hex.slice(start, start + 2), 16))
+    .join(', ');
+
+/**
+ * The theme's colors in a dynamic color scheme, by token name without `--`,
+ * each a complete `rgba()`, as the theme and its TypeScript copies write
+ * them. `ring-subtle` is the ring at 40%, as in the theme.
+ */
+export const dynamicThemeColors = (
+  scheme: DynamicColorScheme,
+): IconColorTokens => {
+  const colors: Record<string, string> = {};
+  for (const [token, role] of Object.entries(DYNAMIC_THEME_ROLES)) {
+    colors[token] = `rgba(${channels(scheme[role])}, 1)`;
+  }
+  colors['ring-subtle'] = `rgba(${channels(scheme.primary)}, 0.4)`;
+  return colors;
+};
+
+/**
+ * The CSS variables that give a theme color its value in a scheme: the color,
+ * and for an opaque one its `-rgb` twin, which opacity modifiers such as
+ * `bg-primary/50` read.
+ */
+const themeVariables = (scheme: DynamicColorScheme): Record<string, string> => {
+  const variables: Record<string, string> = {};
+  for (const [token, color] of Object.entries(dynamicThemeColors(scheme))) {
+    variables[`--${token}`] = color;
+  }
+  for (const [token, role] of Object.entries(DYNAMIC_THEME_ROLES)) {
+    variables[`--${token}-rgb`] = channels(scheme[role]);
+  }
+  return variables;
+};
+
+const providedColors = () => inject(UiDynamicColor).colors;
+
+/**
+ * Colors the theme from the user's wallpaper on Android 12 and later
+ * (Material You's dynamic color), for everything inside the element it's on.
+ * Put it on the app's root view, the one that switches the `dark` class:
+ *
+ * ```html
+ * <view class="h-full bg-background" [class.dark]="theme.isDarkMode()" uiDynamicColor>
+ * ```
+ *
+ * It sets the theme's own CSS variables (`--primary`, `--secondary` and the
+ * others, with their `-rgb` twins) to the wallpaper's Material 3 roles (see
+ * {@link DYNAMIC_THEME_ROLES}), inline, where they win over the theme's
+ * `page` and `.dark` values. So the Material designs, and the app's own
+ * `bg-primary` and `text-muted-foreground`, follow the wallpaper without a
+ * second set of colors. Icons, glass tints and charts inside it, which draw
+ * with a TypeScript copy of the theme, get the same colors.
+ *
+ * Which scheme it sets, light or dark, follows `provideIconTheme()`'s
+ * `colorScheme`, as icons do: make it match the `dark` class.
+ *
+ * Where the host app sends no wallpaper colors (iOS, the web preview, Lynx
+ * Explorer, Android before 12), it sets nothing and the theme stays as it is.
+ * The colors come from `LynxTheme.dynamicColors`, which the Android app
+ * `ng build --platform android` makes sends.
+ */
+@Directive({
+  selector: '[uiDynamicColor]',
+  host: { '[style]': 'style()' },
+  providers: [{ provide: UI_THEME_COLORS, useFactory: providedColors }],
+})
+export class UiDynamicColor {
+  readonly #dynamicColors = inject(LynxTheme).dynamicColors;
+  readonly #scheme = injectColorScheme();
+
+  /**
+   * The theme's colors in each scheme from the wallpaper, or none, for what
+   * draws inside the element and can't read its CSS variables (see
+   * UI_THEME_COLORS).
+   */
+  readonly colors = computed<ThemeColors>(() => {
+    const colors = this.#dynamicColors();
+    return colors
+      ? {
+          light: dynamicThemeColors(colors.light),
+          dark: dynamicThemeColors(colors.dark),
+        }
+      : {};
+  });
+
+  protected readonly style = computed(() => {
+    const colors = this.#dynamicColors();
+    return colors ? themeVariables(colors[this.#scheme()]) : null;
+  });
+}

package/dist/ui/components/dynamic-color/index.ts

@@ -0,0 +1,5 @@
+export {
+  DYNAMIC_THEME_ROLES,
+  UiDynamicColor,
+  dynamicThemeColors,
+} from './dynamic-color';

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

@@ -1,4 +1,4 @@
-import { Component, type Provider, signal } from '@angular/core';
+import { Component, type Provider, signal, viewChild } from '@angular/core';
 import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
 import { LYNX_ELEMENTS, LynxAccessibilitySettings } from '@blotch/angular-lynx';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
@@ -11,6 +11,7 @@ import {
 import {
   UiGlass,
   UiGlassGroup,
+  type GlassMaterial,
   type GlassShape,
   type GlassVariant,
 } from './glass';
@@ -29,6 +30,8 @@ import { provideGlass } from './glass-design';
         [radius]="radius()"
         [tint]="tint()"
         [interactive]="interactive()"
+        [material]="material()"
+        [glassId]="glassId()"
       >
         <text class="text-glass-foreground">Now playing</text>
         <ui-icon name="play" />
@@ -43,6 +46,9 @@ class GlassHost {
   readonly radius = signal(20);
   readonly tint = signal<string | undefined>(undefined);
   readonly interactive = signal(false);
+  readonly material = signal<GlassMaterial>('regular');
+  readonly glassId = signal<string | undefined>(undefined);
+  readonly glass = viewChild.required(UiGlass);
 }
 
 /** Accessibility settings a test can change, as the host app would. */
@@ -107,12 +113,32 @@ describe('UiGlass', () => {
     expect(glass.getAttribute('ios-user-interface-style')).toBe('light');
     expect(glass.hasAttribute('glass-tint-color')).toBe(false);
     expect(glass.hasAttribute('glass-interactive')).toBe(false);
+    // Liquid Glass has no materials.
+    expect(glass.hasAttribute('blur-material')).toBe(false);
     // The app's own classes stay on the glass, beside its shape.
     expect(glass.classList).toContain('px-4');
     expect(glass.classList).toContain('rounded-full');
     expect(glass.classList).not.toContain('bg-secondary');
   });
 
+  it('pairs the shape under its glass id, or the one a component pairs it under', async () => {
+    const { glass, host, update } = await renderOn(IOS_26);
+    expect(glass.hasAttribute('glass-effect-id')).toBe(false);
+
+    await update(() => host.glassId.set('search'));
+    expect(glass.getAttribute('glass-effect-id')).toBe('search');
+
+    // A menu that grows out of the shape pairs it under its own id, until
+    // it lets go.
+    await update(() => host.glass().pair('ui-menu-1'));
+    expect(glass.getAttribute('glass-effect-id')).toBe('ui-menu-1');
+    await update(() => host.glass().pair(null));
+    expect(glass.getAttribute('glass-effect-id')).toBe('search');
+
+    await update(() => host.glassId.set(undefined));
+    expect(glass.hasAttribute('glass-effect-id')).toBe(false);
+  });
+
   it('keeps its content inside the glass', async () => {
     const { glass } = await renderOn(IOS_26);
 
@@ -213,16 +239,27 @@ describe('UiGlass', () => {
       provideIconTheme({ colorScheme: () => scheme() }),
     ]);
 
+    // UIKit's material, which the iOS shell's blur-view draws, in the app's
+    // scheme. The style before iOS 13 is for hosts without it.
+    expect(glass.getAttribute('blur-material')).toBe('regular');
+    expect(glass.getAttribute('ios-user-interface-style')).toBe('light');
     expect(glass.getAttribute('blur-effect')).toBe('extra-light');
     expect(glass.getAttribute('blur-radius')).toBe('20px');
 
+    await update(() => host.material.set('chrome'));
+    expect(glass.getAttribute('blur-material')).toBe('chrome');
+
     await update(() => scheme.set('dark'));
+    expect(glass.getAttribute('ios-user-interface-style')).toBe('dark');
     expect(glass.getAttribute('blur-effect')).toBe('dark');
 
+    // Clear glass draws the dark material in either scheme.
     await update(() => {
       scheme.set('light');
       host.variant.set('clear');
     });
+    expect(glass.getAttribute('blur-material')).toBe('chrome');
+    expect(glass.getAttribute('ios-user-interface-style')).toBe('dark');
     expect(glass.getAttribute('blur-effect')).toBe('dark');
   });
 
@@ -262,6 +299,7 @@ describe('UiGlass', () => {
     // without a radius, unless this is off.
     expect(glass.getAttribute('enable-auto-blur')).toBe('false');
     expect(glass.classList).toContain('bg-secondary');
+    expect(glass.hasAttribute('blur-material')).toBe(false);
     expect(group.getAttribute('blur-effect')).toBe('light');
 
     // Clear glass is opaque here too, so its foreground stays dark.

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

@@ -7,6 +7,7 @@ import {
   inject,
   input,
   numberAttribute,
+  signal,
   ViewEncapsulation,
 } from '@angular/core';
 import { LYNX_ELEMENTS, LynxAccessibilitySettings } from '@blotch/angular-lynx';
@@ -14,9 +15,9 @@ import { LYNX_ELEMENTS, LynxAccessibilitySettings } from '@blotch/angular-lynx';
 import { cn } from '../../utils/cn';
 import {
   injectColorScheme,
+  injectThemeColors,
   resolveIconColor,
   UI_ICON_COLOR,
-  UI_ICON_THEME,
 } from '../icon/icon-theme';
 import { injectGlassDesign, injectSystemDrawsGlass } from './glass-design';
 
@@ -34,6 +35,20 @@ export type GlassVariant = 'regular' | 'clear';
  */
 export type GlassShape = 'capsule' | 'circle' | 'rounded';
 
+/**
+ * The blur material the frosted design draws on iOS 15 to 25: UIKit's
+ * adaptive materials, from the most translucent to the most opaque, and the
+ * bars' own. Apple gave each role its own: `'chrome'` for bars (the dock,
+ * navigation bar and toolbar), `'regular'` for menus, popovers and alerts,
+ * `'thin'` for buttons floating over content.
+ */
+export type GlassMaterial =
+  | 'ultra-thin'
+  | 'thin'
+  | 'regular'
+  | 'thick'
+  | 'chrome';
+
 /**
  * What a glass element draws:
  *
@@ -55,7 +70,11 @@ const GLASS_BLUR: Readonly<Record<GlassVariant, string>> = {
   clear: '6px',
 };
 
-/** The blur of the frosted materials before iOS 26. */
+/**
+ * The blur of the frosted fallback, the `blur-effect` styles from before
+ * iOS 13, which hosts without the materials draw (see `#attributes`). The
+ * materials have Apple's own.
+ */
 const FROSTED_BLUR = '20px';
 
 /**
@@ -157,11 +176,30 @@ export class UiGlass {
    * a Liquid Glass control does: on iOS 26 and later, and in the web preview.
    */
   readonly interactive = input(false, { transform: booleanAttribute });
+  /**
+   * The blur material of the frosted design, on iOS 15 to 25: the one Apple
+   * used for the glass's role (see GlassMaterial). Clear glass draws its
+   * dark form, in either theme, as Apple's controls over media did. Liquid
+   * Glass has one material, and ignores it.
+   */
+  readonly material = input<GlassMaterial>('regular');
+  /**
+   * Pairs this shape with another across a change, as SwiftUI's
+   * `glassEffectID` does: when a shape with an id goes (removed, or hidden
+   * with `visibility`) and one with the same id comes in the same update,
+   * the two are one piece of glass changing shape. The new one grows out of
+   * the old one's frame and corners, and the old one's content fades out in
+   * it. In the same `ui-glass-group`, the group merges the two as they move.
+   *
+   * On iOS 26 and later, in an app `ng build --platform ios` makes (its
+   * blur-view adds this). Elsewhere one shape replaces the other at once.
+   */
+  readonly glassId = input<string | undefined>(undefined);
 
   readonly #settings = inject(LynxAccessibilitySettings);
   readonly #systemDrawsGlass = injectSystemDrawsGlass();
   readonly #scheme = injectColorScheme();
-  readonly #theme = inject(UI_ICON_THEME);
+  readonly #colors = injectThemeColors();
   readonly #host = inject<ElementRef<BlurViewElement>>(ElementRef);
 
   /**
@@ -170,6 +208,21 @@ export class UiGlass {
    */
   readonly design = injectGlassDesign();
 
+  /**
+   * The id a component pairs this shape under, such as a menu that grows out
+   * of it (see pair). It takes the place of `glassId` while it's set.
+   */
+  readonly #pairedId = signal<string | null>(null);
+
+  /**
+   * @internal Pairs the shape under `id` (see glassId), or stops pairing it
+   * (null): for a component that grows its own glass out of this shape, such
+   * as the menu of a glass button that opens one.
+   */
+  pair(id: string | null): void {
+    this.#pairedId.set(id);
+  }
+
   /**
    * 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
@@ -208,7 +261,7 @@ export class UiGlass {
    */
   readonly #tintColor = computed(() => {
     const tint = this.tint();
-    return tint ? resolveIconColor(tint, this.#theme[this.#scheme()]) : null;
+    return tint ? resolveIconColor(tint, this.#colors()) : null;
   });
 
   /**
@@ -264,35 +317,48 @@ export class UiGlass {
   });
 
   /**
-   * 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.
+   * The blur-view's attributes for the surface. The glass and the materials
+   * are 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. 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.
+   *
+   * The frosted design draws `blur-material`, which the iOS shell's
+   * blur-view adds (packages/native's BlurView.swift): Lynx's own
+   * has only the `blur-effect` styles from before iOS 13, a single weight in
+   * a single appearance. A host without it, such as Lynx Explorer, ignores
+   * the attribute and draws the `blur-effect` instead, picked for the scheme
+   * since those styles don't adapt.
    */
   readonly #attributes = computed(() => {
     const surface = this.surface();
     const variant = this.variant();
-    const dark = this.#scheme() === 'dark';
+    // Apple's controls over media used the dark materials in either theme.
+    const dark =
+      this.#scheme() === 'dark' ||
+      (surface === 'frosted' && variant === 'clear');
     let effect = 'light';
     let radius = '0px';
+    let material: GlassMaterial | null = null;
     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';
+      effect = dark ? 'dark' : 'extra-light';
       radius = FROSTED_BLUR;
+      material = this.material();
     }
     return {
       'blur-effect': effect,
       'blur-radius': radius,
+      'blur-material': material,
       'enable-auto-blur': surface !== 'solid',
       'glass-style': variant,
       'glass-tint-color': this.#tintColor(),
       'glass-interactive': this.interactive() || null,
+      'glass-effect-id': this.#pairedId() ?? this.glassId() ?? null,
       'ios-user-interface-style': dark ? 'dark' : 'light',
     };
   });
@@ -301,7 +367,7 @@ export class UiGlass {
   // 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(() => {
+  protected readonly setAttributes = effect(() => {
     const element = this.#host.nativeElement;
     for (const [name, value] of Object.entries(this.#attributes())) {
       element.setAttribute(name, value);
@@ -328,8 +394,12 @@ export class UiGlass {
  * 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.
+ * merged glass with it. On iOS 26, in an app `ng build --platform ios`
+ * makes, a shape that's added or removed (or shown and hidden with
+ * `visibility`) materializes or dissolves, as UIKit's glass does, and two
+ * shapes with the same `glassId` morph into each other (see UiGlass's
+ * `glassId`). Elsewhere a shape that's added or removed appears or
+ * disappears at once.
  */
 @Component({
   selector: 'blur-view[ui-glass-group]',

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

@@ -1,6 +1,7 @@
 export {
   UiGlass,
   UiGlassGroup,
+  type GlassMaterial,
   type GlassShape,
   type GlassSurface,
   type GlassVariant,

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

@@ -11,10 +11,12 @@ import {
   ICON_LIGHT_COLORS,
   UI_ICON_COLOR,
   UI_ICON_THEME,
+  UI_THEME_COLORS,
   injectColorScheme,
   injectIconColor,
   provideIconTheme,
   resolveIconColor,
+  type ThemeColors,
 } from './icon-theme';
 
 const LIGHT_FOREGROUND = ICON_LIGHT_COLORS['foreground'];
@@ -167,3 +169,29 @@ describe('injectIconColor', () => {
     expect(resolve(undefined)).toBe(LIGHT_FOREGROUND);
   });
 });
+
+describe('UI_THEME_COLORS', () => {
+  it('replaces the table’s colors for the active scheme, and only those it sets', () => {
+    const replaced = signal<ThemeColors>({
+      light: { primary: 'rgba(103, 80, 164, 1)' },
+      dark: { primary: 'rgba(208, 188, 255, 1)' },
+    });
+    const dark = signal(false);
+    const resolve = setup(
+      [
+        provideIconTheme({ colorScheme: 'system' }),
+        { provide: UI_THEME_COLORS, useValue: replaced },
+      ],
+      dark,
+    );
+    expect(resolve('var(--primary)')).toBe('rgba(103, 80, 164, 1)');
+    expect(resolve(undefined)).toBe(LIGHT_FOREGROUND);
+
+    dark.set(true);
+    expect(resolve('var(--primary)')).toBe('rgba(208, 188, 255, 1)');
+
+    // An element with no colors to set leaves the theme's.
+    replaced.set({});
+    expect(resolve('var(--primary)')).toBe(ICON_DARK_COLORS['primary']);
+  });
+});