@blotch/dolan 22.2.3 → 22.2.5

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

@@ -0,0 +1,2 @@
+export { UiDock, UiDockAccessory, UiDockAction, UiDockItem } from './dock';
+export { UiDockScroll, UiDockState } from './dock-scroll';

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/empty-state/empty-state.test.ts

@@ -1,60 +1,49 @@
-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 type { IconName } from '../icon/icons';
 import { UiEmptyState } from './empty-state';
 
 @Component({
-  standalone: true,
   imports: [UiEmptyState, LYNX_ELEMENTS],
   template: `
     <ui-empty-state
-      icon="search"
+      [icon]="icon()"
       title="No results"
-      description="Try adjusting your search"
+      [description]="description()"
+      class="py-6"
     >
-      <text>Extra content</text>
+      <text>Clear the filters</text>
     </ui-empty-state>
   `,
 })
-class EmptyStateHost {}
-
-@Component({
-  standalone: true,
-  imports: [UiEmptyState, LYNX_ELEMENTS],
-  template: `<ui-empty-state title="Empty"></ui-empty-state>`,
-})
-class MinimalEmptyStateHost {}
+class EmptyStateHost {
+  readonly icon = signal<IconName | undefined>(undefined);
+  readonly description = signal('');
+}
 
 describe('UiEmptyState', () => {
-  it('renders with an icon, title, description, and projected content', async () => {
-    // Text-based queries against the JSDOM container occasionally miss content
-    // rendered into Lynx `<text>` elements that aren't unwrapped by
-    // @testing-library/dom's text traversal. A container assertion is enough
-    // to prove the full template (including the @if(icon)/@if(description)
-    // branches and the <ng-content /> slot) mounted without throwing.
-    const { container } = await render(EmptyStateHost);
-    expect(container).toBeTruthy();
+  it('shows only the title and projected content by default', async () => {
+    const { container, getByText, queryByText } = await render(EmptyStateHost);
+    expect(getByText('No results').classList).toContain('font-semibold');
+    expect(getByText('Clear the filters')).toBeTruthy();
+    expect(queryByText('Try adjusting your search')).toBeNull();
+    expect(container.querySelector('svg')).toBeNull();
+    expect(container.querySelector('.py-6')).toBeTruthy();
   });
 
-  it('renders with only the required title (no icon, no description)', async () => {
-    const { container } = await render(MinimalEmptyStateHost);
-    expect(container).toBeTruthy();
-  });
-
-  it('renders the description class when a description is programmatically set', async () => {
-    // JIT template bindings don't propagate through `input()`; drive the input
-    // via setInputSignal so the @if(description()) branch actually renders and
-    // its computed class runs.
-    const { componentRef, container } = await render(UiEmptyState);
-    const inst = componentRef.instance as UiEmptyState;
-    setInputSignal(inst.title, 'Title');
-    setInputSignal(inst.description, 'A description');
+  it('adds the icon and description when they are set', async () => {
+    const { componentRef, container, getByText } = await render(EmptyStateHost);
+    const host = componentRef.instance as EmptyStateHost;
+    host.icon.set('search');
+    host.description.set('Try adjusting your search');
     await waitForUpdate();
-
-    // Both text runs are present after CD flush.
-    const textNodes = container.querySelectorAll('text');
-    expect(textNodes.length).toBeGreaterThanOrEqual(2);
+    expect(getByText('Try adjusting your search').classList).toContain(
+      'text-muted-foreground',
+    );
+    expect(container.querySelector('svg')?.getAttribute('content')).toContain(
+      '<svg',
+    );
   });
 });

package/dist/ui/components/glass/concentric-radius.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest';
+import { concentricRadius } from './concentric-radius';
+
+describe('concentricRadius', () => {
+  it('takes the inset off the outer radius, so the corners share a center', () => {
+    expect(concentricRadius(24, 8)).toBe(16);
+    expect(concentricRadius(20, 0)).toBe(20);
+  });
+
+  it('gives square corners rather than a negative radius', () => {
+    expect(concentricRadius(8, 12)).toBe(0);
+  });
+});

package/dist/ui/components/glass/concentric-radius.ts

@@ -0,0 +1,17 @@
+/**
+ * The corner radius for a shape nested `inset` px inside a shape whose corner
+ * radius is `outerRadius`, so that the two corners share a center and the gap
+ * between them stays the same width all the way round. Apple calls this
+ * concentricity, and Liquid Glass relies on it: a button inset 8px in a glass
+ * panel with 24px corners gets 16px corners.
+ *
+ * It never goes below 0: a shape inset further than the outer radius has
+ * square corners. Capsules and circles need no helper, because a capsule
+ * inset evenly inside a capsule is a capsule (`shape="capsule"`).
+ *
+ * ```ts
+ * readonly innerRadius = computed(() => concentricRadius(this.radius(), 8));
+ * ```
+ */
+export const concentricRadius = (outerRadius: number, inset: number): number =>
+  Math.max(0, outerRadius - inset);

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

@@ -0,0 +1,78 @@
+import { Injector, runInInjectionContext } from '@angular/core';
+import { LynxSystemInfo } from '@blotch/angular-lynx';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import {
+  glassDesignFor,
+  injectGlassDesign,
+  injectSystemDrawsGlass,
+  provideGlass,
+  UI_GLASS_OPTIONS,
+} from './glass-design';
+
+describe('glassDesignFor', () => {
+  it('gives iOS 26 and later Liquid Glass, and earlier iOS the frosted materials', () => {
+    expect(glassDesignFor('iOS', '26.0', {})).toBe('glass');
+    expect(glassDesignFor('iOS', '27.1', {})).toBe('glass');
+    expect(glassDesignFor('iOS', '25.4', {})).toBe('frosted');
+    expect(glassDesignFor('iOS', '15.0', {})).toBe('frosted');
+  });
+
+  it('counts an iOS version not known yet as current', () => {
+    expect(glassDesignFor('iOS', '', {})).toBe('glass');
+  });
+
+  it('gives Android Material unless the app opts into glass', () => {
+    expect(glassDesignFor('Android', '15', {})).toBe('material');
+    expect(glassDesignFor('Android', '15', { android: 'glass' })).toBe('glass');
+  });
+
+  it('draws glass in the web preview, and Material where there is none', () => {
+    expect(glassDesignFor('web', '', {})).toBe('glass');
+    expect(glassDesignFor('Harmony', '5.0', { android: 'glass' })).toBe(
+      'material',
+    );
+    expect(glassDesignFor(undefined, '', {})).toBe('material');
+  });
+});
+
+describe('provideGlass', () => {
+  it('provides the options', () => {
+    expect(provideGlass({ android: 'glass' })).toEqual({
+      provide: UI_GLASS_OPTIONS,
+      useValue: { android: 'glass' },
+    });
+  });
+});
+
+describe('injectGlassDesign', () => {
+  afterEach(() => vi.unstubAllGlobals());
+
+  /**
+   * Runs `fn` in an injector. A plain injector has no root scope, so it gets
+   * LynxSystemInfo, which the app's root injector would make, explicitly.
+   */
+  const inject = <T>(fn: () => T, options = {}) =>
+    runInInjectionContext(
+      Injector.create({
+        providers: [
+          LynxSystemInfo,
+          { provide: UI_GLASS_OPTIONS, useValue: options },
+        ],
+      }),
+      fn,
+    );
+
+  it("reads the platform and version from SystemInfo, with the app's options", () => {
+    vi.stubGlobal('SystemInfo', { platform: 'Android', osVersion: '14' });
+
+    expect(inject(injectGlassDesign)()).toBe('material');
+    expect(inject(injectGlassDesign, { android: 'glass' })()).toBe('glass');
+    expect(inject(injectSystemDrawsGlass)).toBe(false);
+  });
+
+  it('knows that iOS draws its own glass', () => {
+    vi.stubGlobal('SystemInfo', { platform: 'iOS', osVersion: '26.0' });
+
+    expect(inject(injectSystemDrawsGlass)).toBe(true);
+  });
+});

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

@@ -0,0 +1,119 @@
+import {
+  computed,
+  inject,
+  InjectionToken,
+  Injector,
+  type Provider,
+  type Signal,
+} from '@angular/core';
+import { LynxSystemInfo } from '@blotch/angular-lynx';
+
+/**
+ * The look the glass components take on this platform. One API covers all
+ * three, and each component builds its own form of each: the dock is a
+ * floating glass capsule with `'glass'`, a tab bar on a blur material with
+ * `'frosted'`, and a navigation bar with `'material'`.
+ *
+ * - `'glass'`: Liquid Glass. iOS 26 and later draw it with UIKit's glass,
+ *   the web preview draws it with WebGL, and Android, when the app opts in
+ *   with {@link provideGlass}, approximates it with a blur, a tint and a rim.
+ * - `'frosted'`: Apple's design before Liquid Glass, for iOS 15 to 25, whose
+ *   `blur-view` has no glass: frosted blur materials.
+ * - `'material'`: Material 3 Expressive, Android's default, which uses
+ *   opaque tonal surfaces instead of glass.
+ */
+export type GlassDesign = 'glass' | 'frosted' | 'material';
+
+export type GlassOptions = {
+  /**
+   * What Android gets: `'material'` (the default), or `'glass'` for the same
+   * look as iOS. Android's glass is a blur with a tint and a rim over it,
+   * without the refraction. Blurring costs more below Android 12, where Lynx
+   * can't use `RenderEffect`.
+   */
+  readonly android?: 'material' | 'glass';
+};
+
+/** The app's glass options; see {@link provideGlass}. */
+export const UI_GLASS_OPTIONS = new InjectionToken<GlassOptions>(
+  'UI_GLASS_OPTIONS',
+  { providedIn: 'root', factory: () => ({}) },
+);
+
+/**
+ * Sets the glass options for the whole app, in `app.config.ts`:
+ *
+ * ```ts
+ * // Liquid Glass on Android too, instead of Material.
+ * providers: [provideGlass({ android: 'glass' })]
+ * ```
+ */
+export const provideGlass = (options: GlassOptions): Provider => ({
+  provide: UI_GLASS_OPTIONS,
+  useValue: options,
+});
+
+/** The first iOS whose `blur-view` draws Liquid Glass. */
+export const FIRST_GLASS_IOS = 26;
+
+/**
+ * The design for a platform, as `SystemInfo` names it, and its OS version.
+ *
+ * Before iOS 26, Lynx's `blur-view` doesn't know `blur-effect="glass"`: it
+ * logs an error and draws a `light` blur that ignores dark mode. So older
+ * iOS gets `'frosted'`. An iOS version that isn't known yet (empty) counts as
+ * current: on the native main thread it arrives from the background thread
+ * after the first frame, unless the host app sends it (see
+ * `LynxSystemInfo.osVersion`), and iOS 26 and later is where most phones are.
+ * Platforms with no glass, such as HarmonyOS, get `'material'`.
+ */
+export const glassDesignFor = (
+  platform: string | undefined,
+  osVersion: string,
+  options: GlassOptions,
+): GlassDesign => {
+  switch (platform) {
+    case 'iOS':
+      return parseInt(osVersion, 10) < FIRST_GLASS_IOS ? 'frosted' : 'glass';
+    case 'Android':
+      return options.android ?? 'material';
+    case 'web':
+      return 'glass';
+    default:
+      return 'material';
+  }
+};
+
+/**
+ * LynxSystemInfo, or undefined where there's no SystemInfo to read, such as
+ * in unit tests, where LynxSystemInfo throws.
+ */
+const systemInfo = (injector: Injector): LynxSystemInfo | undefined => {
+  try {
+    return injector.get(LynxSystemInfo);
+  } catch {
+    return undefined;
+  }
+};
+
+/**
+ * The glass design on this platform, for a component's constructor or field
+ * initializers. A signal: on the native main thread, iOS's version can arrive
+ * after the first frame.
+ */
+export const injectGlassDesign = (): Signal<GlassDesign> => {
+  const options = inject(UI_GLASS_OPTIONS);
+  const info = systemInfo(inject(Injector));
+  return computed(() =>
+    glassDesignFor(info?.platform, info?.osVersion ?? '', options),
+  );
+};
+
+/**
+ * Whether the system draws the glass and its materials itself: iOS. UIKit
+ * adapts them to Reduce Transparency, Increase Contrast and iOS 27's Liquid
+ * Glass setting on its own. Elsewhere, Android's approximation and the web
+ * preview's drawing can't, so the components adapt what they draw.
+ */
+export const injectSystemDrawsGlass = (): boolean =>
+  systemInfo(inject(Injector))?.platform === 'iOS';