@blotch/dolan 22.2.2 → 22.2.3

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

@@ -2,272 +2,114 @@ import {
   Component,
   ViewEncapsulation,
   computed,
-  inject,
   input,
   output,
 } from '@angular/core';
-import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { d3Curve, defineChart, dot, lineY } from '@tanstack/charts/universal';
+import type { ChartMark, ChartPoint } from '@tanstack/charts/types';
+import { curveMonotoneX } from 'd3-shape';
 
+import { UiChart, tooltip } from '../chart/chart';
 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;
-};
+  type CartesianPresetOptions,
+  PRESET_CHART_BINDINGS,
+  UiCartesianPreset,
+  type XYDatum,
+  presetAxes,
+} from '../chart/chart-presets';
+
+export type LineChartOptions = {
+  readonly data: readonly XYDatum[];
+  /** Any CSS color; theme tokens like `var(--primary)` follow dark mode. */
+  readonly color?: string;
+  readonly strokeWidth?: number;
+  readonly dotRadius?: number;
+  readonly showDots?: boolean;
+  /** Draws a monotone curve through the points instead of straight segments. */
+  readonly smooth?: boolean;
+} & CartesianPresetOptions;
 
 /**
- * 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 definition `<ui-line-chart>` renders, for when you want to start from
+ * the preset and add marks of your own:
  *
- * 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.
+ * ```ts
+ * const base = lineChartDefinition({ data });
+ * const withTarget = defineChart({ ...base, marks: [...base.marks, ruleY([80])] });
+ * ```
  */
-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 });
+export const lineChartDefinition = (options: LineChartOptions) => {
+  const {
+    data,
+    color = 'var(--primary)',
+    strokeWidth = 2,
+    dotRadius = 3,
+    showDots = true,
+    smooth = false,
+  } = options;
+  const curve = smooth ? d3Curve(curveMonotoneX) : undefined;
+  const marks: ChartMark<XYDatum, any, any, any, any, any, any>[] = [
+    lineY(data, { x: 'x', y: 'y', stroke: color, strokeWidth, curve }),
+  ];
+  if (showDots && dotRadius > 0) {
+    marks.push(dot(data, { x: 'x', y: 'y', r: dotRadius, fill: color }));
   }
-  return segments;
+  return defineChart({
+    marks,
+    scales: presetAxes(options, {
+      x: data.map((d) => d.x),
+      y: data.map((d) => d.y),
+    }),
+    tooltip: options.tooltip === false ? false : tooltip,
+  });
 };
 
-// ---------------------------------------------------------------------------
-// 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.
+ * A single-series line chart. For several series, a reference line or any
+ * other mark, build a definition and render it with `<ui-chart>`, starting
+ * from {@link lineChartDefinition} if you like.
  *
- * ## 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.
+ * ```html
+ * <ui-line-chart [data]="revenue" [smooth]="true" yAxisLabel="Revenue" />
+ * ```
  */
 @Component({
   selector: 'ui-line-chart',
-  standalone: true,
-  imports: [LYNX_ELEMENTS, UiCartesianChart, UiLineSeries],
+  imports: [UiChart],
   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>
+    <ui-chart
+      [definition]="definition()"
+      ${PRESET_CHART_BINDINGS}
+      (pointSelect)="onSelect($event)"
+    />
   `,
 })
-export class UiLineChart {
-  readonly data = input.required<ChartPoint[]>();
+export class UiLineChart extends UiCartesianPreset<XYDatum> {
+  readonly data = input.required<readonly XYDatum[]>();
   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());
-  });
+  /** The tapped point's datum. */
+  readonly pointTap = output<XYDatum>();
+
+  protected readonly definition = computed(() =>
+    lineChartDefinition({
+      ...this.commonOptions(),
+      data: this.data(),
+      color: this.color(),
+      strokeWidth: this.strokeWidth(),
+      dotRadius: this.dotRadius(),
+      showDots: this.showDots(),
+      smooth: this.smooth(),
+    }),
+  );
+
+  protected onSelect(point: ChartPoint | null): void {
+    const datum = this.datumOf(point);
+    if (datum) this.pointTap.emit(datum);
+  }
 }

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

@@ -1,17 +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 { describe, expect, it, vi } 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 {}
 
+/**
+ * The values each boolean reached Lynx with, through `__SetAttribute`.
+ */
+const watchAttributes = () => {
+  const mainThread = (
+    globalThis as unknown as {
+      lynxTestingEnv: { mainThread: { globalThis: Record<string, unknown> } };
+    }
+  ).lynxTestingEnv.mainThread.globalThis;
+  const setAttribute = vi.spyOn(mainThread, '__SetAttribute' as never);
+  return {
+    last: (name: string): unknown =>
+      (setAttribute.mock.calls as unknown[][])
+        .filter((call) => call[1] === name)
+        .at(-1)?.[2],
+    restore: () => setAttribute.mockRestore(),
+  };
+};
+
 describe('UiList', () => {
   it('renders projected content', async () => {
     // Lynx `<list>` is virtualized — items are only added to the native tree by
@@ -32,4 +50,53 @@ describe('UiList', () => {
     const list = container.querySelector('list');
     expect(list?.getAttribute('style')).toContain('height: 400px');
   });
+
+  it('sets the gaps as list styles, which Lynx reads, not attributes', async () => {
+    // jsdom drops style properties it doesn't know, so the gaps never show in
+    // the style attribute: watch what reaches Lynx's inline style API instead.
+    const mainThread = (
+      globalThis as unknown as {
+        lynxTestingEnv: { mainThread: { globalThis: Record<string, unknown> } };
+      }
+    ).lynxTestingEnv.mainThread.globalThis;
+    const addInlineStyle = vi.spyOn(mainThread, '__AddInlineStyle' as never);
+    const { container, componentRef } = await render(UiList);
+    const list = componentRef.instance as UiList;
+    setInputSignal(list.mainAxisGap, '8px');
+    setInputSignal(list.crossAxisGap, '12px');
+    await waitForUpdate();
+
+    const element = container.querySelector('list');
+    expect(addInlineStyle).toHaveBeenCalledWith(
+      element,
+      'list-main-axis-gap',
+      '8px',
+    );
+    expect(addInlineStyle).toHaveBeenCalledWith(
+      element,
+      'list-cross-axis-gap',
+      '12px',
+    );
+    expect(element?.getAttribute('list-main-axis-gap')).toBeNull();
+    addInlineStyle.mockRestore();
+  });
+
+  it('hands Lynx real booleans, so the defaults that are on can be turned off', async () => {
+    // A false used to remove the attribute, which leaves Lynx's default: on.
+    const attributes = watchAttributes();
+    const { componentRef } = await render(UiList);
+    const inst = componentRef.instance as UiList;
+    expect(attributes.last('bounces')).toBe(true);
+    expect(attributes.last('scroll-bar-enable')).toBe(true);
+    setInputSignal(inst.bounces, false);
+    setInputSignal(inst.scrollBar, false);
+    setInputSignal(inst.nestedScroll, true);
+    setInputSignal(inst.sticky, true);
+    await waitForUpdate();
+    expect(attributes.last('bounces')).toBe(false);
+    expect(attributes.last('scroll-bar-enable')).toBe(false);
+    expect(attributes.last('enable-nested-scroll')).toBe(true);
+    expect(attributes.last('sticky')).toBe(true);
+    attributes.restore();
+  });
 });

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

@@ -11,25 +11,24 @@ 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.
+  // The booleans are property bindings to <list>'s inputs, which hand Lynx a
+  // real `false`. They used to be `[attr.x]="x() || undefined"`, which removed
+  // the attribute when false, and a missing attribute means Lynx's default: on,
+  // for `bounces` and `scroll-bar-enable`. So neither could be turned off.
+  // (`[attr.x]` would send the string "false" instead.)
   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"
+      [bounces]="bounces()"
+      [scroll-bar-enable]="scrollBar()"
+      [enable-nested-scroll]="nestedScroll()"
+      [sticky]="sticky()"
       [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()"
@@ -63,9 +62,16 @@ export class UiList {
 
   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};` : '';
-  });
+  // Explicit height is required for list to scroll in Lynx. The gaps go here
+  // too: they're CSS properties that Lynx's list reads from its style, and as
+  // attributes they did nothing.
+  protected readonly listStyle = computed(() =>
+    [
+      this.height() && `height: ${this.height()};`,
+      this.mainAxisGap() && `list-main-axis-gap: ${this.mainAxisGap()};`,
+      this.crossAxisGap() && `list-cross-axis-gap: ${this.crossAxisGap()};`,
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
 }

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

@@ -2,7 +2,9 @@ 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 { DURATION } from '../../utils/animate';
 import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { UI_ICON_COLOR } from '../icon/icon-theme';
 import {
   UiNavDrawer,
   UiNavDrawerContent,
@@ -13,7 +15,6 @@ import {
 } from './nav-drawer';
 
 @Component({
-  standalone: true,
   imports: [
     UiNavDrawer,
     UiNavDrawerHeader,
@@ -39,6 +40,47 @@ class NavDrawerHost {
 }
 
 describe('UiNavDrawer', () => {
+  it('stops its close timers when it is destroyed while closing', async () => {
+    const warn = vi.spyOn(console, 'warn');
+    const { componentRef, unmount } = await render(UiNavDrawer);
+    const inst = componentRef.instance as UiNavDrawer;
+    inst.open.set(true);
+    for (let i = 0; i < 5; i++) await waitForUpdate();
+    inst.open.set(false);
+    await waitForUpdate();
+    // Destroyed during the close animation, as an `@if` around the drawer
+    // would do. Its close timer (DURATION.normal + 20) used to fire anyway
+    // and emit `closed` from the destroyed output.
+    unmount();
+    await new Promise((r) => setTimeout(r, DURATION.normal + 50));
+    const warnings = warn.mock.calls.map(([message]) => String(message));
+    warn.mockRestore();
+    expect(warnings.filter((message) => message.includes('NG0953'))).toEqual(
+      [],
+    );
+  });
+
+  it('moves a screen reader into the panel and keeps it there while open', async () => {
+    const { componentRef, container } = await render(UiNavDrawer);
+    const inst = componentRef.instance as UiNavDrawer;
+    const panel = container.querySelector(
+      '[accessibility-exclusive-focus]',
+    ) as Element & { invoke?: unknown };
+    expect(panel.getAttribute('accessibility-exclusive-focus')).toBe('false');
+    const invoke = vi.fn();
+    panel.invoke = invoke;
+    (inst as unknown as { backdropRef: unknown }).backdropRef = signal({
+      nativeElement: panel,
+    });
+    (inst as unknown as { panelRef: unknown }).panelRef = signal({
+      nativeElement: panel,
+    });
+    inst.open.set(true);
+    for (let i = 0; i < 5; i++) await waitForUpdate();
+    expect(invoke).toHaveBeenCalledWith('requestAccessibilityFocus');
+    expect(panel.getAttribute('accessibility-exclusive-focus')).toBe('true');
+  });
+
   const patchRefs = (inst: UiNavDrawer, view: Element) => {
     (inst as unknown as { backdropRef: unknown }).backdropRef = signal({
       nativeElement: view,
@@ -118,12 +160,18 @@ describe('UiNavDrawer', () => {
   it('open effect bails when backdrop/panel refs are undefined', async () => {
     const { componentRef } = await render(UiNavDrawer);
     const inst = componentRef.instance as UiNavDrawer;
+    const closed = vi.fn();
+    inst.closed.subscribe(closed);
     inst.open.set(true);
     await waitForUpdate();
     await waitForUpdate();
     inst.open.set(false);
     await waitForUpdate();
+    // Wait out the close sequence, so #animateOut runs (and bails) while the
+    // component is still alive. Destroying it clears the sequence's timers.
+    await new Promise((r) => setTimeout(r, DURATION.normal + 50));
     expect(inst.open()).toBe(false);
+    expect(closed).toHaveBeenCalledOnce();
   });
 });
 
@@ -216,6 +264,25 @@ describe('UiNavDrawerItem', () => {
     expect(() => inst.onPressCancel()).not.toThrow();
   });
 
+  it("destructive points the content's foreground at the destructive color", async () => {
+    const { item, itemResult } = await renderItem();
+    const view = () => itemResult.container.querySelector('view');
+    expect(view()?.getAttribute('class')).not.toContain('--foreground');
+    setInputSignal(item.variant, 'destructive');
+    await waitForUpdate();
+    expect(view()?.getAttribute('class')).toContain(
+      '[--foreground:var(--destructive)]',
+    );
+  });
+
+  it('gives projected icons the destructive color', async () => {
+    const { item, itemResult } = await renderItem();
+    const iconColor = itemResult.componentRef.injector.get(UI_ICON_COLOR);
+    expect(iconColor()).toBeUndefined();
+    setInputSignal(item.variant, 'destructive');
+    expect(iconColor()).toBe('var(--destructive)');
+  });
+
   it('active item carries the accent background', async () => {
     const { item, itemResult } = await renderItem();
     setInputSignal(item.active, true);
@@ -242,6 +309,18 @@ describe('UiNavDrawerItem', () => {
 });
 
 describe('UiNavDrawerTrigger', () => {
+  it('is a labeled button for screen readers', async () => {
+    // Only the first render is checked: under JIT, the nested <ui-icon>'s
+    // static name="menu" never reaches its signal input, so its change
+    // detection throws NG0950 and later updates don't land.
+    const { container } = await render(UiNavDrawerTrigger);
+    const trigger = container.querySelector('[accessibility-element]');
+    expect(trigger?.getAttribute('accessibility-traits')).toBe('button');
+    expect(trigger?.getAttribute('accessibility-label')).toBe(
+      'Open navigation menu',
+    );
+  });
+
   it('onTap emits pressed', async () => {
     const { componentRef } = await render(UiNavDrawerTrigger);
     const inst = componentRef.instance as unknown as UiNavDrawerTrigger & {