@blotch/dolan 22.2.4 → 22.2.5

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

@@ -1,6 +1,7 @@
 import {
   Component,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   contentChildren,
   inject,
@@ -50,7 +51,7 @@ const selectItem = () => UiSelectItem;
 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>();

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

@@ -1,11 +1,13 @@
-import { Component, signal } from '@angular/core';
+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, vi } 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,
@@ -38,6 +40,25 @@ class SheetHost {
   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 {
@@ -52,7 +73,7 @@ const renderSheet = async () => {
  * 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) => {
+const openSheet = async (host: { readonly open: WritableSignal<boolean> }) => {
   host.open.set(true);
   for (let i = 0; i < 3; i++) await waitForUpdate();
 };
@@ -95,3 +116,69 @@ describe('UiSheet', () => {
     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,21 +5,38 @@ 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',
@@ -34,6 +51,10 @@ import { cn } from '../../utils/cn';
     <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()">
@@ -42,14 +63,48 @@ import { cn } from '../../utils/cn';
     </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(),
+    ),
   );
 }
 

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

@@ -0,0 +1 @@
+export { UiSlider, type SliderVariant } from './slider';