@blotch/dolan 22.2.2 → 22.2.4

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/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';

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

@@ -0,0 +1,338 @@
+import { Component, type Provider, signal } 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';
+import { UiIcon } from '../icon/icon';
+import {
+  ICON_DARK_COLORS,
+  ICON_LIGHT_COLORS,
+  provideIconTheme,
+} from '../icon/icon-theme';
+import {
+  UiGlass,
+  UiGlassGroup,
+  type GlassShape,
+  type GlassVariant,
+} from './glass';
+import { provideGlass } from './glass-design';
+
+@Component({
+  imports: [LYNX_ELEMENTS, UiGlass, UiGlassGroup, UiIcon],
+  template: `
+    <blur-view ui-glass-group [spacing]="spacing()" class="flex-row gap-2">
+      <blur-view
+        ui-glass
+        id="glass"
+        class="px-4 py-2"
+        [variant]="variant()"
+        [shape]="shape()"
+        [radius]="radius()"
+        [tint]="tint()"
+        [interactive]="interactive()"
+      >
+        <text class="text-glass-foreground">Now playing</text>
+        <ui-icon name="play" />
+      </blur-view>
+    </blur-view>
+  `,
+})
+class GlassHost {
+  readonly spacing = signal(12);
+  readonly variant = signal<GlassVariant>('regular');
+  readonly shape = signal<GlassShape>('capsule');
+  readonly radius = signal(20);
+  readonly tint = signal<string | undefined>(undefined);
+  readonly interactive = signal(false);
+}
+
+/** Accessibility settings a test can change, as the host app would. */
+const settings = {
+  reduceMotion: signal(false),
+  reduceTransparency: signal(false),
+  increaseContrast: signal(false),
+};
+
+/**
+ * Renders the host on a platform, as `SystemInfo` reports it, or with no
+ * SystemInfo at all.
+ */
+const renderOn = async (
+  platform: { platform: string; osVersion: string } | undefined,
+  providers: Provider[] = [],
+) => {
+  vi.stubGlobal('SystemInfo', platform);
+  const result = await render(GlassHost, {
+    providers: [
+      { provide: LynxAccessibilitySettings, useValue: settings },
+      ...providers,
+    ],
+  });
+  const host = result.componentRef.instance as GlassHost;
+  const glass = result.container.querySelector('#glass')!;
+  const group = glass.parentElement!;
+  const update = async (change: () => void) => {
+    change();
+    await waitForUpdate();
+  };
+  return { ...result, host, glass, group, update };
+};
+
+const IOS_26 = { platform: 'iOS', osVersion: '26.0' };
+const IOS_18 = { platform: 'iOS', osVersion: '18.5' };
+const ANDROID = { platform: 'Android', osVersion: '15' };
+const WEB = { platform: 'web', osVersion: '' };
+
+// The icon's selector isn't a Lynx element, so the renderer falls back to a
+// <view> for it and warns.
+beforeEach(() => {
+  vi.spyOn(console, 'warn').mockImplementation(() => {});
+});
+
+describe('UiGlass', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+    settings.reduceTransparency.set(false);
+    settings.increaseContrast.set(false);
+  });
+
+  it('draws Liquid Glass on iOS 26, in the app color scheme', async () => {
+    const { glass } = await renderOn(IOS_26);
+
+    expect(glass.tagName.toLowerCase()).toBe('blur-view');
+    expect(glass.getAttribute('blur-effect')).toBe('glass');
+    expect(glass.getAttribute('glass-style')).toBe('regular');
+    expect(glass.getAttribute('blur-radius')).toBe('16px');
+    expect(glass.getAttribute('enable-auto-blur')).toBe('true');
+    expect(glass.getAttribute('ios-user-interface-style')).toBe('light');
+    expect(glass.hasAttribute('glass-tint-color')).toBe(false);
+    expect(glass.hasAttribute('glass-interactive')).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('keeps its content inside the glass', async () => {
+    const { glass } = await renderOn(IOS_26);
+
+    expect(glass.querySelector('text')?.textContent).toBe('Now playing');
+  });
+
+  it('takes the variant, tint and interactivity', async () => {
+    const { glass, host, update } = await renderOn(IOS_26);
+
+    await update(() => {
+      host.variant.set('clear');
+      host.tint.set('#2563eb');
+      host.interactive.set(true);
+    });
+
+    expect(glass.getAttribute('glass-style')).toBe('clear');
+    expect(glass.getAttribute('blur-radius')).toBe('6px');
+    expect(glass.getAttribute('glass-tint-color')).toBe('#2563eb');
+    expect(glass.getAttribute('glass-interactive')).toBe('true');
+
+    await update(() => host.interactive.set(false));
+    expect(glass.hasAttribute('glass-interactive')).toBe(false);
+  });
+
+  it("resolves a theme token tint to the scheme's value, and forces the scheme", async () => {
+    const scheme = signal<'light' | 'dark'>('light');
+    const { glass, host, update } = await renderOn(IOS_26, [
+      provideIconTheme({ colorScheme: () => scheme() }),
+    ]);
+
+    await update(() => host.tint.set('var(--glass-tint)'));
+    expect(glass.getAttribute('glass-tint-color')).toBe(
+      ICON_LIGHT_COLORS['glass-tint'],
+    );
+
+    await update(() => scheme.set('dark'));
+    expect(glass.getAttribute('glass-tint-color')).toBe(
+      ICON_DARK_COLORS['glass-tint'],
+    );
+    expect(glass.getAttribute('ios-user-interface-style')).toBe('dark');
+  });
+
+  it('turns the foreground white on clear glass, which sits over media', async () => {
+    const { glass, host, update } = await renderOn(IOS_26);
+    const icon = () => glass.querySelector('svg')!.getAttribute('content');
+
+    expect(icon()).toContain(ICON_LIGHT_COLORS['glass-foreground']);
+
+    await update(() => host.variant.set('clear'));
+
+    expect(glass.classList).toContain(
+      '[--glass-foreground:var(--glass-clear-foreground)]',
+    );
+    expect(glass.classList).toContain(
+      '[--glass-muted-foreground:var(--glass-clear-foreground)]',
+    );
+    expect(icon()).toContain(ICON_LIGHT_COLORS['glass-clear-foreground']);
+  });
+
+  it('gives a rounded shape its radius, and capsules and circles round ends', async () => {
+    const { glass, host, update } = await renderOn(IOS_26);
+    const radius = () =>
+      (glass as HTMLElement).style.getPropertyValue('border-radius');
+
+    expect(radius()).toBe('');
+
+    await update(() => {
+      host.shape.set('rounded');
+      host.radius.set(24);
+    });
+    expect(glass.classList).not.toContain('rounded-full');
+    expect(radius()).toBe('24px');
+
+    await update(() => host.shape.set('circle'));
+    expect(glass.classList).toContain('rounded-full');
+    expect(radius()).toBe('');
+  });
+
+  it('leaves Reduce Transparency and Increase Contrast to iOS, except for muted text', async () => {
+    const { glass, update } = await renderOn(IOS_26);
+
+    await update(() => {
+      settings.reduceTransparency.set(true);
+      settings.increaseContrast.set(true);
+    });
+
+    // UIKit adapts its own glass: no opaque surface or border here.
+    expect(glass.getAttribute('blur-effect')).toBe('glass');
+    expect(glass.classList).not.toContain('border');
+    expect(glass.classList).toContain(
+      '[--glass-muted-foreground:var(--glass-foreground)]',
+    );
+  });
+
+  it('draws a frosted material before iOS 26, which has no glass', async () => {
+    const scheme = signal<'light' | 'dark'>('light');
+    const { glass, host, update } = await renderOn(IOS_18, [
+      provideIconTheme({ colorScheme: () => scheme() }),
+    ]);
+
+    expect(glass.getAttribute('blur-effect')).toBe('extra-light');
+    expect(glass.getAttribute('blur-radius')).toBe('20px');
+
+    await update(() => scheme.set('dark'));
+    expect(glass.getAttribute('blur-effect')).toBe('dark');
+
+    await update(() => {
+      scheme.set('light');
+      host.variant.set('clear');
+    });
+    expect(glass.getAttribute('blur-effect')).toBe('dark');
+  });
+
+  it('fills a frosted material with its tint, under the content', async () => {
+    const { glass, host, update } = await renderOn(IOS_18);
+    /**
+     * The fill: the view that draws a background, before the content.
+     */
+    const fill = () =>
+      Array.from(glass.children).find(
+        (child) => (child as HTMLElement).style.backgroundColor,
+      ) as HTMLElement;
+
+    expect(fill()).toBeUndefined();
+
+    await update(() => host.tint.set('#2563eb'));
+    // Drawn first, so the content sits on it.
+    expect(Array.from(glass.children).indexOf(fill())).toBeLessThan(
+      Array.from(glass.children).indexOf(glass.querySelector('text')!),
+    );
+    expect(fill().style.getPropertyValue('background-color')).toBe(
+      'rgb(37, 99, 235)',
+    );
+    expect(fill().classList).toContain('rounded-full');
+
+    await update(() => host.shape.set('rounded'));
+    expect(fill().classList).not.toContain('rounded-full');
+    expect(fill().style.getPropertyValue('border-radius')).toBe('20px');
+  });
+
+  it('draws an opaque Material surface on Android by default', async () => {
+    const { glass, group, host, update } = await renderOn(ANDROID);
+
+    expect(glass.getAttribute('blur-effect')).toBe('light');
+    expect(glass.getAttribute('blur-radius')).toBe('0px');
+    // A blur-view redraws what's behind it on every frame on Android, even
+    // without a radius, unless this is off.
+    expect(glass.getAttribute('enable-auto-blur')).toBe('false');
+    expect(glass.classList).toContain('bg-secondary');
+    expect(group.getAttribute('blur-effect')).toBe('light');
+
+    // Clear glass is opaque here too, so its foreground stays dark.
+    await update(() => host.variant.set('clear'));
+    expect(glass.classList).not.toContain(
+      '[--glass-foreground:var(--glass-clear-foreground)]',
+    );
+
+    // A tint fills the surface, as Material fills a button.
+    await update(() => host.tint.set('#2563eb'));
+    expect(glass.classList).not.toContain('bg-secondary');
+    expect(
+      (glass as HTMLElement).style.getPropertyValue('background-color'),
+    ).toBe('rgb(37, 99, 235)');
+    expect(
+      (glass as HTMLElement).style.getPropertyValue('box-shadow'),
+    ).not.toBe('');
+  });
+
+  it('draws glass on Android when the app opts in, and follows the settings there', async () => {
+    const { glass, update } = await renderOn(ANDROID, [
+      provideGlass({ android: 'glass' }),
+    ]);
+
+    expect(glass.getAttribute('blur-effect')).toBe('glass');
+    expect(glass.classList).not.toContain('bg-secondary');
+
+    await update(() => settings.increaseContrast.set(true));
+    expect(glass.classList).toContain('border');
+    expect(glass.classList).toContain('border-glass-foreground');
+
+    await update(() => settings.reduceTransparency.set(true));
+    expect(glass.getAttribute('blur-effect')).toBe('light');
+    expect(glass.classList).toContain('bg-secondary');
+  });
+
+  it('draws glass in the web preview', async () => {
+    const { glass } = await renderOn(WEB);
+
+    expect(glass.getAttribute('blur-effect')).toBe('glass');
+  });
+
+  it('draws a Material surface where there is no SystemInfo to read', async () => {
+    const { glass } = await renderOn(undefined);
+
+    expect(glass.classList).toContain('bg-secondary');
+  });
+});
+
+describe('UiGlassGroup', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it('merges the glass in it within spacing', async () => {
+    const { group, host, update } = await renderOn(IOS_26);
+
+    expect(group.getAttribute('blur-effect')).toBe('glass-container');
+    expect(group.getAttribute('spacing')).toBe('12');
+    expect(group.getAttribute('enable-auto-blur')).toBe('false');
+    expect(group.classList).toContain('flex-row');
+
+    await update(() => host.spacing.set(24));
+    expect(group.getAttribute('spacing')).toBe('24');
+  });
+
+  it('is a plain container where there is no glass to merge', async () => {
+    const { group } = await renderOn(IOS_18);
+
+    expect(group.getAttribute('blur-effect')).toBe('light');
+    expect(group.getAttribute('blur-radius')).toBe('0px');
+  });
+});