@blotch/dolan 22.2.6 → 22.2.8

package/dist/ui/components/input/input.ts

@@ -1,15 +1,15 @@
 import {
-  type ElementRef,
   Component,
+  ElementRef,
   ViewEncapsulation,
   booleanAttribute,
   computed,
   effect,
+  inject,
   input,
   model,
   output,
   signal,
-  viewChild,
 } from '@angular/core';
 import { type FormValueControl } from '@angular/forms/signals';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
@@ -19,69 +19,88 @@ import { cn } from '../../utils/cn';
 
 @Component({
   selector: 'ui-input',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
+  // The host is the field's column. Angular gives a component's host every
+  // static attribute the app writes on it, so a class on <ui-input> lands
+  // there whatever the component does: a column inside the host applied it
+  // twice. A placeholder lands there too, and goes: it belongs to the
+  // <input>, and a second element with it is a second match for
+  // getByPlaceholderText.
+  host: {
+    '[class]': 'containerClass()',
+    '[attr.placeholder]': 'null',
+  },
   template: `
-    <view #container [class]="containerClass()">
-      @if (label()) {
-        <text [class]="labelClass()">{{ label() }}</text>
-      }
-      <!-- Focus ring is an inline box-shadow on a dedicated overlay layer, not a
-           Tailwind ring-* class (the Lynx preset doesn't wire up --tw-ring-*, so
-           ring-* renders nothing on device). It rides its OWN layer so it can
-           fade: box-shadow is animatable:no on Lynx (the core rejects a
-           transition: box-shadow), but opacity is animatable, so we transition
-           the layer's opacity instead. The overlay is the FIRST child so Lynx,
-           which paints in strict source order, keeps the <input> on top and
-           tappable. Source order alone is NOT enough on web: CSS paints a
-           positioned (absolute) sibling above a static one regardless of source
-           order, so this transparent overlay would swallow every tap — no focus,
-           no typing. The <input> below therefore carries position:relative +
-           z-index:1 so it sits above the overlay on BOTH platforms (required on
-           web). On Lynx, though, a z-indexed element is stacked against its
-           nearest stacking context, and a scroll-view isn't one unless it sets
-           z-index itself — so the native input would stay fixed on screen while
-           the page scrolled (only its placeholder visibly floats). The wrapper's
-           z-0 makes it that stacking context, keeping the input's z-index local
-           so it scrolls with the field. pointer-events is avoided — it errors
-           the Lynx build. The shadow is OUTSET only: Lynx doesn't render inset box-shadows,
-           so the crisp 1px "border" is an outset ring hugging the edge, not a
-           real inset border. -->
-      <view [class]="inputWrapperClass()">
-        <view
-          class="rounded-xl opacity-0 absolute bottom-0 left-0 right-0 top-0"
-          [style.transition]="'opacity 150ms ease'"
-          [style.box-shadow]="ringShadow()"
-          [style.opacity]="ringVisible() ? 1 : 0"
-        ></view>
-        <!-- [attr.disabled]="disabled() || undefined": passing 'undefined'
-             removes the attribute entirely; passing 'false' would set
-             disabled="false" which Lynx still treats as disabled. -->
-        <!-- [value] not [attr.value]: [attr.value] calls renderer.setAttribute()
-             which routes to __SetAttribute — a no-op for live text on Lynx native
-             inputs. [value] is an Angular input binding that triggers
-             LynxInput.ngOnChanges, where the setValue UIMethod override lives.
-             Without this, form model resets would update the signal but the
-             native input would keep showing the user's old typed text. -->
-        <input
-          [attr.placeholder]="placeholder()"
-          [attr.type]="type()"
-          [value]="value()"
-          [attr.disabled]="disabled() || undefined"
-          class="text-sm text-foreground"
-          style="border: none; background: transparent; height: 100%; width: 100%; position: relative; z-index: 1;"
-          (bindinput)="onInput($any($event))"
-          (bindfocus)="onFocus()"
-          (bindblur)="onBlur()"
-        />
-      </view>
-      @if (error()) {
-        <text [class]="errorClass()">{{ error() }}</text>
-      } @else if (helperText()) {
-        <text [class]="helperClass()">{{ helperText() }}</text>
-      }
+    <!-- The <input> below carries the label as its accessibility-label, so
+         screen readers read it with the field. Hidden here, or VoiceOver and
+         TalkBack would stop on it a second time. -->
+    @if (label()) {
+      <text [class]="labelClass()" accessibility-elements-hidden="true">{{
+        label()
+      }}</text>
+    }
+    <!-- Focus ring is an inline box-shadow on a dedicated overlay layer, not a
+         Tailwind ring-* class (the Lynx preset doesn't wire up --tw-ring-*, so
+         ring-* renders nothing on device). It rides its OWN layer so it can
+         fade: box-shadow is animatable:no on Lynx (the core rejects a
+         transition: box-shadow), but opacity is animatable, so we transition
+         the layer's opacity instead. The overlay is the FIRST child so Lynx,
+         which paints in strict source order, keeps the <input> on top and
+         tappable. Source order alone is NOT enough on web: CSS paints a
+         positioned (absolute) sibling above a static one regardless of source
+         order, so this transparent overlay would swallow every tap — no focus,
+         no typing. The <input> below therefore carries position:relative +
+         z-index:1 so it sits above the overlay on BOTH platforms (required on
+         web). On Lynx, though, a z-indexed element is stacked against its
+         nearest stacking context, and a scroll-view isn't one unless it sets
+         z-index itself — so the native input would stay fixed on screen while
+         the page scrolled (only its placeholder visibly floats). The wrapper's
+         z-0 makes it that stacking context, keeping the input's z-index local
+         so it scrolls with the field. pointer-events is avoided — it errors
+         the Lynx build. The shadow is OUTSET only: Lynx doesn't render inset box-shadows,
+         so the crisp 1px "border" is an outset ring hugging the edge, not a
+         real inset border. -->
+    <view [class]="inputWrapperClass()">
+      <view
+        class="rounded-xl opacity-0 absolute bottom-0 left-0 right-0 top-0"
+        [style.transition]="'opacity 150ms ease'"
+        [style.box-shadow]="ringShadow()"
+        [style.opacity]="ringVisible() ? 1 : 0"
+      ></view>
+      <!-- [attr.disabled]="disabled() || undefined": passing 'undefined'
+           removes the attribute entirely; passing 'false' would set
+           disabled="false" which Lynx still treats as disabled. -->
+      <!-- [value] not [attr.value]: [attr.value] calls renderer.setAttribute()
+           which routes to __SetAttribute — a no-op for live text on Lynx native
+           inputs. [value] is an Angular input binding that triggers
+           LynxInput.ngOnChanges, where the setValue UIMethod override lives.
+           Without this, form model resets would update the signal but the
+           native input would keep showing the user's old typed text. -->
+      <!-- accessibility-element: on iOS, Lynx makes only <text> and <image>
+           accessibility elements by default, so the UITextField under an
+           <input> isn't one. VoiceOver then read the placeholder inside it,
+           or nothing once it held text. As one, it reads its
+           accessibility-label, the label, then its text. -->
+      <input
+        accessibility-element="true"
+        [attr.accessibility-label]="label() || null"
+        [attr.placeholder]="placeholder()"
+        [attr.type]="type()"
+        [value]="value()"
+        [attr.disabled]="disabled() || undefined"
+        class="text-sm text-foreground"
+        style="border: none; background: transparent; height: 100%; width: 100%; position: relative; z-index: 1;"
+        (bindinput)="onInput($any($event))"
+        (bindfocus)="onFocus()"
+        (bindblur)="onBlur()"
+      />
     </view>
+    @if (error()) {
+      <text [class]="errorClass()">{{ error() }}</text>
+    } @else if (helperText()) {
+      <text [class]="helperClass()">{{ helperText() }}</text>
+    }
   `,
 })
 export class UiInput implements FormValueControl<string> {
@@ -97,8 +116,15 @@ export class UiInput implements FormValueControl<string> {
   readonly changed = output<string>();
   readonly focused = output<void>();
   readonly blurred = output<void>();
+  /**
+   * The field lost focus, for forms, which mark it as touched as they do a
+   * native input (FormUiControl's `touch`). Signal Forms, reactive forms and
+   * template-driven forms all listen for it; a `touched` model's change
+   * isn't read by any of them.
+   */
+  readonly touch = output<void>();
 
-  readonly containerRef = viewChild<ElementRef>('container');
+  readonly #host = inject(ElementRef).nativeElement;
   readonly #isFocused = signal(false);
   #shakeAnim?: AnimationHandle;
   #previousError = '';
@@ -111,10 +137,9 @@ export class UiInput implements FormValueControl<string> {
    */
   protected readonly shakeOnError = effect(() => {
     const err = this.error();
-    const el = this.containerRef()?.nativeElement;
-    if (err && !this.#previousError && el) {
+    if (err && !this.#previousError) {
       this.#shakeAnim?.cancel();
-      this.#shakeAnim = shake(el);
+      this.#shakeAnim = shake(this.#host);
     }
     this.#previousError = err;
   });
@@ -179,6 +204,7 @@ export class UiInput implements FormValueControl<string> {
   protected onBlur(): void {
     this.#isFocused.set(false);
     this.blurred.emit();
+    this.touch.emit();
   }
 
   /**

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

@@ -11,6 +11,12 @@ class LabelHost {
   readonly disabled = signal(false);
 }
 
+@Component({
+  imports: [UiLabel],
+  template: `<ui-label class="mb-2">Email</ui-label>`,
+})
+class StaticClassHost {}
+
 describe('UiLabel', () => {
   it('renders its text, dimmed while disabled', async () => {
     const { componentRef, getByText } = await render(LabelHost);
@@ -22,4 +28,13 @@ describe('UiLabel', () => {
     await waitForUpdate();
     expect(label.classList).toContain('opacity-50');
   });
+
+  // A class on a component lands on its host too (issue #181): the label is
+  // one <text>, so the class styles one element.
+  it('is one text, with the class written on it', async () => {
+    const { container, getByText } = await render(StaticClassHost);
+    const label = getByText('Email');
+    expect(label.tagName.toLowerCase()).toBe('text');
+    expect([...container.querySelectorAll('.mb-2')]).toEqual([label]);
+  });
 });

package/dist/ui/components/label/label.ts

@@ -5,16 +5,22 @@ import {
   computed,
   input,
 } from '@angular/core';
-import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { registerHostElement } from '@blotch/angular-lynx';
 
 import { cn } from '../../utils/cn';
 
+/**
+ * The label is its host, a `<text>` (registerHostElement, below), styled
+ * through `host`. Angular gives a component's host every static attribute the
+ * app writes on it, so `<ui-label class="mb-2">` puts `mb-2` on the host
+ * whatever the component does: with a styled `<text>` inside a view host as
+ * well, the margin applied twice.
+ */
 @Component({
   selector: 'ui-label',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `<text [class]="labelClass()"><ng-content /></text>`,
+  host: { '[class]': 'labelClass()' },
+  template: '<ng-content />',
 })
 export class UiLabel {
   readonly disabled = input(false, { transform: booleanAttribute });
@@ -28,3 +34,5 @@ export class UiLabel {
     ),
   );
 }
+
+registerHostElement(UiLabel, 'text');

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

@@ -45,6 +45,8 @@ const renderList = async () => {
     ...result,
     host: result.componentRef.instance as ListHost,
     list: () => result.container.querySelector('list')!,
+    /** The list's box, its host, which the <list> fills. */
+    box: () => result.container.querySelector('list')!.parentElement!,
   };
 };
 
@@ -65,12 +67,20 @@ describe('UiList', () => {
     // Lynx `<list>` is virtualized: items join the native tree only through
     // its componentAtIndex callback, which a unit test doesn't drive. So this
     // checks the list itself rather than the projected item.
-    const { list } = await renderList();
+    const { list, box } = await renderList();
     expect(list().getAttribute('list-type')).toBe('single');
     expect(list().getAttribute('span-count')).toBe('1');
     expect(list().getAttribute('scroll-orientation')).toBe('vertical');
-    expect(list().classList).toContain('w-full');
-    expect(list().classList).toContain('bg-card');
+    expect(list().classList).toContain('grow');
+    expect(box().classList).toContain('w-full');
+    expect(box().classList).toContain('bg-card');
+  });
+
+  // Angular gives a component's host every static attribute written on it,
+  // so the <list> taking the class as well applied it twice (issue #181).
+  it('puts its class on one element, its box', async () => {
+    const { container, box } = await renderList();
+    expect([...container.querySelectorAll('.bg-card')]).toEqual([box()]);
   });
 
   it('gives the list an explicit height, which it needs to scroll', async () => {

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

@@ -19,6 +19,16 @@ import { cn } from '../../utils/cn';
   // 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.)
+  //
+  // The host is the list's box, and the <list> fills it. Angular gives a
+  // component's host every static attribute the app writes on it, so a class
+  // on <ui-list> lands on the host whatever the component does with its
+  // `class` input: on the <list> as well, a margin or padding applied twice.
+  // `grow` fills a box with a height of its own (`h-64`, `flex-1`), and a
+  // box without one takes the list's, which `height` sets: the list keeps
+  // its own height as its flex basis. Not `h-full`: a percentage height
+  // doesn't reliably resolve on a flex item in Lynx.
+  host: { '[class]': 'hostClass()' },
   template: `
     <list
       [attr.list-type]="listType()"
@@ -32,7 +42,7 @@ import { cn } from '../../utils/cn';
       [attr.preload-buffer-count]="preloadBufferCount()"
       [attr.lower-threshold-item-count]="lowerThresholdItemCount()"
       [attr.upper-threshold-item-count]="upperThresholdItemCount()"
-      [class]="listClass()"
+      class="grow"
       [style]="listStyle()"
       (bindscrolltoupper)="scrolledToStart.emit()"
       (bindscrolltolower)="scrolledToEnd.emit()"
@@ -61,7 +71,9 @@ export class UiList {
   readonly scrolledToStart = output<void>();
   readonly scrolledToEnd = output<void>();
 
-  protected readonly listClass = computed(() => cn('w-full', this.userClass()));
+  protected readonly hostClass = computed(() =>
+    cn('w-full flex-col flex', this.userClass()),
+  );
 
   // 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

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

@@ -490,6 +490,14 @@ describe('UiMenuSection and UiMenuSeparator', () => {
     expect(rendered.menu.getAllByRole('heading')).toHaveLength(1);
   });
 
+  // Angular gives a component's host every static attribute written on it
+  // (issue #181): the title was also the host's tooltip in the web preview.
+  it("doesn't give its title to its host as well", async () => {
+    const rendered = await renderOpenMenu();
+
+    expect(rendered.container.querySelectorAll('[title]')).toHaveLength(0);
+  });
+
   it('indents a Material section title as Material does', async () => {
     const rendered = await renderOpenMenu(null);
 

package/dist/ui/components/menu/menu.ts

@@ -231,6 +231,10 @@ export class UiMenuItem {
   selector: 'ui-menu-section',
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
+  // The title is the section's text. Angular also gives the host every static
+  // attribute the app writes on it, and a `title` on the host is a tooltip in
+  // the web preview and a second match for getByTitle, so the host drops it.
+  host: { '[attr.title]': 'null' },
   template: `
     <view class="flex-col flex">
       @if (title()) {

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

@@ -1,4 +1,4 @@
-import { Component, signal, viewChild } from '@angular/core';
+import { Component, ElementRef, signal, viewChild } from '@angular/core';
 import {
   fireEvent,
   render,
@@ -100,7 +100,8 @@ class NavDrawerHost {
   readonly closes = signal(0);
   readonly presses = signal(0);
   readonly drawer = viewChild.required(UiNavDrawer);
-  readonly settings = viewChild.required<UiNavDrawerItem>('settings');
+  // The settings item's element: its host.
+  readonly settings = viewChild.required('settings', { read: ElementRef });
 }
 
 const renderDrawer = async () => {
@@ -116,7 +117,7 @@ const renderDrawer = async () => {
     backdrop: () => panel().parentElement!,
     scrollView: () => container.querySelector('scroll-view')!,
     trigger: () => container.querySelector('[accessibility-element]')!,
-    // An item's own view, which holds its projected label.
+    // An item, its host: the view that holds its projected label.
     item: (label: string) => getByText(label).parentElement!,
     svg: (selector: string) => container.querySelector(`svg${selector}`)!,
   };
@@ -174,11 +175,12 @@ describe('UiNavDrawer', () => {
     expect(panel().classList).toContain('bg-background');
     expect(panel().classList).toContain('shadow-lg');
     expect(scrollView().classList).toContain('h-full');
-    expect(scrollView().classList).toContain('pt-2');
+    // The content's class is on its host, around the scroll view.
+    expect(scrollView().parentElement!.classList).toContain('flex-1');
+    expect(scrollView().parentElement!.classList).toContain('pt-2');
     expect(item('Delete account').classList).toContain('mt-4');
     expect(trigger().classList).toContain('h-10');
     expect(trigger().classList).toContain('ml-2');
-    // Each part's own view, not its host element, which keeps the bare class.
     const header = container.querySelector('.border-b');
     expect(header?.classList).toContain('gap-3');
     expect(header?.classList).not.toContain('gap-1.5');
@@ -187,6 +189,29 @@ describe('UiNavDrawer', () => {
     expect(footer?.classList).not.toContain('gap-2');
   });
 
+  // Angular gives a component's host every static attribute written on it
+  // (issue #181), so each class also styled a host: the drawer's in the
+  // page, where it is written, and each part's around its own view.
+  it('puts each class on one element: the panel, or the part', async () => {
+    const { container, getByText, panel, scrollView, item, trigger } =
+      await renderDrawer();
+    expect([...container.querySelectorAll('.shadow-lg')]).toEqual([panel()]);
+    expect([...container.querySelectorAll('.pt-2')]).toEqual([
+      scrollView().parentElement,
+    ]);
+    expect([...container.querySelectorAll('.mt-4')]).toEqual([
+      item('Delete account'),
+    ]);
+    expect([...container.querySelectorAll('.ml-2')]).toEqual([trigger()]);
+    // The header's label sits right in it: no view between them. (Items
+    // have a gap-3 of their own.)
+    expect(getByText('Menu').parentElement!.classList).toContain('gap-3');
+    expect(getByText('Menu').parentElement!.classList).toContain('border-b');
+    expect([...container.querySelectorAll('.gap-4')]).toEqual([
+      getByText('Version 1').parentElement,
+    ]);
+  });
+
   it('stays hidden until it is opened', async () => {
     const { host, overlay, panel } = await renderDrawer();
     await after(CLOSED);
@@ -354,10 +379,7 @@ describe('UiNavDrawer', () => {
 describe('UiNavDrawerContent', () => {
   it('scrolls the active item into view when the drawer opens', async () => {
     const { host } = await renderDrawer();
-    const scroll = vi.spyOn(
-      host.settings().containerRef()!.nativeElement,
-      'invoke',
-    );
+    const scroll = vi.spyOn(host.settings().nativeElement, 'invoke');
     host.open.set(true);
     await after(OPENED);
     // Instantly and centered, so the drawer slides in already scrolled.
@@ -371,20 +393,14 @@ describe('UiNavDrawerContent', () => {
     const { host, scrollView } = await renderDrawer();
     host.open.set(true);
     await after(OPENED);
-    const scroll = vi.spyOn(
-      host.settings().containerRef()!.nativeElement,
-      'invoke',
-    );
+    const scroll = vi.spyOn(host.settings().nativeElement, 'invoke');
     fireEvent.contentsizechanged(scrollView());
     expect(scroll).toHaveBeenCalledWith('scrollIntoView', expect.any(Object));
   });
 
   it("doesn't scroll while the drawer is closed", async () => {
     const { host, scrollView } = await renderDrawer();
-    const scroll = vi.spyOn(
-      host.settings().containerRef()!.nativeElement,
-      'invoke',
-    );
+    const scroll = vi.spyOn(host.settings().nativeElement, 'invoke');
     // Content collapsing as the overlay hides relays out too.
     fireEvent.contentsizechanged(scrollView());
     await after(OPENED);
@@ -394,10 +410,7 @@ describe('UiNavDrawerContent', () => {
   it("doesn't scroll when no item is active", async () => {
     const { host } = await renderDrawer();
     host.active.set('');
-    const scroll = vi.spyOn(
-      host.settings().containerRef()!.nativeElement,
-      'invoke',
-    );
+    const scroll = vi.spyOn(host.settings().nativeElement, 'invoke');
     host.open.set(true);
     await after(OPENED);
     expect(scroll).not.toHaveBeenCalled();