@blotch/dolan 0.0.0-stage → 22.2.0

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

@@ -0,0 +1,273 @@
+import {
+  Component,
+  ViewEncapsulation,
+  computed,
+  inject,
+  input,
+  output,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import {
+  type ChartPadding,
+  type ChartPoint,
+  UiCartesianChart,
+  niceScale,
+  sampleSmoothLine,
+} from '../cartesian-chart/cartesian-chart';
+
+// ---------------------------------------------------------------------------
+// Pure geometry (exported so it can be unit-tested without Angular)
+// ---------------------------------------------------------------------------
+
+/** A rotated line segment spec: start point (plot-local px), length, angle. */
+export type LineSegment = {
+  x: number;
+  y: number;
+  length: number;
+  /** Rotation in degrees, measured clockwise from the +x axis (screen y-down). */
+  angle: number;
+};
+
+/**
+ * Turns a polyline — already projected into plot-local pixel space — into a list
+ * of rotated segment specs. Lynx has no `<line>`/SVG, so each segment is drawn
+ * as a thin `<view>` rotated about its start point (see `UiLineSeries`).
+ *
+ * The length uses `Math.sqrt(dx² + dy²)` rather than `Math.hypot` for the same
+ * reason `niceNum` avoids `Math.log10`: `hypot` is a runtime method the Lynx
+ * build pipeline may not polyfill, whereas `sqrt`/`atan2` are ES5 and always
+ * present. Zero-length segments (duplicate consecutive points) are skipped so we
+ * never emit a degenerate 0-width rotated view.
+ */
+export const computeLineSegments = (
+  points: readonly ChartPoint[],
+): LineSegment[] => {
+  const segments: LineSegment[] = [];
+  for (let i = 0; i < points.length - 1; i++) {
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const dx = p2.x - p1.x;
+    const dy = p2.y - p1.y;
+    const length = Math.sqrt(dx * dx + dy * dy);
+    if (length === 0) continue;
+    const angle = (Math.atan2(dy, dx) * 180) / Math.PI;
+    segments.push({ x: p1.x, y: p1.y, length, angle });
+  }
+  return segments;
+};
+
+// ---------------------------------------------------------------------------
+// Rendering helpers (mirror the equivalents in cartesian-chart.ts — kept local
+// so this module stays self-contained when scaffolded by `dolan add`)
+// ---------------------------------------------------------------------------
+
+/**
+ * Formats a pixel value for an inline style, avoiding scientific notation.
+ */
+const px = (n: number): string => `${n.toFixed(2)}px`;
+
+/**
+ * Default axis label formatter — plain JS only (no `Intl`, absent in Lynx).
+ */
+const defaultTickFormat = (value: number): string =>
+  String(Math.round(value * 100) / 100);
+
+/**
+ * A single line series drawn inside a `<ui-cartesian-chart>`. Reads the shared
+ * scales from the parent chart via DI and renders the polyline (rotated `<view>`
+ * segments) plus a dot at each data point.
+ *
+ * ## Why the host is `position: absolute; width/height: 100%`
+ * Lynx resolves an absolute child against its **direct parent** (there is no
+ * `position: static`). The marks are direct children of this host, so the host
+ * itself must be the plot-sized containing block — it fills the plot area (its
+ * direct parent, a definite-size box). Sizing an *inner* view instead would fail
+ * because a content-sized host of absolute-only children collapses to 0×0.
+ */
+@Component({
+  selector: 'ui-line-series',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    style:
+      'position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;',
+    '[class]': 'userClass()',
+  },
+  template: `
+    <!-- Segments render before dots so each dot paints on top of the line
+         (Lynx paint order follows source order; z-index is unnecessary). -->
+    @for (segment of segments(); track $index) {
+      <view [style]="segment.style"></view>
+    }
+    @for (dot of dots(); track $index) {
+      <view [style]="dot.style" (bindtap)="onPointTap(dot.point)"></view>
+    }
+  `,
+})
+export class UiLineSeries {
+  readonly #chart = inject(UiCartesianChart);
+
+  readonly data = input.required<ChartPoint[]>();
+  readonly color = input('var(--primary)');
+  readonly strokeWidth = input(2);
+  readonly dotRadius = input(3);
+  readonly showDots = input(true);
+  /** Draw a smooth (monotone-cubic) curve through the points instead of straight
+   * segments. Dots still sit on the raw data points. */
+  readonly smooth = input(false);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly pointTap = output<ChartPoint>();
+
+  // Project each data point into plot-local pixel space via the shared scales.
+  // Reading the chart's scale signals here makes this recompute whenever the
+  // domain or plot size changes.
+  readonly #pixelPoints = computed(() => {
+    const scaleX = this.#chart.xScale();
+    const scaleY = this.#chart.yScale();
+    return this.data().map((point) => ({
+      x: scaleX(point.x),
+      y: scaleY(point.y),
+      point,
+    }));
+  });
+
+  protected readonly segments = computed(() => {
+    const stroke = this.strokeWidth();
+    const fill = this.color();
+    // Smooth mode replaces the raw polyline with a dense monotone-cubic
+    // resampling; `computeLineSegments` then rasterizes it identically — the
+    // curve is just made of many more, shorter rotated views.
+    const pixels = this.#pixelPoints();
+    const line = this.smooth() ? sampleSmoothLine(pixels) : pixels;
+    return computeLineSegments(line).map((s) => ({
+      style:
+        `position: absolute; left: ${px(s.x)}; top: ${px(s.y - stroke / 2)}; ` +
+        `width: ${px(s.length)}; height: ${px(stroke)}; ` +
+        `background-color: ${fill}; border-radius: ${px(stroke / 2)}; ` +
+        `transform-origin: 0 50%; transform: rotate(${s.angle.toFixed(2)}deg);`,
+    }));
+  });
+
+  protected readonly dots = computed(() => {
+    if (!this.showDots()) return [];
+    const radius = this.dotRadius();
+    const fill = this.color();
+    return this.#pixelPoints().map((p) => ({
+      point: p.point,
+      style:
+        `position: absolute; left: ${px(p.x - radius)}; top: ${px(p.y - radius)}; ` +
+        `width: ${px(radius * 2)}; height: ${px(radius * 2)}; ` +
+        `background-color: ${fill}; border-radius: ${px(radius)};`,
+    }));
+  });
+
+  protected onPointTap(point: ChartPoint): void {
+    this.pointTap.emit(point);
+  }
+}
+
+/**
+ * A ready-to-use line chart for the common single-series case. Composes a
+ * `<ui-cartesian-chart>` with one `<ui-line-series>` and auto-derives rounded
+ * axis domains + ticks from the data. For multiple series or full control over
+ * the axes, use `<ui-cartesian-chart>` with `<ui-line-series>` children directly.
+ */
+@Component({
+  selector: 'ui-line-chart',
+  standalone: true,
+  imports: [LYNX_ELEMENTS, UiCartesianChart, UiLineSeries],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <ui-cartesian-chart
+      [xDomain]="xAxis().domain"
+      [yDomain]="yAxis().domain"
+      [xTicks]="xAxis().ticks"
+      [yTicks]="yAxis().ticks"
+      [width]="width()"
+      [height]="height()"
+      [tickCount]="tickCount()"
+      [showXGrid]="showXGrid()"
+      [xAxisLabel]="xAxisLabel()"
+      [yAxisLabel]="yAxisLabel()"
+      [padding]="padding()"
+      [xTickFormat]="xTickFormat()"
+      [yTickFormat]="yTickFormat()"
+      [zoomable]="zoomable()"
+      [zoomAxes]="zoomAxes()"
+      [showZoomControls]="showZoomControls()"
+      [minZoom]="minZoom()"
+      [maxZoom]="maxZoom()"
+      [zoomStep]="zoomStep()"
+      [class]="userClass()"
+    >
+      <ui-line-series
+        [data]="data()"
+        [color]="color()"
+        [strokeWidth]="strokeWidth()"
+        [dotRadius]="dotRadius()"
+        [showDots]="showDots()"
+        [smooth]="smooth()"
+        (pointTap)="pointTap.emit($event)"
+      />
+    </ui-cartesian-chart>
+  `,
+})
+export class UiLineChart {
+  readonly data = input.required<ChartPoint[]>();
+  readonly color = input('var(--primary)');
+  readonly width = input(320);
+  readonly height = input(200);
+  readonly tickCount = input(5);
+  readonly strokeWidth = input(2);
+  readonly dotRadius = input(3);
+  readonly showDots = input(true);
+  /** Draw a smooth (monotone-cubic) curve through the points. */
+  readonly smooth = input(false);
+  /** Draw vertical gridlines at each x tick. */
+  readonly showXGrid = input(false);
+  /** Title for the x-axis (centered below the tick labels). */
+  readonly xAxisLabel = input<string>('');
+  /** Title for the y-axis (rotated in the left gutter). */
+  readonly yAxisLabel = input<string>('');
+  /** Inner inset of the plot area, each side a fraction (0–1) — see {@link ChartPadding}. */
+  readonly padding = input<ChartPadding>({});
+  /** Force the x-axis lower/upper bound instead of deriving it from the data —
+   * e.g. `xMin={0}` to anchor the origin. Omitted bounds fall back to the data. */
+  readonly xMin = input<number | undefined>(undefined);
+  readonly xMax = input<number | undefined>(undefined);
+  /** Force the y-axis lower/upper bound (e.g. `yMin={0}` to start at zero). */
+  readonly yMin = input<number | undefined>(undefined);
+  readonly yMax = input<number | undefined>(undefined);
+  readonly xTickFormat = input<(value: number) => string>(defaultTickFormat);
+  readonly yTickFormat = input<(value: number) => string>(defaultTickFormat);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  // Pan/zoom — forwarded to the underlying <ui-cartesian-chart>. Off by default.
+  readonly zoomable = input(false);
+  readonly zoomAxes = input<'x' | 'y' | 'xy'>('xy');
+  readonly showZoomControls = input(true);
+  readonly minZoom = input(1);
+  readonly maxZoom = input(8);
+  readonly zoomStep = input(1.4);
+
+  readonly pointTap = output<ChartPoint>();
+
+  // Auto-compute rounded axes from the data extremes, letting an explicit
+  // min/max override either end. `Math.min/max(...[])` yield ±Infinity for empty
+  // data, which `niceScale` handles by padding.
+  protected readonly xAxis = computed(() => {
+    const xs = this.data().map((p) => p.x);
+    const lo = this.xMin() ?? Math.min(...xs);
+    const hi = this.xMax() ?? Math.max(...xs);
+    return niceScale(lo, hi, this.tickCount());
+  });
+  protected readonly yAxis = computed(() => {
+    const ys = this.data().map((p) => p.y);
+    const lo = this.yMin() ?? Math.min(...ys);
+    const hi = this.yMax() ?? Math.max(...ys);
+    return niceScale(lo, hi, this.tickCount());
+  });
+}

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

@@ -0,0 +1 @@
+export { UiList } from './list';

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

@@ -0,0 +1,35 @@
+import { Component } 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 { UiList } from './list';
+
+@Component({
+  standalone: true,
+  imports: [UiList, LYNX_ELEMENTS],
+  template: `<ui-list><text>Item</text></ui-list>`,
+})
+class ListHost {}
+
+describe('UiList', () => {
+  it('renders projected content', async () => {
+    // Lynx `<list>` is virtualized — items are only added to the native tree by
+    // the componentAtIndex callback, which isn't driven from a unit test. Just
+    // assert the wrapper mounts (its own template bindings + host bindings are
+    // covered) without asserting on the item's text.
+    const { container } = await render(ListHost);
+    expect(container).toBeTruthy();
+  });
+
+  it('emits an explicit height style when the height input is set', async () => {
+    // JIT template bindings don't propagate through input(); flip the signal
+    // directly so listStyle exercises its truthy branch.
+    const { container, componentRef } = await render(UiList);
+    setInputSignal((componentRef.instance as UiList).height, '400px');
+    await waitForUpdate();
+
+    const list = container.querySelector('list');
+    expect(list?.getAttribute('style')).toContain('height: 400px');
+  });
+});

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

@@ -0,0 +1,71 @@
+import {
+  Component,
+  ViewEncapsulation,
+  computed,
+  input,
+  output,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import { cn } from '../../utils/cn';
+
+@Component({
+  selector: 'ui-list',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  // `|| undefined` on boolean attributes removes the attribute entirely when
+  // false. Passing the string "false" is treated as truthy by Lynx's native
+  // attribute parser, so absence is the only way to truly turn these off.
+  template: `
+    <list
+      [attr.list-type]="listType()"
+      [attr.span-count]="spanCount()"
+      [attr.scroll-orientation]="orientation()"
+      [attr.bounces]="bounces() || undefined"
+      [attr.scroll-bar-enable]="scrollBar() || undefined"
+      [attr.enable-nested-scroll]="nestedScroll() || undefined"
+      [attr.sticky]="sticky() || undefined"
+      [attr.sticky-offset]="stickyOffset()"
+      [attr.preload-buffer-count]="preloadBufferCount()"
+      [attr.list-main-axis-gap]="mainAxisGap()"
+      [attr.list-cross-axis-gap]="crossAxisGap()"
+      [attr.lower-threshold-item-count]="lowerThresholdItemCount()"
+      [attr.upper-threshold-item-count]="upperThresholdItemCount()"
+      [class]="listClass()"
+      [style]="listStyle()"
+      (bindscrolltoupper)="scrolledToStart.emit()"
+      (bindscrolltolower)="scrolledToEnd.emit()"
+    >
+      <ng-content />
+    </list>
+  `,
+})
+export class UiList {
+  readonly listType = input<'single' | 'flow' | 'waterfall'>('single');
+  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 stickyOffset = input(0);
+  readonly preloadBufferCount = input(0);
+  readonly mainAxisGap = input('');
+  readonly crossAxisGap = input('');
+  readonly lowerThresholdItemCount = input(0);
+  readonly upperThresholdItemCount = input(0);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly scrolledToStart = output<void>();
+  readonly scrolledToEnd = output<void>();
+
+  protected readonly listClass = computed(() => cn('w-full', this.userClass()));
+
+  // Explicit height is required for list to scroll in Lynx
+  protected readonly listStyle = computed(() => {
+    const h = this.height();
+    return h ? `height: ${h};` : '';
+  });
+}

package/dist/ui/components/nav-drawer/index.ts

@@ -0,0 +1,8 @@
+export {
+  UiNavDrawer,
+  UiNavDrawerHeader,
+  UiNavDrawerContent,
+  UiNavDrawerItem,
+  UiNavDrawerFooter,
+  UiNavDrawerTrigger,
+} from './nav-drawer';

package/dist/ui/components/nav-drawer/nav-drawer.test.ts

@@ -0,0 +1,267 @@
+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, vi } from 'vitest';
+import { setInputSignal } from '../../../test-utils/set-input-signal';
+import {
+  UiNavDrawer,
+  UiNavDrawerContent,
+  UiNavDrawerFooter,
+  UiNavDrawerHeader,
+  UiNavDrawerItem,
+  UiNavDrawerTrigger,
+} from './nav-drawer';
+
+@Component({
+  standalone: true,
+  imports: [
+    UiNavDrawer,
+    UiNavDrawerHeader,
+    UiNavDrawerContent,
+    UiNavDrawerItem,
+    UiNavDrawerFooter,
+    UiNavDrawerTrigger,
+    LYNX_ELEMENTS,
+  ],
+  template: `
+    <ui-nav-drawer [(open)]="open">
+      <ui-nav-drawer-header><text>Nav</text></ui-nav-drawer-header>
+      <ui-nav-drawer-content>
+        <ui-nav-drawer-item>Home</ui-nav-drawer-item>
+      </ui-nav-drawer-content>
+      <ui-nav-drawer-footer><text>Foot</text></ui-nav-drawer-footer>
+    </ui-nav-drawer>
+    <ui-nav-drawer-trigger>Open</ui-nav-drawer-trigger>
+  `,
+})
+class NavDrawerHost {
+  open = true;
+}
+
+describe('UiNavDrawer', () => {
+  const patchRefs = (inst: UiNavDrawer, view: Element) => {
+    (inst as unknown as { backdropRef: unknown }).backdropRef = signal({
+      nativeElement: view,
+    });
+    (inst as unknown as { panelRef: unknown }).panelRef = signal({
+      nativeElement: view,
+    });
+  };
+
+  it('renders header, content items, footer, and trigger', async () => {
+    const { container } = await render(NavDrawerHost);
+    expect(container).toBeTruthy();
+  });
+
+  it('backdrop tap closes the drawer', async () => {
+    const { componentRef } = await render(UiNavDrawer);
+    const inst = componentRef.instance as UiNavDrawer;
+    inst.open.set(true);
+    await waitForUpdate();
+    (inst as unknown as { onBackdropTap: () => void }).onBackdropTap();
+    expect(inst.open()).toBe(false);
+  });
+
+  it('close() sets open to false', async () => {
+    const { componentRef } = await render(UiNavDrawer);
+    const inst = componentRef.instance as UiNavDrawer;
+    inst.open.set(true);
+    inst.close();
+    expect(inst.open()).toBe(false);
+  });
+
+  it('panel tap is a no-op', async () => {
+    const { componentRef } = await render(UiNavDrawer);
+    const inst = componentRef.instance as UiNavDrawer;
+    expect(() =>
+      (inst as unknown as { onPanelTap: () => void }).onPanelTap(),
+    ).not.toThrow();
+  });
+
+  it('open effect runs the animate-in and animate-out lifecycles (left side)', async () => {
+    const { componentRef, container } = await render(UiNavDrawer);
+    const inst = componentRef.instance as UiNavDrawer;
+    const view = container.querySelector('view') as Element;
+    patchRefs(inst, view);
+    inst.open.set(true);
+    await waitForUpdate();
+    await waitForUpdate();
+    await waitForUpdate();
+
+    inst.open.set(false);
+    await new Promise((r) => setTimeout(r, 320));
+    await waitForUpdate();
+    expect(inst.open()).toBe(false);
+  });
+
+  it('open effect runs correctly for the right side', async () => {
+    const { componentRef, container } = await render(UiNavDrawer);
+    const inst = componentRef.instance as UiNavDrawer;
+    setInputSignal(inst.side, 'right');
+    await waitForUpdate();
+    const view = container.querySelector('view') as Element;
+    patchRefs(inst, view);
+    inst.open.set(true);
+    await waitForUpdate();
+    await waitForUpdate();
+    await waitForUpdate();
+    inst.open.set(false);
+    await new Promise((r) => setTimeout(r, 320));
+    expect(inst.open()).toBe(false);
+    expect(
+      Array.from(container.querySelectorAll('view')).some((el) =>
+        el.getAttribute('class')?.includes('border-l'),
+      ),
+    ).toBe(true);
+  });
+
+  it('open effect bails when backdrop/panel refs are undefined', async () => {
+    const { componentRef } = await render(UiNavDrawer);
+    const inst = componentRef.instance as UiNavDrawer;
+    inst.open.set(true);
+    await waitForUpdate();
+    await waitForUpdate();
+    inst.open.set(false);
+    await waitForUpdate();
+    expect(inst.open()).toBe(false);
+  });
+});
+
+describe('UiNavDrawerHeader / Footer', () => {
+  it('render projected content', async () => {
+    const header = await render(UiNavDrawerHeader);
+    const footer = await render(UiNavDrawerFooter);
+    expect(header.container.querySelector('view')).toBeTruthy();
+    expect(footer.container.querySelector('view')).toBeTruthy();
+  });
+});
+
+describe('UiNavDrawerContent', () => {
+  it('renders the scroll-view', async () => {
+    const parentResult = await render(UiNavDrawer);
+    const parent = parentResult.componentRef.instance as UiNavDrawer;
+    const contentResult = await render(UiNavDrawerContent, {
+      providers: [{ provide: UiNavDrawer, useValue: parent }],
+    });
+    expect(contentResult.container.querySelector('scroll-view')).toBeTruthy();
+  });
+
+  it('onContentLayout scrolls active item into view when drawer is open', async () => {
+    const parentResult = await render(UiNavDrawer);
+    const parent = parentResult.componentRef.instance as UiNavDrawer;
+    parent.open.set(true);
+    await waitForUpdate();
+
+    const contentResult = await render(UiNavDrawerContent, {
+      providers: [{ provide: UiNavDrawer, useValue: parent }],
+    });
+    const content = contentResult.componentRef.instance as UiNavDrawerContent;
+    (content as unknown as { onContentLayout: () => void }).onContentLayout();
+    expect(parent.open()).toBe(true);
+  });
+
+  it('onContentLayout is a no-op when drawer is closed', async () => {
+    const parentResult = await render(UiNavDrawer);
+    const parent = parentResult.componentRef.instance as UiNavDrawer;
+    const contentResult = await render(UiNavDrawerContent, {
+      providers: [{ provide: UiNavDrawer, useValue: parent }],
+    });
+    const content = contentResult.componentRef.instance as UiNavDrawerContent;
+    expect(() =>
+      (content as unknown as { onContentLayout: () => void }).onContentLayout(),
+    ).not.toThrow();
+  });
+});
+
+describe('UiNavDrawerItem', () => {
+  const renderItem = async (autoClose = true) => {
+    const parentResult = await render(UiNavDrawer);
+    const parent = parentResult.componentRef.instance as UiNavDrawer;
+    parent.open.set(true);
+    await waitForUpdate();
+
+    const itemResult = await render(UiNavDrawerItem, {
+      providers: [{ provide: UiNavDrawer, useValue: parent }],
+    });
+    const item = itemResult.componentRef.instance as UiNavDrawerItem;
+    setInputSignal(item.autoClose, autoClose);
+    await waitForUpdate();
+    return { parent, item, itemResult };
+  };
+
+  it('onTap emits pressed and auto-closes the drawer by default', async () => {
+    const { parent, item } = await renderItem();
+    const emitted = vi.fn();
+    item.pressed.subscribe(emitted);
+    (item as unknown as { onTap: () => void }).onTap();
+    expect(emitted).toHaveBeenCalledTimes(1);
+    expect(parent.open()).toBe(false);
+  });
+
+  it('onTap does not auto-close when autoClose is false', async () => {
+    const { parent, item } = await renderItem(false);
+    (item as unknown as { onTap: () => void }).onTap();
+    expect(parent.open()).toBe(true);
+  });
+
+  it('press handlers run cleanly', async () => {
+    const { item } = await renderItem();
+    const inst = item as unknown as {
+      onPressStart: () => void;
+      onPressEnd: () => void;
+      onPressCancel: () => void;
+    };
+    expect(() => inst.onPressStart()).not.toThrow();
+    expect(() => inst.onPressEnd()).not.toThrow();
+    expect(() => inst.onPressCancel()).not.toThrow();
+  });
+
+  it('active item carries the accent background', async () => {
+    const { item, itemResult } = await renderItem();
+    setInputSignal(item.active, true);
+    await waitForUpdate();
+    const view = itemResult.container.querySelector('view');
+    expect(view?.getAttribute('class')).toContain('bg-accent');
+  });
+
+  it('scrollIntoView calls invoke() on the container ref when populated', async () => {
+    const { item, itemResult } = await renderItem();
+    const invoke = vi.fn();
+    (item as unknown as { containerRef: unknown }).containerRef = signal({
+      nativeElement: { invoke },
+    });
+    item.scrollIntoView();
+    expect(invoke).toHaveBeenCalledWith('scrollIntoView', expect.any(Object));
+
+    // No-container path: containerRef is undefined so `?.` short-circuits.
+    (item as unknown as { containerRef: () => undefined }).containerRef = () =>
+      undefined;
+    expect(() => item.scrollIntoView()).not.toThrow();
+    void itemResult;
+  });
+});
+
+describe('UiNavDrawerTrigger', () => {
+  it('onTap emits pressed', async () => {
+    const { componentRef } = await render(UiNavDrawerTrigger);
+    const inst = componentRef.instance as unknown as UiNavDrawerTrigger & {
+      onTap: () => void;
+    };
+    const emitted = vi.fn();
+    inst.pressed.subscribe(emitted);
+    inst.onTap();
+    expect(emitted).toHaveBeenCalledTimes(1);
+  });
+
+  it('press handlers run cleanly', async () => {
+    const { componentRef } = await render(UiNavDrawerTrigger);
+    const inst = componentRef.instance as unknown as {
+      onPressStart: () => void;
+      onPressEnd: () => void;
+      onPressCancel: () => void;
+    };
+    expect(() => inst.onPressStart()).not.toThrow();
+    expect(() => inst.onPressEnd()).not.toThrow();
+    expect(() => inst.onPressCancel()).not.toThrow();
+  });
+});