@blotch/dolan 22.2.4 → 22.2.6

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

@@ -23,7 +23,9 @@ import { LynxTheme } from '@blotch/angular-lynx';
  *
  * The tables mirror `default.css` and `dark.css` (a test in the theme folder
  * keeps them in step). If you change a color there, change it here too, or pass
- * your own with {@link provideIconTheme}.
+ * your own with {@link provideIconTheme}. Colors set at runtime, such as
+ * Android's wallpaper colors, come from an element above instead (see
+ * {@link UI_THEME_COLORS}).
  */
 
 /** Theme token name (without `--`) to a complete CSS color. */
@@ -207,6 +209,40 @@ export const injectColorScheme = (): Signal<IconColorScheme> => {
   );
 };
 
+/** Theme colors for each scheme, each a complete CSS color, as in the tables. */
+export type ThemeColors = {
+  readonly light?: IconColorTokens;
+  readonly dark?: IconColorTokens;
+};
+
+/**
+ * Theme colors that replace the tables' for everything inside an element,
+ * as a signal: an element that sets the theme's CSS variables at runtime
+ * provides the values it sets, since SVGs and native attributes can't read
+ * them. `UiDynamicColor` provides Android's wallpaper colors this way. Icons,
+ * glass tints and charts inside it resolve their tokens against them.
+ */
+export const UI_THEME_COLORS = new InjectionToken<Signal<ThemeColors>>(
+  'UI_THEME_COLORS',
+);
+
+/**
+ * The color table for the app's color scheme, for a component's constructor:
+ * the theme's copy, with what an element above sets in its place (see
+ * {@link UI_THEME_COLORS}). A signal, so it follows scheme and theme changes.
+ */
+export const injectThemeColors = (): Signal<IconColorTokens> => {
+  const theme = inject(UI_ICON_THEME);
+  const scheme = injectColorScheme();
+  const replaced = inject(UI_THEME_COLORS, { optional: true });
+
+  return computed(() => {
+    const active = scheme();
+    const colors = replaced?.()[active];
+    return colors ? { ...theme[active], ...colors } : theme[active];
+  });
+};
+
 /**
  * For an SVG component's constructor: a function that resolves its `color`
  * input (or, without one, the surrounding {@link UI_ICON_COLOR}, then the
@@ -214,14 +250,9 @@ export const injectColorScheme = (): Signal<IconColorScheme> => {
  * `computed()` calling it follows scheme and theme changes.
  */
 export const injectIconColor = (): ((color: string | undefined) => string) => {
-  const theme = inject(UI_ICON_THEME);
-  const scheme = injectColorScheme();
+  const tokens = injectThemeColors();
   const inherited = inject(UI_ICON_COLOR, { optional: true });
 
-  const tokens = computed(() =>
-    scheme() === 'dark' ? theme.dark : theme.light,
-  );
-
   return (color) =>
     resolveIconColor(color ?? inherited?.() ?? DEFAULT_ICON_COLOR, tokens());
 };

package/dist/ui/components/input/input.ts

@@ -2,6 +2,7 @@ import {
   type ElementRef,
   Component,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   effect,
   input,
@@ -90,7 +91,7 @@ export class UiInput implements FormValueControl<string> {
   readonly type = input<string>('text');
   readonly helperText = input<string>('');
   readonly error = input<string>('');
-  readonly disabled = input(false);
+  readonly disabled = input(false, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
   readonly changed = output<string>();

package/dist/ui/components/label/label.ts

@@ -1,4 +1,10 @@
-import { Component, ViewEncapsulation, computed, input } from '@angular/core';
+import {
+  Component,
+  ViewEncapsulation,
+  booleanAttribute,
+  computed,
+  input,
+} from '@angular/core';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 
 import { cn } from '../../utils/cn';
@@ -11,7 +17,7 @@ import { cn } from '../../utils/cn';
   template: `<text [class]="labelClass()"><ng-content /></text>`,
 })
 export class UiLabel {
-  readonly disabled = input(false);
+  readonly disabled = input(false, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
   protected readonly labelClass = computed(() =>

package/dist/ui/components/line-chart/line-chart.ts

@@ -1,6 +1,7 @@
 import {
   Component,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   input,
   output,
@@ -90,8 +91,8 @@ export class UiLineChart extends UiCartesianPreset<XYDatum> {
   readonly color = input('var(--primary)');
   readonly strokeWidth = input(2);
   readonly dotRadius = input(3);
-  readonly showDots = input(true);
-  readonly smooth = input(false);
+  readonly showDots = input(true, { transform: booleanAttribute });
+  readonly smooth = input(false, { transform: booleanAttribute });
 
   /** The tapped point's datum. */
   readonly pointTap = output<XYDatum>();

package/dist/ui/components/list/list.ts

@@ -1,6 +1,7 @@
 import {
   Component,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   input,
   output,
@@ -45,10 +46,10 @@ export class UiList {
   readonly spanCount = input(1);
   readonly orientation = input<'vertical' | 'horizontal'>('vertical');
   readonly height = input<string>('');
-  readonly bounces = input(true);
-  readonly scrollBar = input(true);
-  readonly nestedScroll = input(false);
-  readonly sticky = input(false);
+  readonly bounces = input(true, { transform: booleanAttribute });
+  readonly scrollBar = input(true, { transform: booleanAttribute });
+  readonly nestedScroll = input(false, { transform: booleanAttribute });
+  readonly sticky = input(false, { transform: booleanAttribute });
   readonly stickyOffset = input(0);
   readonly preloadBufferCount = input(0);
   readonly mainAxisGap = input('');

package/dist/ui/components/menu/menu-popup.test.ts

@@ -138,6 +138,8 @@ const renderPopup = async ({
     host,
     invoke,
     held,
+    /** How many measurements `held` is keeping back. */
+    pendingCount: () => pending.length,
     /** Answers the measurements `held` kept back. */
     release: () => {
       for (const answer of pending.splice(0)) answer();
@@ -199,6 +201,16 @@ const settle = async () => {
   for (let i = 0; i < 10; i++) await Promise.resolve();
 };
 
+/**
+ * Waits until the menu has asked for the measurements `held` keeps back, so
+ * that `release()` has them to answer. Waiting for the overlay isn't enough:
+ * it shows first, and the menu measures itself only after LAYOUT_DELAY, a
+ * real timer, which a busy CI runner can fire well after that. Released
+ * before then, nothing is answered and the menu waits for good.
+ */
+const waitForHeld = (rendered: Rendered) =>
+  vi.waitFor(() => expect(rendered.pendingCount()).toBeGreaterThan(0));
+
 // The renderer warns that <ui-menu-popup> isn't a Lynx element.
 beforeEach(() => {
   vi.spyOn(console, 'warn').mockImplementation(() => {});
@@ -226,9 +238,8 @@ describe('UiMenuPopup', () => {
     rendered.held.menu = true;
     host.open.set(true);
     // Measured off screen at its natural size first.
-    await vi.waitFor(() =>
-      expect(overlay().getAttribute('visible')).toBe('true'),
-    );
+    await waitForHeld(rendered);
+    expect(overlay().getAttribute('visible')).toBe('true');
     expect(style(panel(), 'left')).toBe('-10000px');
     expect(style(panel(), 'width')).toBe('');
     expect(style(panel(), 'transition')).toBe('none');
@@ -393,9 +404,8 @@ describe('UiMenuPopup', () => {
 
       rendered.held.menu = true;
       host.open.set(true);
-      await vi.waitFor(() =>
-        expect(overlay().getAttribute('visible')).toBe('true'),
-      );
+      await waitForHeld(rendered);
+      expect(overlay().getAttribute('visible')).toBe('true');
       expect(slot().children).toHaveLength(0);
       rendered.release();
       await settle();
@@ -568,10 +578,7 @@ describe('UiMenuPopup', () => {
       rendered.held.menu = true;
 
       rendered.host.open.set(true);
-      await vi.waitFor(() =>
-        expect(rendered.overlay().getAttribute('visible')).toBe('true'),
-      );
-      await new Promise((resolve) => setTimeout(resolve, 50));
+      await waitForHeld(rendered);
       rendered.host.open.set(false);
       rendered.tick();
       rendered.release();
@@ -587,10 +594,7 @@ describe('UiMenuPopup', () => {
       rendered.held.menu = true;
 
       rendered.host.open.set(true);
-      await vi.waitFor(() =>
-        expect(rendered.overlay().getAttribute('visible')).toBe('true'),
-      );
-      await new Promise((resolve) => setTimeout(resolve, 50));
+      await waitForHeld(rendered);
       rendered.release();
       await settle();
       // At its start frame now; closing doesn't let it finish growing.

package/dist/ui/components/menu/menu-popup.ts

@@ -4,6 +4,7 @@ import {
   ElementRef,
   Renderer2,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   effect,
   inject,
@@ -133,8 +134,10 @@ export const measureMenuElement = async (
  * placeMenu), and then grows it from its start frame (see menuStartFrame)
  * with CSS transitions, which Lynx plays on iOS, Android and the web alike.
  * The menu is one glass shape whose frame grows: iOS's Liquid Glass follows
- * a moving or resizing shape frame by frame, where a shape that appears or
- * disappears pops.
+ * a moving or resizing shape frame by frame. It shows at the trigger's place
+ * in the same update that hides the trigger, and hides in the one that shows
+ * the trigger again, so the shell can pair a glass trigger with it (see
+ * glassId).
  *
  * A context menu's element is lifted by moving the element itself into the
  * overlay, above the dimming layer, at the same place on screen, and back
@@ -198,7 +201,9 @@ export const measureMenuElement = async (
             [style.top.px]="frame()?.top ?? 0"
             [style.width.px]="frame()?.width"
             [style.height.px]="frame()?.height"
+            [glassId]="glassId()"
             [style.opacity]="panelOpacity()"
+            [style.visibility]="panelVisibility()"
             [style.transition]="panelTransition()"
             [style.align-items]="
               placement()?.horizontal === 'right' ? 'flex-end' : 'flex-start'
@@ -233,7 +238,7 @@ export const measureMenuElement = async (
 })
 export class UiMenuPopup implements OnDestroy {
   /** Whether the menu is open. */
-  readonly open = input(false);
+  readonly open = input(false, { transform: booleanAttribute });
   /** The element the menu opens from: a button, or the pressed element. */
   readonly anchor = input.required<MenuElement>();
   /** A `'pull-down'` or a `'context'` menu; see MenuKind. */
@@ -243,6 +248,11 @@ export class UiMenuPopup implements OnDestroy {
    * in. Without one, the element isn't lifted.
    */
   readonly anchorHome = input<MenuElement | null>(null);
+  /**
+   * The id the menu's glass shares with its trigger's (see UiGlass's
+   * `glassId`), so that on iOS the menu takes over a glass trigger's glass.
+   */
+  readonly glassId = input<string | undefined>(undefined);
 
   /** The user tapped outside the menu, or pressed Android's back button. */
   readonly dismissed = output<void>();
@@ -349,6 +359,17 @@ export class UiMenuPopup implements OnDestroy {
   protected readonly panelTransition = computed(() =>
     this.#transition(['left', 'top', 'width', 'height', 'opacity']),
   );
+
+  /**
+   * The menu's glass is hidden until it's at its start frame, so it shows in
+   * the same update that hides the trigger it grows out of, and hides in the
+   * one that shows the trigger again: on iOS the shell pairs the two across
+   * those changes (see glassId).
+   */
+  protected readonly panelVisibility = computed(() => {
+    const phase = this.phase();
+    return phase === 'closed' || phase === 'measuring' ? 'hidden' : null;
+  });
   protected readonly contentTransition = computed(() =>
     this.#transition(['opacity']),
   );

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

@@ -8,6 +8,7 @@ import {
 import { LYNX_ELEMENTS, LynxAccessibilitySettings } from '@blotch/angular-lynx';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireLynxEvent } from '../../../test-utils/fire-lynx-event';
+import { UiGlass } from '../glass/glass';
 import {
   UiMenu,
   UiMenuItem,
@@ -19,6 +20,7 @@ import {
 @Component({
   imports: [
     LYNX_ELEMENTS,
+    UiGlass,
     UiMenu,
     UiMenuTrigger,
     UiMenuItem,
@@ -31,7 +33,18 @@ import {
       (openChange)="open.set($event)"
       (closed)="closed()"
     >
-      @if (withTrigger()) {
+      @if (glassTrigger()) {
+        <blur-view
+          ui-glass
+          uiMenuTrigger
+          class="trigger"
+          [accessibility-element]="true"
+          accessibility-traits="button"
+          accessibility-label="Sort"
+        >
+          <text>Sort</text>
+        </blur-view>
+      } @else if (withTrigger()) {
         <view
           uiMenuTrigger
           class="trigger"
@@ -69,6 +82,8 @@ import {
           disabled
           (pressed)="archived()"
         />
+        <ui-menu-item label="Bold" checked />
+        <ui-menu-item label="Pin" [checked]="pinned()" />
       </ui-menu-section>
     </ui-menu>
   `,
@@ -76,7 +91,9 @@ import {
 class MenuHost {
   readonly open = signal(false);
   readonly withTrigger = signal(true);
+  readonly glassTrigger = signal(false);
   readonly sort = signal<'name' | 'date'>('date');
+  readonly pinned = signal<boolean | undefined>(undefined);
   readonly closed = vi.fn();
   readonly shared = vi.fn();
   readonly deleted = vi.fn();
@@ -223,13 +240,44 @@ describe('UiMenu', () => {
       { relativeTo: 'screen' },
       expect.any(Function),
     );
-    expect(style(trigger(), 'opacity')).toBe('0');
+    expect(style(trigger(), 'visibility')).toBe('hidden');
 
     // A tap on the trigger again closes it, and the trigger comes back.
     fireEvent.tap(trigger());
     await waitForClose(rendered);
     expect(host.open()).toBe(false);
-    expect(style(trigger(), 'opacity')).toBe('');
+    expect(style(trigger(), 'visibility')).toBe('');
+    // A trigger that isn't glass has no glass to hand over.
+    expect(trigger().hasAttribute('glass-effect-id')).toBe(false);
+  });
+
+  it("takes a glass trigger's glass over, shown as the trigger hides", async () => {
+    const rendered = await renderMenu();
+    rendered.host.glassTrigger.set(true);
+    await waitForUpdate();
+    const { trigger, panel } = rendered;
+
+    // The trigger and the menu share an id of the menu's own, for the shell
+    // to pair the two across the change.
+    const id = trigger().getAttribute('glass-effect-id');
+    expect(id).toMatch(/^ui-menu-\d+$/);
+    expect(panel().getAttribute('glass-effect-id')).toBe(id);
+    expect(style(panel(), 'visibility')).toBe('hidden');
+
+    fireEvent.tap(trigger());
+    await waitForOpen(rendered);
+    expect(style(panel(), 'visibility')).toBe('');
+    expect(style(trigger(), 'visibility')).toBe('hidden');
+
+    fireEvent.tap(trigger());
+    await waitForClose(rendered);
+    expect(style(panel(), 'visibility')).toBe('hidden');
+    expect(style(trigger(), 'visibility')).toBe('');
+
+    // A trigger that goes takes its glass with it.
+    rendered.host.glassTrigger.set(false);
+    await waitForUpdate();
+    expect(trigger().tagName.toLowerCase()).toBe('view');
   });
 
   it('closes when an item is chosen, after telling it', async () => {
@@ -279,7 +327,7 @@ describe('UiMenu', () => {
     fireEvent.tap(rendered.trigger());
     await waitForOpen(rendered);
 
-    expect(style(rendered.trigger(), 'opacity')).toBe('');
+    expect(style(rendered.trigger(), 'visibility')).toBe('');
     // Below the trigger, a gap away.
     expect(style(rendered.panel(), 'top')).toBe(`${80 + 44 + 8}px`);
   });
@@ -321,6 +369,22 @@ describe('UiMenuItem', () => {
     await waitForClose(rendered);
   });
 
+  it('is checked by a bare checked attribute, and unset when bound to undefined', async () => {
+    const rendered = await renderOpenMenu();
+    const bold = row(rendered, 'Bold');
+    const pin = row(rendered, 'Pin');
+
+    expect(bold.getAttribute('accessibility-traits')).toBe('button,selected');
+    expect(bold.querySelector('.h-5.w-5 svg')).not.toBeNull();
+    // Unset, it's an item that's never checked: no checkmark column.
+    expect(pin.querySelector('.h-5.w-5')).toBeNull();
+
+    rendered.host.pinned.set(false);
+    await waitForUpdate();
+    expect(pin.querySelector('.h-5.w-5')).not.toBeNull();
+    expect(pin.querySelector('.h-5.w-5 svg')).toBeNull();
+  });
+
   it('highlights while pressed, by touch or mouse', async () => {
     const rendered = await renderOpenMenu();
     const share = row(rendered, 'Share');
@@ -335,13 +399,43 @@ describe('UiMenuItem', () => {
     ]) {
       fireLynxEvent(share, down!);
       await waitForUpdate();
-      expect(style(highlight, 'opacity')).toBe('0.1');
+      expect(style(highlight, 'opacity')).toBe('0.08');
       fireLynxEvent(share, up!);
       await waitForUpdate();
       expect(style(highlight, 'opacity')).toBe('0');
     }
   });
 
+  it('highlights a pressed row as its platform does', async () => {
+    const pressed = async (
+      platform: { platform: string; osVersion: string } | null,
+    ) => {
+      const rendered = await renderOpenMenu(platform);
+      const share = row(rendered, 'Share');
+      fireLynxEvent(share, 'touchstart');
+      await waitForUpdate();
+      const highlight = share.firstElementChild!;
+      return {
+        classes: highlight.className.split(' '),
+        opacity: style(highlight, 'opacity'),
+      };
+    };
+
+    // iOS 26's capsule, inset from the menu's sides.
+    const glass = await pressed(IOS_26);
+    expect(glass.classes).toEqual(
+      expect.arrayContaining(['left-[10px]', 'right-[10px]', 'rounded-full']),
+    );
+    expect(glass.opacity).toBe('0.08');
+    // Edge to edge before iOS 26, and as Material's state layer.
+    for (const platform of [IOS_18, null]) {
+      const { classes, opacity } = await pressed(platform);
+      expect(classes).toEqual(expect.arrayContaining(['left-0', 'right-0']));
+      expect(classes).not.toContain('rounded-full');
+      expect(opacity).toBe('0.1');
+    }
+  });
+
   it("can't be pressed or chosen when disabled", async () => {
     const rendered = await renderOpenMenu();
     const archive = row(rendered, 'Archive, unavailable offline');