@blotch/dolan 22.2.3 → 22.2.5

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

@@ -1,9 +1,9 @@
 import {
   Component,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   contentChildren,
-  forwardRef,
   inject,
   input,
   model,
@@ -18,17 +18,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 />
@@ -40,28 +51,24 @@ const CHECK_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" f
 export class UiSelect {
   readonly value = model<string>('');
   readonly placeholder = input('Select...');
-  readonly disabled = input(false);
+  readonly disabled = input(false, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
   readonly changed = output<string>();
 
   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,13 @@
-import { Component } from '@angular/core';
-import { render } from '@blotch/angular-lynx-testing-library';
+import { Component, type WritableSignal, 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 { afterEach, describe, expect, it, vi } from 'vitest';
+import { type SheetDetent, UiSheetSource } from '../bottom-sheet/bottom-sheet';
+import { UiGlass } from '../glass/glass';
 import {
   UiSheet,
   UiSheetDescription,
@@ -11,7 +17,6 @@ import {
 } from './sheet';
 
 @Component({
-  standalone: true,
   imports: [
     UiSheet,
     UiSheetHeader,
@@ -21,24 +26,159 @@ 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();
 }
 
+/**
+ * A glass sheet presented by a glass button, which comes first, as a button
+ * above the sheet does.
+ */
+@Component({
+  imports: [UiSheet, UiSheetSource, UiGlass, LYNX_ELEMENTS],
+  template: `
+    <blur-view ui-glass class="source" [uiSheetSource]="sheet">
+      <text>Add</text>
+    </blur-view>
+    <ui-sheet #sheet variant="glass" [(open)]="open">
+      <text>Body</text>
+    </ui-sheet>
+  `,
+})
+class SourceHost {
+  readonly open = signal(false);
+}
+
+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: { readonly open: WritableSignal<boolean> }) => {
+  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();
+  });
+});
+
+@Component({
+  imports: [UiSheet, LYNX_ELEMENTS],
+  template: `
+    <ui-sheet
+      [(open)]="open"
+      variant="glass"
+      [detents]="['medium', 'large']"
+      [(detent)]="detent"
+    >
+      <text>Body</text>
+    </ui-sheet>
+  `,
+})
+class GlassSheetHost {
+  readonly open = signal(false);
+  readonly detent = signal<SheetDetent | undefined>(undefined);
+}
+
+describe('UiSheet glass variant', () => {
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('passes the variant and the detents to its bottom sheet', async () => {
+    vi.stubGlobal('SystemInfo', { platform: 'iOS', osVersion: '26.0' });
+    const { componentRef, container, getByText } = await render(GlassSheetHost);
+    const host = componentRef.instance as GlassSheetHost;
+    // A sheet with heights of its own lets its content fill it.
+    expect(getByText('Body').parentElement?.classList).toContain('flex-1');
+
+    // Laid out as on a phone, which the medium and large detents need.
+    const backdrop = container.querySelector('overlay > view')!;
+    fireEvent.layoutchange(backdrop, { detail: { height: 874 } });
+    fireEvent.layoutchange(backdrop.firstElementChild!, {
+      detail: { height: 812 },
+    });
+    await openSheet(host);
+    expect(
+      container.querySelector('blur-view')?.getAttribute('blur-effect'),
+    ).toBe('glass');
+    expect(host.detent()).toBe('medium');
+
+    // The grabber moves it to the next detent, and the host hears of it.
+    const grabber = container.querySelector('overlay .rounded-full')!;
+    fireEvent.tap(grabber.parentElement!, { eventType: 'catchEvent' });
+    await waitForUpdate();
+    expect(host.detent()).toBe('large');
+  });
+});
+
+describe('UiSheet grown out of its control', () => {
+  afterEach(() => vi.unstubAllGlobals());
+
+  it('hands the control on to its bottom sheet, which pairs their glass', async () => {
+    vi.stubGlobal('SystemInfo', { platform: 'iOS', osVersion: '26.0' });
+    const { container } = await render(SourceHost);
+    const source = container.querySelector('.source')!;
+    const glass = container.querySelector('overlay blur-view[ui-glass]')!;
+
+    expect(source.getAttribute('glass-effect-id')).toMatch(/^ui-sheet-\d+$/);
+    expect(glass.getAttribute('glass-effect-id')).toBe(
+      source.getAttribute('glass-effect-id'),
+    );
+    // Shown until the sheet covers it.
+    expect((source as HTMLElement).style.visibility).toBe('');
+  });
 });

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

@@ -5,43 +5,106 @@ import {
   input,
   model,
   output,
+  viewChild,
 } from '@angular/core';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 
-import { UiBottomSheet } from '../bottom-sheet/bottom-sheet';
+import {
+  type BottomSheetVariant,
+  type SheetDetent,
+  type SheetSourceTarget,
+  UiBottomSheet,
+} from '../bottom-sheet/bottom-sheet';
 import { cn } from '../../utils/cn';
 
+/**
+ * `UiBottomSheet`, for the sheet's view query. 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 bottomSheetType = () => UiBottomSheet;
+
 /**
  * Styled bottom sheet: a thin wrapper over the shared `ui-bottom-sheet`
  * primitive that adds content padding and pairs with the header/title/
  * description/footer layout helpers below. All the overlay, animation, and
- * drag-to-dismiss behavior lives in `ui-bottom-sheet`.
+ * drag-to-dismiss behavior lives in `ui-bottom-sheet`, and so do the glass
+ * variant and the detents, which pass straight through.
  *
  * The consumer's `class` and the built-in padding are applied to an inner
  * content wrapper (not the panel) — the panel chrome (rounded corners, border,
  * background) comes from the primitive.
+ *
+ * Mark the control that presents it with `[uiSheetSource]="sheet"`, and the
+ * glass sheet grows out of it (see UiSheetSource).
  */
 @Component({
   selector: 'ui-sheet',
   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)"
+      [variant]="variant()"
+      [detents]="detents()"
+      [detent]="detent()"
+      (detentChange)="detent.set($event)"
+      (closed)="closed.emit()"
+    >
       <view [class]="contentClass()">
         <ng-content />
       </view>
     </ui-bottom-sheet>
   `,
 })
-export class UiSheet {
+export class UiSheet implements SheetSourceTarget {
   readonly open = model(false);
   readonly userClass = input<string>('', { alias: 'class' });
+  /** `'default'` or `'glass'`; see BottomSheetVariant. */
+  readonly variant = input<BottomSheetVariant>('default');
+  /** The heights the sheet rests at; see UiBottomSheet's `detents`. */
+  readonly detents = input<readonly SheetDetent[]>(['fit']);
+  /** The detent the sheet rests at; see UiBottomSheet's `detent`. */
+  readonly detent = model<SheetDetent>();
 
   readonly closed = output<void>();
 
+  // Required: always in the template.
+  readonly bottomSheet = viewChild.required(bottomSheetType());
+
+  /**
+   * Whether the sheet covers the control that presents it; see
+   * UiSheetSource.
+   */
+  coversSource(): boolean {
+    return this.bottomSheet().coversSource();
+  }
+
+  /**
+   * @internal Called by the `uiSheetSource` directive, for the sheet this
+   * one draws on.
+   */
+  setSource(...source: Parameters<SheetSourceTarget['setSource']>): void {
+    this.bottomSheet().setSource(...source);
+  }
+
+  /**
+   * At a detent with a height of its own, the content fills the sheet as a
+   * column, so a `flex-1` scroll view in it gets the height that's left.
+   */
   protected readonly contentClass = computed(() =>
-    cn('px-6 pb-6', this.userClass()),
+    cn(
+      'px-6 pb-6',
+      this.detents().some((detent) => detent !== 'fit') &&
+        'flex-1 flex-col flex',
+      this.userClass(),
+    ),
   );
 }