@blotch/dolan 22.2.2 → 22.2.4

package/dist/ui/components/scroll-area/scroll-area.test.ts

@@ -1,40 +1,111 @@
-import { Component } from '@angular/core';
-import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { Component, signal } from '@angular/core';
+import {
+  fireEvent,
+  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 { describe, expect, it, vi } from 'vitest';
+import { lynxMainThread } from '../../../test-utils/lynx-main-thread';
 import { UiScrollArea } from './scroll-area';
 
 @Component({
-  standalone: true,
   imports: [UiScrollArea, LYNX_ELEMENTS],
-  template: `<ui-scroll-area><text>Body</text></ui-scroll-area>`,
+  template: `
+    <ui-scroll-area
+      [orientation]="orientation()"
+      [height]="height()"
+      [bounces]="bounces()"
+      [scrollBar]="scrollBar()"
+      [nestedScroll]="nestedScroll()"
+      class="bg-card"
+      contentClass="gap-2"
+      (scrolledToStart)="reached.push('start')"
+      (scrolledToEnd)="reached.push('end')"
+    >
+      <text>Body</text>
+    </ui-scroll-area>
+  `,
 })
-class ScrollAreaHost {}
+class ScrollAreaHost {
+  readonly orientation = signal<'vertical' | 'horizontal'>('vertical');
+  readonly height = signal('');
+  readonly bounces = signal(true);
+  readonly scrollBar = signal(true);
+  readonly nestedScroll = signal(false);
+  readonly reached: string[] = [];
+}
+
+const renderScrollArea = async () => {
+  const result = await render(ScrollAreaHost);
+  return {
+    ...result,
+    host: result.componentRef.instance as ScrollAreaHost,
+    scrollView: () => result.container.querySelector('scroll-view')!,
+    /** The view inside the scroll view that lays out the content. */
+    content: () => result.getByText('Body').parentElement!,
+  };
+};
+
+/**
+ * The values each boolean reached Lynx with, through `__SetAttribute`.
+ */
+const watchAttributes = () => {
+  const setAttribute = vi.spyOn(lynxMainThread(), '__SetAttribute');
+  return {
+    last: (name: string): unknown =>
+      setAttribute.mock.calls.filter((call) => call[1] === name).at(-1)?.[2],
+    restore: () => setAttribute.mockRestore(),
+  };
+};
 
 describe('UiScrollArea', () => {
-  it('renders projected content in the scroll view', async () => {
-    const { getByText } = await render(ScrollAreaHost);
-    expect(getByText('Body')).toBeTruthy();
+  it('renders projected content in a vertical scroll view', async () => {
+    const { scrollView, content } = await renderScrollArea();
+    expect(scrollView().getAttribute('scroll-orientation')).toBe('vertical');
+    expect(scrollView().classList).toContain('bg-card');
+    expect(content().classList).toContain('flex-col');
+    expect(content().classList).toContain('gap-2');
   });
 
-  it('emits an explicit height when the height input is set', async () => {
-    const { componentRef, container } = await render(UiScrollArea);
-    setInputSignal((componentRef.instance as UiScrollArea).height, '250px');
+  it('gives the scroll view an explicit height, which it needs to scroll', async () => {
+    const { host, scrollView } = await renderScrollArea();
+    expect(scrollView().getAttribute('style') ?? '').not.toContain('height');
+
+    host.height.set('250px');
     await waitForUpdate();
-    const scroll = container.querySelector('scroll-view');
-    expect(scroll?.getAttribute('style')).toContain('height: 250px');
+    expect(scrollView().getAttribute('style')).toContain('height: 250px');
   });
 
-  it('flips the content layout for horizontal orientation', async () => {
-    const { componentRef, container } = await render(UiScrollArea);
-    setInputSignal(
-      (componentRef.instance as UiScrollArea).orientation,
-      'horizontal',
-    );
+  it('lays the content out in a row when horizontal', async () => {
+    const { host, scrollView, content } = await renderScrollArea();
+    host.orientation.set('horizontal');
     await waitForUpdate();
-    // The inner content wrapper picks up flex-row for the horizontal branch.
-    const rowEl = container.querySelector('.flex-row');
-    expect(rowEl).toBeTruthy();
+    expect(scrollView().getAttribute('scroll-orientation')).toBe('horizontal');
+    expect(content().classList).toContain('flex-row');
+  });
+
+  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 { host } = await renderScrollArea();
+    expect(attributes.last('bounces')).toBe(true);
+    expect(attributes.last('scroll-bar-enable')).toBe(true);
+
+    host.bounces.set(false);
+    host.scrollBar.set(false);
+    host.nestedScroll.set(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);
+    attributes.restore();
+  });
+
+  it('emits when scrolled to the start or the end', async () => {
+    const { host, scrollView } = await renderScrollArea();
+    fireEvent.scrolltolower(scrollView());
+    fireEvent.scrolltoupper(scrollView());
+    expect(host.reached).toEqual(['end', 'start']);
   });
 });

package/dist/ui/components/scroll-area/scroll-area.ts

@@ -11,19 +11,19 @@ import { cn } from '../../utils/cn';
 
 @Component({
   selector: 'ui-scroll-area',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  // `|| undefined` on boolean attributes removes the attribute entirely when
-  // false. Passing the string "false" (what Angular produces for a false
-  // binding without `|| undefined`) is still treated as truthy by Lynx's
-  // native attribute parser, so absence is the only way to truly disable.
+  // The booleans are property bindings to <scroll-view>'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: `
     <scroll-view
       [attr.scroll-orientation]="orientation()"
-      [attr.bounces]="bounces() || undefined"
-      [attr.scroll-bar-enable]="scrollBar() || undefined"
-      [attr.enable-nested-scroll]="nestedScroll() || undefined"
+      [bounces]="bounces()"
+      [scroll-bar-enable]="scrollBar()"
+      [enable-nested-scroll]="nestedScroll()"
       [attr.upper-threshold]="upperThreshold()"
       [attr.lower-threshold]="lowerThreshold()"
       [class]="scrollClass()"

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

@@ -1,107 +1,167 @@
-import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
-import { describe, expect, it } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { Component, signal } from '@angular/core';
+import {
+  fireEvent,
+  render,
+  waitForUpdate,
+  within,
+} from '@blotch/angular-lynx-testing-library';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { describe, expect, it, vi } from 'vitest';
 import { UiSelect, UiSelectItem } from './select';
 
+@Component({
+  imports: [UiSelect, UiSelectItem, LYNX_ELEMENTS],
+  template: `
+    <ui-select
+      #select
+      [(value)]="value"
+      [placeholder]="placeholder()"
+      [disabled]="disabled()"
+      class="w-48"
+      (changed)="changed($event)"
+    >
+      <ui-select-item value="apple" label="Apple" />
+      <ui-select-item value="pear" label="Pear" class="font-bold" />
+    </ui-select>
+    <text class="open-from-code" (bindtap)="select.open()">Choose</text>
+  `,
+})
+class SelectHost {
+  readonly value = signal('');
+  readonly placeholder = signal('Pick a fruit');
+  readonly disabled = signal(false);
+  readonly changed = vi.fn((_value: string) => {});
+}
+
+const renderSelect = async () => {
+  const result = await render(SelectHost);
+  const { container } = result;
+  const overlay = container.querySelector<HTMLElement>('overlay')!;
+  return {
+    ...result,
+    host: result.componentRef.instance as SelectHost,
+    overlay,
+    trigger: container.querySelector('.border-input')!,
+    triggerText: () => container.querySelector('.border-input text')!,
+    // An item's tappable row, found by its label in the sheet.
+    item: (label: string) => within(overlay).getByText(label).parentElement!,
+  };
+};
+
+/**
+ * Waits out the sheet's open sequence: the overlay shows on one tick, and the
+ * panel slides in on the next.
+ */
+const waitForOpen = async () => {
+  for (let i = 0; i < 3; i++) await waitForUpdate();
+};
+
+/**
+ * Waits for the sheet's close sequence to finish: the panel slides out, then
+ * the overlay hides. Polled rather than timed, since the sequence only starts
+ * on the update after the sheet is told to close.
+ */
+const waitForClose = (overlay: Element) =>
+  vi.waitFor(() => expect(overlay.getAttribute('visible')).toBe('false'));
+
 describe('UiSelect', () => {
-  it('renders the trigger for the current selection', async () => {
-    const { container } = await render(UiSelect);
-    expect(container).toBeTruthy();
+  it('shows the placeholder, muted, until a value is chosen', async () => {
+    const { triggerText, trigger } = await renderSelect();
+    expect(triggerText().textContent).toBe('Pick a fruit');
+    expect(triggerText().classList).toContain('text-muted-foreground');
+    expect(trigger.classList).toContain('w-48');
   });
 
-  it('displays the placeholder when no value is selected', async () => {
-    const { componentRef, container } = await render(UiSelect);
-    const inst = componentRef.instance as UiSelect;
-    setInputSignal(inst.placeholder, 'Choose...');
+  it("shows the chosen item's label", async () => {
+    const { host, triggerText } = await renderSelect();
+    host.value.set('pear');
     await waitForUpdate();
-    expect(container.textContent).toContain('Choose...');
+    expect(triggerText().textContent).toBe('Pear');
+    expect(triggerText().classList).toContain('text-foreground');
   });
 
-  it('displays the raw value when no matching item is projected', async () => {
-    // Covers the `item?.label() ?? val` fallback path.
-    const { componentRef, container } = await render(UiSelect);
-    const inst = componentRef.instance as UiSelect;
-    inst.value.set('unknown');
+  it('shows a value that no item has as it is', async () => {
+    const { host, triggerText } = await renderSelect();
+    host.value.set('kiwi');
     await waitForUpdate();
-    expect(container.textContent).toContain('unknown');
+    expect(triggerText().textContent).toBe('kiwi');
   });
 
-  it('select() updates the model, emits `changed`, and closes the sheet', async () => {
-    const { componentRef } = await render(UiSelect);
-    const inst = componentRef.instance as UiSelect;
-    inst.open();
-    const emitted: string[] = [];
-    inst.changed.subscribe((v) => emitted.push(v));
-    inst.select('b');
-    expect(inst.value()).toBe('b');
-    expect(emitted).toEqual(['b']);
+  it('opens its list when the trigger is tapped, and closes it from the sheet', async () => {
+    const { overlay, trigger } = await renderSelect();
+    expect(overlay.getAttribute('visible')).toBe('false');
+
+    fireEvent.tap(trigger);
+    await waitForOpen();
+    expect(overlay.getAttribute('visible')).toBe('true');
+
+    // Tapping the backdrop closes the sheet, which the select keeps track of:
+    // the next tap on the trigger opens it again.
+    fireEvent.tap(overlay.querySelector('view')!);
+    await waitForClose(overlay);
+    expect(overlay.getAttribute('visible')).toBe('false');
+    fireEvent.tap(trigger);
+    await waitForOpen();
+    expect(overlay.getAttribute('visible')).toBe('true');
   });
 
-  it('toggle() flips the sheet open/closed', async () => {
-    const { componentRef } = await render(UiSelect);
-    const inst = componentRef.instance as UiSelect;
-    inst.toggle();
-    inst.toggle();
-    // No throw; the internal `sheetOpen` signal is protected — verify indirectly
-    // by ensuring subsequent open()/close() calls still work.
-    inst.open();
-    inst.close();
-    expect(inst.value()).toBe('');
+  it('closes its list when the trigger is tapped again', async () => {
+    const { overlay, trigger } = await renderSelect();
+    fireEvent.tap(trigger);
+    await waitForOpen();
+    fireEvent.tap(trigger);
+    await waitForClose(overlay);
+    expect(overlay.getAttribute('visible')).toBe('false');
   });
 
-  it('toggle() / open() are no-ops when disabled', async () => {
-    const { componentRef } = await render(UiSelect);
-    const inst = componentRef.instance as UiSelect;
-    setInputSignal(inst.disabled, true);
-    await waitForUpdate();
-    // No throw and no exception paths — early-return branch is exercised.
-    inst.toggle();
-    inst.open();
-    inst.close();
-    expect(inst.value()).toBe('');
+  it('opens from code with open()', async () => {
+    const { overlay, getByText } = await renderSelect();
+    fireEvent.tap(getByText('Choose'));
+    await waitForOpen();
+    expect(overlay.getAttribute('visible')).toBe('true');
   });
 
-  it('trigger dims when the select is disabled', async () => {
-    const { componentRef, container } = await render(UiSelect);
-    const inst = componentRef.instance as UiSelect;
-    setInputSignal(inst.disabled, true);
+  it("dims and doesn't open while disabled", async () => {
+    const { host, overlay, trigger, getByText } = await renderSelect();
+    host.disabled.set(true);
     await waitForUpdate();
-    const trigger = container.querySelector('view');
-    expect(trigger?.getAttribute('class')).toContain('opacity-50');
+    expect(trigger.classList).toContain('opacity-50');
+
+    fireEvent.tap(trigger);
+    fireEvent.tap(getByText('Choose'));
+    await waitForOpen();
+    expect(overlay.getAttribute('visible')).toBe('false');
   });
 });
 
 describe('UiSelectItem', () => {
-  it('onTap delegates to the parent select', async () => {
-    const parentResult = await render(UiSelect);
-    const parent = parentResult.componentRef.instance as UiSelect;
-
-    const itemResult = await render(UiSelectItem, {
-      providers: [{ provide: UiSelect, useValue: parent }],
-    });
-    const item = itemResult.componentRef.instance as UiSelectItem;
-    setInputSignal(item.itemValue, 'x');
-    setInputSignal(item.label, 'X');
-    await waitForUpdate();
+  it('chooses its value when tapped, and closes the list', async () => {
+    const { host, overlay, trigger, triggerText, item } = await renderSelect();
+    fireEvent.tap(trigger);
+    await waitForOpen();
 
-    (item as unknown as { onTap: () => void }).onTap();
-    expect(parent.value()).toBe('x');
+    fireEvent.tap(item('Apple'));
+    expect(host.value()).toBe('apple');
+    expect(host.changed).toHaveBeenCalledWith('apple');
+    await waitForUpdate();
+    expect(triggerText().textContent).toBe('Apple');
+    await waitForClose(overlay);
+    expect(overlay.getAttribute('visible')).toBe('false');
   });
 
-  it('highlights the selected item via bg-accent', async () => {
-    const parentResult = await render(UiSelect);
-    const parent = parentResult.componentRef.instance as UiSelect;
-    parent.value.set('x');
-
-    const itemResult = await render(UiSelectItem, {
-      providers: [{ provide: UiSelect, useValue: parent }],
-    });
-    const item = itemResult.componentRef.instance as UiSelectItem;
-    setInputSignal(item.itemValue, 'x');
-    setInputSignal(item.label, 'X');
+  it('marks the chosen item with a highlight and a check', async () => {
+    const { host, item } = await renderSelect();
+    host.value.set('pear');
     await waitForUpdate();
+    expect(item('Pear').classList).toContain('bg-accent');
+    expect(item('Pear').querySelector('svg')).not.toBeNull();
+    expect(item('Apple').classList).not.toContain('bg-accent');
+    expect(item('Apple').querySelector('svg')).toBeNull();
+  });
 
-    const view = itemResult.container.querySelector('view');
-    expect(view?.getAttribute('class')).toContain('bg-accent');
+  it("adds the class to the item's own", async () => {
+    const { item } = await renderSelect();
+    expect(item('Pear').classList).toContain('font-bold');
+    expect(item('Pear').classList).toContain('px-4');
   });
 });

package/dist/ui/components/select/select.ts

@@ -3,7 +3,6 @@ import {
   ViewEncapsulation,
   computed,
   contentChildren,
-  forwardRef,
   inject,
   input,
   model,
@@ -18,17 +17,28 @@ import { cn } from '../../utils/cn';
 const CHEVRON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>`;
 const CHECK_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`;
 
+/**
+ * `UiSelectItem`, for `contentChildren()`. A call rather than the class
+ * itself: for a class, Angular's test build keeps an arrow function that
+ * nothing calls, which an app's coverage report would show as uncovered.
+ */
+const selectItem = () => UiSelectItem;
+
 @Component({
   selector: 'ui-select',
   standalone: true,
   imports: [LYNX_ELEMENTS, UiBottomSheet],
   encapsulation: ViewEncapsulation.None,
+  // `sheetOpen` is bound both ways by hand rather than with `[(open)]`: for a
+  // two-way binding Angular also compiles a fallback that assigns the field,
+  // which never runs for a signal and so shows as an uncovered branch in an
+  // app's coverage report.
   template: `
     <view [class]="triggerClass()" (bindtap)="toggle()">
       <text [class]="valueTextClass()">{{ displayText() }}</text>
       <svg [attr.content]="chevronSvg" style="width: 16px; height: 16px;" />
     </view>
-    <ui-bottom-sheet [(open)]="sheetOpen">
+    <ui-bottom-sheet [open]="sheetOpen()" (openChange)="sheetOpen.set($event)">
       <scroll-view scroll-orientation="vertical" style="max-height: 300px;">
         <view class="flex-col pb-4 flex">
           <ng-content />
@@ -47,21 +57,17 @@ export class UiSelect {
 
   protected readonly chevronSvg = CHEVRON_SVG;
 
-  // Drives the shared bottom-sheet's `open` model via `[(open)]`. All the
-  // overlay/animation/drag behavior lives in ui-bottom-sheet; select only
-  // decides when the sheet is open.
+  // Drives the shared bottom-sheet's `open` model. All the overlay/animation/
+  // drag behavior lives in ui-bottom-sheet; select only decides when the sheet
+  // is open.
   protected readonly sheetOpen = signal(false);
 
-  // `forwardRef` is required because UiSelectItem is defined later in this
-  // file — without it, the reference would be `undefined` at class-definition
-  // time and contentChildren would silently query nothing.
-  /* v8 ignore next 1 -- forwardRef lambda; JIT+jsdom doesn't wire required child inputs */
-  readonly itemRefs = contentChildren(forwardRef(() => UiSelectItem));
+  // The projected items, so the trigger can show the chosen one's label.
+  readonly itemRefs = contentChildren(selectItem());
 
   protected readonly displayText = computed(() => {
     const val = this.value();
     if (!val) return this.placeholder();
-    /* v8 ignore next 1 -- .find predicate: unreachable when no content-projected items */
     const item = this.itemRefs().find((i) => i.itemValue() === val);
     return item?.label() ?? val;
   });

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

@@ -1,26 +1,27 @@
+import { Component, signal } from '@angular/core';
 import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
 import { describe, expect, it } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
 import { UiSeparator } from './separator';
 
+@Component({
+  imports: [UiSeparator],
+  template: `<ui-separator [orientation]="orientation()" class="my-2" />`,
+})
+class SeparatorHost {
+  readonly orientation = signal<'horizontal' | 'vertical'>('horizontal');
+}
+
 describe('UiSeparator', () => {
-  it('renders horizontally (default)', async () => {
-    const { componentRef } = await render(UiSeparator);
-    // The class binding lands on the host element, which is the component's
-    // location.nativeElement (a real DOM node representing the ui-separator
-    // host). Read the class directly from that node.
-    const host = componentRef.location.nativeElement as HTMLElement;
-    expect(host.getAttribute('class')).toContain('h-px');
-  });
+  it('draws a horizontal line by default, and a vertical one when asked', async () => {
+    const { componentRef, container } = await render(SeparatorHost);
+    // The classes are on the host element, the separator's only element.
+    const line = container.querySelector('.bg-border')!;
+    expect(line.classList).toContain('h-px');
+    expect(line.classList).toContain('my-2');
 
-  it('renders vertically when the orientation input is flipped', async () => {
-    const { componentRef } = await render(UiSeparator);
-    setInputSignal(
-      (componentRef.instance as UiSeparator).orientation,
-      'vertical',
-    );
+    (componentRef.instance as SeparatorHost).orientation.set('vertical');
     await waitForUpdate();
-    const host = componentRef.location.nativeElement as HTMLElement;
-    expect(host.getAttribute('class')).toContain('w-px');
+    expect(line.classList).toContain('w-px');
+    expect(line.classList).not.toContain('h-px');
   });
 });

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

@@ -1,7 +1,11 @@
-import { Component } from '@angular/core';
-import { render } from '@blotch/angular-lynx-testing-library';
+import { Component, signal } from '@angular/core';
+import {
+  fireEvent,
+  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 {
   UiSheet,
   UiSheetDescription,
@@ -11,7 +15,6 @@ import {
 } from './sheet';
 
 @Component({
-  standalone: true,
   imports: [
     UiSheet,
     UiSheetHeader,
@@ -21,24 +24,74 @@ import {
     LYNX_ELEMENTS,
   ],
   template: `
-    <ui-sheet [(open)]="open">
-      <ui-sheet-header>
-        <ui-sheet-title>Title</ui-sheet-title>
-        <ui-sheet-description>Body</ui-sheet-description>
+    <ui-sheet [(open)]="open" class="gap-4" (closed)="closed()">
+      <ui-sheet-header class="items-center">
+        <ui-sheet-title class="text-xl">Title</ui-sheet-title>
+        <ui-sheet-description class="italic">Body</ui-sheet-description>
       </ui-sheet-header>
-      <ui-sheet-footer><text>Buttons</text></ui-sheet-footer>
+      <ui-sheet-footer class="flex-row"><text>Buttons</text></ui-sheet-footer>
     </ui-sheet>
   `,
 })
 class SheetHost {
-  open = true;
+  readonly open = signal(false);
+  readonly closed = vi.fn();
 }
 
+const renderSheet = async () => {
+  const result = await render(SheetHost);
+  return {
+    ...result,
+    host: result.componentRef.instance as SheetHost,
+    overlay: result.container.querySelector('overlay')!,
+    backdrop: result.container.querySelector('overlay > view')!,
+  };
+};
+
+/**
+ * Opens the sheet and waits out its open sequence: the overlay shows on one
+ * tick, and the panel slides in on the next.
+ */
+const openSheet = async (host: SheetHost) => {
+  host.open.set(true);
+  for (let i = 0; i < 3; i++) await waitForUpdate();
+};
+
 describe('UiSheet', () => {
   it('renders header, title, description, and footer', async () => {
-    const { getByText } = await render(SheetHost);
+    const { getByText } = await renderSheet();
     expect(getByText('Title')).toBeTruthy();
     expect(getByText('Body')).toBeTruthy();
     expect(getByText('Buttons')).toBeTruthy();
   });
+
+  it("merges each part's class with its own", async () => {
+    const { container, getByText } = await renderSheet();
+    // The sheet's class goes on the padded content wrapper, not the panel.
+    expect(container.querySelector('.px-6')?.classList).toContain('gap-4');
+    expect(container.querySelector('.mb-4')?.classList).toContain(
+      'items-center',
+    );
+    expect(getByText('Title').classList).toContain('text-xl');
+    expect(getByText('Title').classList).toContain('font-semibold');
+    expect(getByText('Body').classList).toContain('italic');
+    expect(getByText('Body').classList).toContain('text-muted-foreground');
+    expect(container.querySelector('.pt-4')?.classList).toContain('flex-row');
+  });
+
+  it('opens with `open`, and reports a dismissal through it and `closed`', async () => {
+    const { host, overlay, backdrop } = await renderSheet();
+    expect(overlay.getAttribute('visible')).toBe('false');
+
+    await openSheet(host);
+    expect(overlay.getAttribute('visible')).toBe('true');
+
+    fireEvent.tap(backdrop);
+    expect(host.open()).toBe(false);
+    // Once the panel has slid out, the overlay hides and `closed` fires.
+    await vi.waitFor(() => expect(host.closed).toHaveBeenCalled());
+    await waitForUpdate();
+    expect(overlay.getAttribute('visible')).toBe('false');
+    expect(host.closed).toHaveBeenCalledOnce();
+  });
 });

package/dist/ui/components/sheet/sheet.ts

@@ -26,8 +26,16 @@ import { cn } from '../../utils/cn';
   standalone: true,
   imports: [LYNX_ELEMENTS, UiBottomSheet],
   encapsulation: ViewEncapsulation.None,
+  // `open` is bound both ways by hand rather than with `[(open)]`: for a
+  // two-way binding Angular also compiles a fallback that assigns the field,
+  // which never runs for a signal and so shows as an uncovered branch in an
+  // app's coverage report.
   template: `
-    <ui-bottom-sheet [(open)]="open" (closed)="closed.emit()">
+    <ui-bottom-sheet
+      [open]="open()"
+      (openChange)="open.set($event)"
+      (closed)="closed.emit()"
+    >
       <view [class]="contentClass()">
         <ng-content />
       </view>