@blotch/dolan 22.2.6 → 22.2.8

package/dist/ui/components/tab-bar/tab-bar.ts

@@ -27,8 +27,14 @@ import { type IconName, ICONS } from '../icon/icons';
  */
 @Component({
   selector: 'ui-tab-bar',
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
+  // The bar and each item are their host elements, styled through `host`,
+  // rather than a view inside the host. Angular gives a component's host
+  // every static attribute the app writes on it, so `<ui-tab-bar
+  // class="pt-2">` puts `pt-2` on the host whatever the component does with
+  // its `class` input: with a styled view inside as well, the padding applied
+  // twice.
+  //
   // `pb-safe` pads the bar by the bottom safe-area inset, so the items sit
   // above the iPhone's home indicator while the bar's background still runs
   // to the bottom edge, as a native tab bar's does. Lynx reports no insets on
@@ -38,11 +44,11 @@ import { type IconName, ICONS } from '../icon/icons';
   // native tab bar's container has: it tells VoiceOver that the buttons in it
   // are tabs. Android reads a single trait and has no tab bar trait, so there
   // the row stays a plain container.
-  template: `
-    <view accessibility-traits="tabbar" [class]="barClass()">
-      <ng-content />
-    </view>
-  `,
+  host: {
+    'accessibility-traits': 'tabbar',
+    '[class]': 'barClass()',
+  },
+  template: '<ng-content />',
 })
 export class UiTabBar {
   readonly userClass = input<string>('', { alias: 'class' });
@@ -97,7 +103,7 @@ export class UiTabBar {
     // `flex-1` has to be on the host, the row's real child: on an inner view
     // it would share out the host's width instead (same lesson as
     // ui-nav-drawer-content).
-    class: 'flex-1 flex-col flex',
+    '[class]': 'contentClass()',
     // One accessibility element per tab, named by its label, so a screen
     // reader reads "Inbox, 3, button" instead of an unlabeled SVG and a word.
     // LynxRouterLinkActive adds `selected` to `button` while the route is
@@ -122,25 +128,23 @@ export class UiTabBar {
     '(bindtap)': 'pressed.emit()',
   },
   template: `
-    <view [class]="contentClass()">
-      <view class="relative">
-        <svg [attr.content]="iconSvg()" style="width: 24px; height: 24px;" />
-        @if (badgeText()) {
-          <!-- Hangs off the icon's top-right corner, as on a native tab bar.
-               min-w-4 keeps a one-digit badge round; longer ones grow into
-               a pill. -->
-          <view
-            class="h-4 min-w-4 items-center rounded-full bg-destructive px-1 flex absolute -right-2.5 -top-1 justify-center"
+    <view class="relative">
+      <svg [attr.content]="iconSvg()" style="width: 24px; height: 24px;" />
+      @if (badgeText()) {
+        <!-- Hangs off the icon's top-right corner, as on a native tab bar.
+             min-w-4 keeps a one-digit badge round; longer ones grow into
+             a pill. -->
+        <view
+          class="h-4 min-w-4 items-center rounded-full bg-destructive px-1 flex absolute -right-2.5 -top-1 justify-center"
+        >
+          <text
+            class="text-[10px] font-semibold leading-4 text-destructive-foreground"
+            >{{ badgeText() }}</text
           >
-            <text
-              class="text-[10px] font-semibold leading-4 text-destructive-foreground"
-              >{{ badgeText() }}</text
-            >
-          </view>
-        }
-      </view>
-      <text [class]="labelClass()">{{ label() }}</text>
+        </view>
+      }
     </view>
+    <text [class]="labelClass()">{{ label() }}</text>
   `,
 })
 export class UiTabBarItem {

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

@@ -57,11 +57,11 @@ class TabsHost {
 const renderTabs = async () => {
   const result = await render(TabsHost);
   /**
-   * A trigger's own view, which holds the tap listener, around its label.
+   * A trigger: its host, which holds the tap listener, around its label.
    */
   const trigger = (label: string) => result.getByText(label).parentElement!;
   /**
-   * A panel's own view, which wraps its projected text.
+   * A panel: its host, around its projected text.
    */
   const panel = (text: string) => result.getByText(text).parentElement!;
   return {
@@ -69,9 +69,8 @@ const renderTabs = async () => {
     host: result.componentRef.instance as TabsHost,
     trigger,
     panel,
-    /** The display of a panel's host element, which shows or hides it. */
-    displayOf: (text: string) =>
-      (panel(text).parentElement as HTMLElement).style.display,
+    /** The display of a panel, which shows or hides it. */
+    displayOf: (text: string) => panel(text).style.display,
     tap: async (label: string) => {
       fireEvent.tap(trigger(label));
       await waitForUpdate();
@@ -87,8 +86,6 @@ const CANCEL = 3;
 describe('UiTabs', () => {
   it("merges each part's class with its own", async () => {
     const { container, trigger, panel } = await renderTabs();
-    // Each host element carries the given class too, so look for the view
-    // that has both its own and the given class.
     expect(container.querySelector('.flex-col.w-80')).not.toBeNull();
     expect(container.querySelector('.rounded-lg.mb-2')).not.toBeNull();
     expect(
@@ -100,6 +97,21 @@ describe('UiTabs', () => {
     expect(panel('Account panel').classList).toContain('gap-2');
   });
 
+  // Angular gives a component's host every static attribute written on it,
+  // so a part that also styled a view inside its host applied the class
+  // twice (issue #181).
+  it('puts a class written on a part on that one element', async () => {
+    const { container, trigger, panel } = await renderTabs();
+    expect(container.querySelectorAll('.w-80')).toHaveLength(1);
+    expect(container.querySelectorAll('.mb-2')).toHaveLength(1);
+    expect([...container.querySelectorAll('.px-4')]).toEqual([
+      trigger('Account'),
+    ]);
+    expect([...container.querySelectorAll('.gap-2')]).toEqual([
+      panel('Account panel'),
+    ]);
+  });
+
   it("shows only the selected tab's panel, and highlights its trigger", async () => {
     const { getByText, trigger, displayOf } = await renderTabs();
     expect(displayOf('Account panel')).toBe('flex');
@@ -140,9 +152,8 @@ describe('UiTabs', () => {
 
   it('clips a hidden panel, whose text iOS would draw from its corner', async () => {
     const { panel } = await renderTabs();
-    const hostOf = (text: string) => panel(text).parentElement as HTMLElement;
-    expect(hostOf('Billing panel').style.overflow).toBe('hidden');
-    expect(hostOf('Account panel').style.overflow).toBe('');
+    expect(panel('Billing panel').style.overflow).toBe('hidden');
+    expect(panel('Account panel').style.overflow).toBe('');
   });
 
   it('shows the tab its value is set to, without reporting a change', async () => {
@@ -287,10 +298,7 @@ describe('UiTabs', () => {
       await waitForUpdate();
       expect(animate).not.toHaveBeenCalled();
       expect(
-        (
-          result.getByText('Billing panel').parentElement!
-            .parentElement as HTMLElement
-        ).style.display,
+        result.getByText('Billing panel').parentElement!.style.display,
       ).toBe('flex');
     });
 
@@ -385,14 +393,10 @@ describe('UiTabsList, segmented', () => {
       providers: [{ provide: LynxAccessibilitySettings, useValue: settings }],
     });
     /**
-     * A trigger's own view, around its label.
+     * A trigger: its host, the track's flex item, around its label.
      */
     const trigger = (label: string) => result.getByText(label).parentElement!;
-    /**
-     * A trigger's host, the track's flex item.
-     */
-    const slot = (label: string) => trigger(label).parentElement!;
-    const track = () => slot('Photos').parentElement!;
+    const track = () => trigger('Photos').parentElement!;
     /**
      * The indicator's frame, which moves between the tabs.
      */
@@ -402,7 +406,6 @@ describe('UiTabsList, segmented', () => {
       ...result,
       host: result.componentRef.instance as SegmentedTabsHost,
       trigger,
-      slot,
       track,
       frame,
       measure: async () => {
@@ -411,23 +414,22 @@ describe('UiTabsList, segmented', () => {
           ['Albums', 90],
           ['People', 180],
         ] as const) {
-          fireEvent.layoutchange(slot(label), { detail: { width } });
+          fireEvent.layoutchange(trigger(label), { detail: { width } });
         }
         await waitForUpdate();
       },
-      /** The display of a panel's host element, which shows or hides it. */
+      /** The display of a panel, which shows or hides it. */
       displayOf: (text: string) =>
-        (result.getByText(text).parentElement!.parentElement as HTMLElement)
-          .style.display,
+        result.getByText(text).parentElement!.style.display,
     };
   };
 
   it("draws the platform's segmented control, filling its width, its tabs sharing it", async () => {
-    const { track, slot, trigger, frame, getByText } = await renderSegmented();
+    const { track, trigger, frame, getByText } = await renderSegmented();
     expect(track().classList).toContain('rounded-full');
     expect(track().classList).not.toContain('self-start');
-    expect(slot('Albums').classList).toContain('flex-1');
-    expect(slot('People').classList).toContain('flex-[2]');
+    expect(trigger('Albums').classList).toContain('flex-1');
+    expect(trigger('People').classList).toContain('flex-[2]');
     expect(trigger('Photos').classList).toContain('justify-center');
     expect(getByText('Photos').classList).toContain('font-medium');
     expect(getByText('Albums').classList).not.toContain('font-medium');
@@ -508,18 +510,18 @@ describe('UiTabsList, segmented', () => {
   });
 
   it('goes back to the default tabs when the variant changes', async () => {
-    const { host, track, slot, frame } = await renderSegmented();
+    const { host, track, trigger, frame } = await renderSegmented();
     host.variant.set('default');
     await waitForUpdate();
     expect(track().classList).toContain('self-start');
-    expect(slot('Photos').classList).not.toContain('flex-1');
+    expect(trigger('Photos').classList).not.toContain('flex-1');
     expect(frame()).toBeNull();
   });
 
   it('lets a trigger outside a list take touches as the default tabs do', async () => {
     const result = await render(LoneTriggerHost);
     const trigger = result.getByText('Alone').parentElement!;
-    fireEvent.layoutchange(trigger.parentElement!, { detail: { width: 80 } });
+    fireEvent.layoutchange(trigger, { detail: { width: 80 } });
     fireEvent.touchstart(trigger, { touches: [{ pageX: 10 }] });
     fireEvent.touchmove(trigger, { touches: [{ pageX: 60 }] });
     fireEvent.touchend(trigger);
@@ -528,6 +530,6 @@ describe('UiTabsList, segmented', () => {
     fireEvent.tap(trigger);
     await waitForUpdate();
     expect(trigger.classList).toContain('bg-background');
-    expect(trigger.parentElement!.classList).not.toContain('flex-1');
+    expect(trigger.classList).not.toContain('flex-1');
   });
 });

package/dist/ui/components/tabs/tabs.ts

@@ -1,6 +1,6 @@
 import {
-  type ElementRef,
   Component,
+  ElementRef,
   ViewEncapsulation,
   computed,
   contentChildren,
@@ -10,7 +10,6 @@ import {
   model,
   output,
   signal,
-  viewChild,
 } from '@angular/core';
 import { LYNX_ELEMENTS, LynxAccessibilitySettings } from '@blotch/angular-lynx';
 
@@ -53,13 +52,16 @@ const tabsListHost = (): SegmentedHost => inject(UiTabsList).segmentedHost;
 
 @Component({
   selector: 'ui-tabs',
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view [class]="containerClass()">
-      <ng-content />
-    </view>
-  `,
+  // Each part is its host element, styled through `host`, rather than a view
+  // inside the host. Angular gives a component's host every static attribute
+  // the app writes on it, so `<ui-tabs-content class="p-4">` puts `p-4` on
+  // the host whatever the component does with its `class` input: with a
+  // styled view inside as well, the padding applied twice. On the host alone,
+  // a class also acts where the part sits in its parent's layout (`flex-1`,
+  // margins).
+  host: { '[class]': 'containerClass()' },
+  template: '<ng-content />',
 })
 export class UiTabs {
   readonly value = model<string>('');
@@ -139,7 +141,7 @@ export class UiTabs {
  */
 @Component({
   selector: 'ui-tabs-list',
-  imports: [LYNX_ELEMENTS, UiSegmentedIndicator],
+  imports: [UiSegmentedIndicator],
   encapsulation: ViewEncapsulation.None,
   providers: [
     UiSegmentedControl,
@@ -147,17 +149,16 @@ export class UiTabs {
   ],
   // The mouse leaving the row lets go of an indicator dragged in the web
   // preview, where a drag gets no touchcancel.
+  host: {
+    'accessibility-traits': 'tabbar',
+    '[class]': 'listClass()',
+    '(bindmouseleave)': 'segmentedControl.cancel()',
+  },
   template: `
-    <view
-      accessibility-traits="tabbar"
-      [class]="listClass()"
-      (bindmouseleave)="segmentedControl.cancel()"
-    >
-      @if (segmentedControl.underlay()) {
-        <ui-segmented-indicator />
-      }
-      <ng-content />
-    </view>
+    @if (segmentedControl.underlay()) {
+      <ui-segmented-indicator />
+    }
+    <ng-content />
   `,
 })
 export class UiTabsList {
@@ -208,9 +209,19 @@ export class UiTabsList {
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   host: {
-    '[class]': 'hostClass()',
+    '[class]': 'triggerClass()',
+    '[style]': 'triggerStyle()',
     // The segmented control places its indicator from each tab's width.
     '(bindlayoutchange)': 'measure($event)',
+    '(bindtap)': 'onTap()',
+    '(bindtouchstart)': 'press($event)',
+    '(bindtouchmove)': 'move($event)',
+    '(bindtouchend)': 'release()',
+    '(bindtouchcancel)': 'cancel()',
+    '(bindmousedown)': 'press($event)',
+    '(bindmousemove)': 'move($event)',
+    '(bindmouseup)': 'release()',
+    '(bindmouseleave)': 'leave()',
   },
   // The label is the accessibility element, a button (a tab, in the list's
   // tab bar) named by its own text. A view would need a label of its own.
@@ -218,30 +229,15 @@ export class UiTabsList {
   // lynxAccessibilityTraits adds the trait to `button` on iOS, and leaves
   // Android, which reads one trait, with `button`.
   template: `
-    <view
-      #trigger
-      [class]="triggerClass()"
-      [style]="triggerStyle()"
-      (bindtap)="onTap()"
-      (bindtouchstart)="press($event)"
-      (bindtouchmove)="move($event)"
-      (bindtouchend)="release()"
-      (bindtouchcancel)="cancel()"
-      (bindmousedown)="press($event)"
-      (bindmousemove)="move($event)"
-      (bindmouseup)="release()"
-      (bindmouseleave)="leave()"
-    >
-      @if (stateLayerClass(); as stateLayer) {
-        <view [class]="stateLayer"></view>
-      }
-      <text
-        accessibility-traits="button"
-        [lynxAccessibilityTraits]="{ selected: isActive() }"
-        [class]="textClass()"
-        ><ng-content
-      /></text>
-    </view>
+    @if (stateLayerClass(); as stateLayer) {
+      <view [class]="stateLayer"></view>
+    }
+    <text
+      accessibility-traits="button"
+      [lynxAccessibilityTraits]="{ selected: isActive() }"
+      [class]="textClass()"
+      ><ng-content
+    /></text>
   `,
 })
 export class UiTabsTrigger {
@@ -254,7 +250,7 @@ export class UiTabsTrigger {
   readonly triggerValue = input.required<string>({ alias: 'value' });
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly triggerRef = viewChild.required<ElementRef>('trigger');
+  readonly #host = inject(ElementRef).nativeElement;
   #anim?: AnimationHandle;
   #previousActive?: boolean;
 
@@ -270,16 +266,6 @@ export class UiTabsTrigger {
     this.#segmented?.enabled() ? this.#segmented : null,
   );
 
-  /**
-   * A segment's host is the track's flex item, an equal share of it. Angular
-   * puts the app's static `class` on the host as well as on the trigger, so
-   * the two are merged here: `class="flex-[2]"` makes a wider tab.
-   */
-  protected readonly hostClass = computed(() => {
-    const segment = this.#segment();
-    return segment ? cn(segment.segmentHostClass, this.userClass()) : '';
-  });
-
   protected readonly triggerStyle = computed(
     () => this.#segment()?.segmentStyle(this.triggerValue()) ?? null,
   );
@@ -296,7 +282,7 @@ export class UiTabsTrigger {
   /** Animates the trigger's background when it's selected or deselected. */
   protected readonly animatingSelection = effect(() => {
     const active = this.isActive();
-    const el = this.triggerRef().nativeElement;
+    const el = this.#host;
     const wasActive = this.#previousActive;
     this.#previousActive = active;
     // The first run only records the starting state, and only a change has
@@ -348,8 +334,12 @@ export class UiTabsTrigger {
     const segment = this.#segment();
     if (segment) {
       // The list provides the segmented control, so a segment is in one.
+      // The host is both the segment's slot in the track (an equal share of
+      // it) and its own view, so an app's `class="flex-[2]"` makes a wider
+      // tab.
       const place = segmentPlace(this.#list!.triggers(), this);
       return cn(
+        segment.segmentHostClass,
         segment.segmentClass(this.triggerValue(), place),
         this.userClass(),
       );
@@ -420,34 +410,28 @@ export class UiTabsTrigger {
 
 @Component({
   selector: 'ui-tabs-content',
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   host: {
+    '[class]': 'contentClass()',
     // Hide the WHOLE host when inactive so it reserves no layout space.
     //
     // The caller writes `class="flex-1"` on <ui-tabs-content>, and Angular
     // applies that to the host element. All three content hosts live as siblings
     // inside the flex-col <ui-tabs>, so three flex-1 hosts each grow to fill a
     // third of the available height — pushing each panel lower than the last
-    // (the "Done tab starts at the very bottom" stacking). Hiding only the inner
-    // view doesn't help: the flex-1 host still claims its third.
+    // (the "Done tab starts at the very bottom" stacking).
     //
     // Toggling the host's own `display` collapses inactive hosts to 0×0 (Lynx
     // `display: none`) so they claim no space at all, while the single active
-    // host keeps its flex-1 and fills the tabs area. `flex-direction: column`
-    // makes the host lay its content out vertically when shown.
+    // host keeps its flex-1 and fills the tabs area. The inline display wins
+    // over the `flex` in the host's classes.
     '[style.display]': "isActive() ? 'flex' : 'none'",
-    '[style.flexDirection]': "'column'",
     // A hidden panel's 0×0 doesn't stop iOS drawing its text: each line is
     // laid out at 0×0 too, and its glyphs spill out from the panel's corner,
     // over the tab list. Clipping the hidden host to its 0×0 hides them.
     '[style.overflow]': "isActive() ? null : 'hidden'",
   },
-  template: `
-    <view #content [class]="contentClass()">
-      <ng-content />
-    </view>
-  `,
+  template: '<ng-content />',
 })
 export class UiTabsContent {
   readonly #tabs = inject(UiTabs);
@@ -456,7 +440,7 @@ export class UiTabsContent {
   readonly contentValue = input.required<string>({ alias: 'value' });
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly contentRef = viewChild.required<ElementRef>('content');
+  readonly #host = inject(ElementRef).nativeElement;
   #anim?: AnimationHandle;
   #isFirstRender = true;
 
@@ -476,8 +460,7 @@ export class UiTabsContent {
    * that vanished and never came back. Keeping every panel mounted and only
    * toggling `display` never destroys or re-parents anything: inactive panels
    * collapse to 0×0 (Lynx `display: none`) so they take no space, and the
-   * active one simply reappears in place. That also means the content view
-   * always exists, so `contentRef` is required.
+   * active one simply reappears in place.
    */
   protected readonly revealing = effect(() => {
     if (!this.isActive()) return;
@@ -485,7 +468,7 @@ export class UiTabsContent {
     setTimeout(() => {
       // Under Reduce Motion the panel just appears.
       if (this.#settings.reduceMotion()) return;
-      const el = this.contentRef().nativeElement;
+      const el = this.#host;
 
       this.#anim?.cancel();
 
@@ -504,8 +487,8 @@ export class UiTabsContent {
     }, 0);
   });
 
-  // Visibility is controlled at the host (see `host` block); the inner view is
-  // always a normal flex column that fills the shown host.
+  // Visibility is controlled by the host's inline display (see `host`); its
+  // classes make it a flex column when shown.
   protected readonly contentClass = computed(() =>
     cn('mt-2 flex-col flex', this.userClass()),
   );

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

@@ -56,7 +56,7 @@ const renderTextarea = async () => {
     ...result,
     host: result.componentRef.instance as TextareaHost,
     field: () => result.container.querySelector('textarea')!,
-    // The field's own column; the host element renders as a view too.
+    // The field's column: its host.
     column: () => result.container.querySelector('.flex-col')!,
     wrapper: () => result.container.querySelector('.bg-muted') as HTMLElement,
     // The layer that draws the focus ring around the field.
@@ -84,6 +84,16 @@ describe('UiTextarea', () => {
     expect(queryByText('Add a note')).toBeNull();
   });
 
+  // Angular gives a component's host every static attribute written on it
+  // (issue #181): the class styled the column twice, and the placeholder made
+  // a second match for getByPlaceholderText.
+  it('puts its class and placeholder on one element each', async () => {
+    const { container, field, getAllByPlaceholderText } =
+      await renderTextarea();
+    expect(container.querySelectorAll('.w-full')).toHaveLength(1);
+    expect(getAllByPlaceholderText('Add a note')).toEqual([field()]);
+  });
+
   it('shows its label', async () => {
     const { host, getByText } = await renderTextarea();
     host.label.set('Notes');