@blotch/dolan 22.2.6 → 22.2.7

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();

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

@@ -1,7 +1,7 @@
 import {
-  type ElementRef,
   type OnDestroy,
   Component,
+  ElementRef,
   ViewEncapsulation,
   booleanAttribute,
   computed,
@@ -36,6 +36,14 @@ import { UI_ICON_COLOR } from '../icon/icon-theme';
   selector: 'ui-nav-drawer',
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
+  // The drawer's class is its panel's, inside the overlay. Angular also gives
+  // the host every static attribute the app writes on <ui-nav-drawer>, and
+  // the host sits in the page's layout where the drawer is written, so a
+  // `class="p-8"` padded the page there too. The host drops it. The parts
+  // below are their host elements for the same reason: a class on a part
+  // lands on its host anyway, so a view inside it styled with the same class
+  // applied it twice.
+  host: { '[attr.class]': 'null' },
   template: `
     <overlay [attr.visible]="overlayVisible()" [style]="overlayStyle()">
       <!-- bg-black/50 dims the content behind the drawer. The fadeIn/fadeOut in
@@ -238,13 +246,9 @@ export class UiNavDrawer implements OnDestroy {
 
 @Component({
   selector: 'ui-nav-drawer-header',
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view [class]="containerClass()">
-      <ng-content />
-    </view>
-  `,
+  host: { '[class]': 'containerClass()' },
+  template: '<ng-content />',
 })
 export class UiNavDrawerHeader {
   readonly userClass = input<string>('', { alias: 'class' });
@@ -299,9 +303,11 @@ const navDrawerItem = () => UiNavDrawerItem;
   // makes the host lay the scroll-view out vertically to fill that height. The
   // panel's flex-col stretches the host to full width by default (Lynx
   // align-items: stretch), so no width class is needed on the host.
-  host: {
-    class: 'flex-1 flex-col flex',
-  },
+  //
+  // The app's class goes on the host too, rather than on the scroll-view:
+  // Angular gives the host every static attribute written on it anyway, so
+  // with the scroll-view styled as well, a padding applied twice.
+  host: { '[class]': 'hostClass()' },
   // With the host now a definite height, the scroll-view fills it with `h-full`
   // (the explicit height Lynx requires to actually scroll) and `w-full` to span
   // the host width. This is the bound the scroll-view was missing above.
@@ -313,7 +319,7 @@ const navDrawerItem = () => UiNavDrawerItem;
   template: `
     <scroll-view
       scroll-orientation="vertical"
-      [class]="contentClass()"
+      class="h-full w-full"
       (bindcontentsizechanged)="onContentLayout()"
     >
       <ng-content />
@@ -330,8 +336,8 @@ export class UiNavDrawerContent {
   // nested inside the @for group wrappers, not just the direct content children.
   readonly items = contentChildren(navDrawerItem(), { descendants: true });
 
-  protected readonly contentClass = computed(() =>
-    cn('h-full w-full', this.userClass()),
+  protected readonly hostClass = computed(() =>
+    cn('flex-1 flex-col flex', this.userClass()),
   );
 
   /**
@@ -383,26 +389,21 @@ const itemIconColor = () => {
 
 @Component({
   selector: 'ui-nav-drawer-item',
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   // Icons projected into the item (see the variant below) inject this through
   // the item's element injector, which content projection keeps them under.
   providers: [{ provide: UI_ICON_COLOR, useFactory: itemIconColor }],
-  template: `
-    <view
-      #container
-      [class]="containerClass()"
-      (bindtouchstart)="onPressStart()"
-      (bindtouchend)="onPressEnd()"
-      (bindtouchcancel)="onPressCancel()"
-      (bindmousedown)="onPressStart()"
-      (bindmouseup)="onPressEnd()"
-      (bindmouseleave)="onPressCancel()"
-      (bindtap)="onTap()"
-    >
-      <ng-content />
-    </view>
-  `,
+  host: {
+    '[class]': 'containerClass()',
+    '(bindtouchstart)': 'onPressStart()',
+    '(bindtouchend)': 'onPressEnd()',
+    '(bindtouchcancel)': 'onPressCancel()',
+    '(bindmousedown)': 'onPressStart()',
+    '(bindmouseup)': 'onPressEnd()',
+    '(bindmouseleave)': 'onPressCancel()',
+    '(bindtap)': 'onTap()',
+  },
+  template: '<ng-content />',
 })
 export class UiNavDrawerItem {
   readonly #drawer = inject(UiNavDrawer);
@@ -414,7 +415,7 @@ export class UiNavDrawerItem {
 
   readonly pressed = output<void>();
 
-  readonly containerRef = viewChild<ElementRef>('container');
+  readonly #host = inject(ElementRef).nativeElement;
   #pressAnim?: AnimationHandle;
 
   // `destructive` recolors the item's content, which the item doesn't render
@@ -435,20 +436,17 @@ export class UiNavDrawerItem {
 
   protected onPressStart(): void {
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressDown(
-      this.containerRef()?.nativeElement,
-      SCALE.pressDownLight,
-    );
+    this.#pressAnim = pressDown(this.#host, SCALE.pressDownLight);
   }
 
   protected onPressEnd(): void {
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+    this.#pressAnim = pressRelease(this.#host);
   }
 
   protected onPressCancel(): void {
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+    this.#pressAnim = pressRelease(this.#host);
   }
 
   protected onTap(): void {
@@ -478,7 +476,7 @@ export class UiNavDrawerItem {
     //  - Native Lynx (iOS/Android) reads params.scrollIntoViewOptions.
     //  - Web maps invoke() onto the DOM element.scrollIntoView(params), which
     //    reads top-level ScrollIntoViewOptions (block/behavior).
-    this.containerRef()?.nativeElement.invoke('scrollIntoView', {
+    this.#host.invoke('scrollIntoView', {
       scrollIntoViewOptions: { block: 'center', behavior: 'auto' },
       block: 'center',
       behavior: 'auto',
@@ -488,13 +486,9 @@ export class UiNavDrawerItem {
 
 @Component({
   selector: 'ui-nav-drawer-footer',
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view [class]="containerClass()">
-      <ng-content />
-    </view>
-  `,
+  host: { '[class]': 'containerClass()' },
+  template: '<ng-content />',
 })
 export class UiNavDrawerFooter {
   readonly userClass = input<string>('', { alias: 'class' });
@@ -515,28 +509,26 @@ export class UiNavDrawerFooter {
 
 @Component({
   selector: 'ui-nav-drawer-trigger',
-  imports: [LYNX_ELEMENTS, UiIcon],
+  imports: [UiIcon],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <!-- The trigger is only an icon, so it carries the words a screen reader
-         says for it. -->
-    <view
-      #container
-      [class]="containerClass()"
-      [accessibility-element]="true"
-      accessibility-traits="button"
-      [accessibility-label]="label()"
-      (bindtouchstart)="onPressStart()"
-      (bindtouchend)="onPressEnd()"
-      (bindtouchcancel)="onPressCancel()"
-      (bindmousedown)="onPressStart()"
-      (bindmouseup)="onPressEnd()"
-      (bindmouseleave)="onPressCancel()"
-      (bindtap)="onTap()"
-    >
-      <ui-icon name="menu" size="md" />
-    </view>
-  `,
+  // The trigger is only an icon, so it carries the words a screen reader
+  // says for it. The label is an attribute binding: a property binding on a
+  // component's host is checked against the DOM schema, which has no
+  // `accessibility-label`.
+  host: {
+    '[class]': 'containerClass()',
+    'accessibility-element': 'true',
+    'accessibility-traits': 'button',
+    '[attr.accessibility-label]': 'label()',
+    '(bindtouchstart)': 'onPressStart()',
+    '(bindtouchend)': 'onPressEnd()',
+    '(bindtouchcancel)': 'onPressCancel()',
+    '(bindmousedown)': 'onPressStart()',
+    '(bindmouseup)': 'onPressEnd()',
+    '(bindmouseleave)': 'onPressCancel()',
+    '(bindtap)': 'onTap()',
+  },
+  template: '<ui-icon name="menu" size="md" />',
 })
 export class UiNavDrawerTrigger {
   /** What a screen reader says for the trigger. */
@@ -545,7 +537,7 @@ export class UiNavDrawerTrigger {
 
   readonly pressed = output<void>();
 
-  readonly containerRef = viewChild<ElementRef>('container');
+  readonly #host = inject(ElementRef).nativeElement;
   #pressAnim?: AnimationHandle;
 
   protected readonly containerClass = computed(() =>
@@ -557,17 +549,17 @@ export class UiNavDrawerTrigger {
 
   protected onPressStart(): void {
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressDown(this.containerRef()?.nativeElement);
+    this.#pressAnim = pressDown(this.#host);
   }
 
   protected onPressEnd(): void {
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+    this.#pressAnim = pressRelease(this.#host);
   }
 
   protected onPressCancel(): void {
     this.#pressAnim?.cancel();
-    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+    this.#pressAnim = pressRelease(this.#host);
   }
 
   protected onTap(): void {

package/dist/ui/components/navigation-bar/navigation-bar.test.ts

@@ -415,6 +415,19 @@ describe('UiNavigationBar without the Lynx router', () => {
     expect(result.getByRole('button', { name: 'Back' })).toBeTruthy();
   });
 
+  // Angular gives a component's host every static attribute written on it:
+  // the title was a tooltip over the bar in the web preview (issue #181).
+  it('shows a title written as an attribute only in the bar', async () => {
+    const result = await render(PlainBarHost, {
+      providers: [
+        { provide: LynxSystemInfo, useValue: IOS_26 },
+        { provide: LynxAccessibilitySettings, useValue: settings },
+      ],
+    });
+    expect(result.container.querySelectorAll('[title]')).toHaveLength(0);
+    expect(result.getByRole('heading', { name: 'Settings' })).toBeTruthy();
+  });
+
   it('has no Back button with a LocationStrategy of the app’s own', async () => {
     const { back, host } = await renderBar(IOS_26, [
       { provide: LocationStrategy, useClass: MockLocationStrategy },

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

@@ -118,8 +118,13 @@ const historyOf = (injector: Injector): LynxLocationStrategy | null => {
   selector: 'ui-navigation-bar',
   imports: [LYNX_ELEMENTS, UiGlass, UiToolbarItem],
   encapsulation: ViewEncapsulation.None,
+  // Angular gives a component's host every static attribute the app writes
+  // on it, so a `title="Inbox"` lands on the host as well as in the title's
+  // text, where a browser shows it as a tooltip over the bar in the web
+  // preview, and getByTitle finds it. The host drops it.
   host: {
     '[class]': 'hostClass()',
+    '[attr.title]': 'null',
     '[style.transition]': 'containerTransition()',
     '[style.background-image]': 'edgeFade()',
   },

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

@@ -91,6 +91,15 @@ describe('UiPagination', () => {
     expect(container.querySelector('.gap-1')?.classList).toContain('mt-4');
   });
 
+  // Angular gives a component's host every static attribute written on it,
+  // so a row inside the host as well applied the class twice (issue #181).
+  it('puts its class on one element, the row', async () => {
+    const { container } = await renderPagination(7, 3);
+    expect([...container.querySelectorAll('.mt-4')]).toEqual([
+      container.querySelector('.gap-1'),
+    ]);
+  });
+
   it('leaves a gap before the last page near the start', async () => {
     const { container } = await renderPagination(10, 2);
     expect(shown(container)).toEqual(['1', '2', '3', '...', '10']);

package/dist/ui/components/pagination/pagination.ts

@@ -31,58 +31,61 @@ const defaultPageLabel = (page: number, current: boolean): string =>
   // The chevrons are drawn in the theme's foreground, like the page numbers
   // next to them. An SVG can't read the text color classes, so the color is
   // resolved and written into the markup (see icon-theme.ts).
+  //
+  // The host is the row, styled through `host` rather than as a view inside
+  // it: Angular gives a component's host every static attribute the app
+  // writes on it, so a class on <ui-pagination> lands on the host whatever
+  // the component does with its `class` input, and a row inside the host
+  // applied it twice.
+  host: { '[class]': 'containerClass()' },
   template: `
-    <view [class]="containerClass()">
-      <view
-        [class]="navButtonClass(page() <= 1)"
-        [accessibility-element]="true"
-        accessibility-traits="button"
-        [accessibility-label]="previousLabel()"
-        (bindtap)="prev()"
-      >
-        <svg
-          [attr.content]="chevronLeftSvg()"
-          style="width: 16px; height: 16px;"
-        />
-      </view>
-
-      @for (item of visiblePages(); track item.key) {
-        @if (item.type === 'page') {
-          <view
-            [class]="pageButtonClass(item.value === page())"
-            [accessibility-element]="true"
-            accessibility-traits="button"
-            [accessibility-label]="
-              pageLabel()(item.value, item.value === page())
-            "
-            (bindtap)="goTo(item.value)"
-          >
-            <text [class]="pageTextClass(item.value === page())">{{
-              item.value
-            }}</text>
-          </view>
-        } @else {
-          <view
-            class="h-8 w-8 items-center flex justify-center"
-            [accessibility-elements-hidden]="true"
-          >
-            <text class="text-xs text-muted-foreground">...</text>
-          </view>
-        }
+    <view
+      [class]="navButtonClass(page() <= 1)"
+      [accessibility-element]="true"
+      accessibility-traits="button"
+      [accessibility-label]="previousLabel()"
+      (bindtap)="prev()"
+    >
+      <svg
+        [attr.content]="chevronLeftSvg()"
+        style="width: 16px; height: 16px;"
+      />
+    </view>
+
+    @for (item of visiblePages(); track item.key) {
+      @if (item.type === 'page') {
+        <view
+          [class]="pageButtonClass(item.value === page())"
+          [accessibility-element]="true"
+          accessibility-traits="button"
+          [accessibility-label]="pageLabel()(item.value, item.value === page())"
+          (bindtap)="goTo(item.value)"
+        >
+          <text [class]="pageTextClass(item.value === page())">{{
+            item.value
+          }}</text>
+        </view>
+      } @else {
+        <view
+          class="h-8 w-8 items-center flex justify-center"
+          [accessibility-elements-hidden]="true"
+        >
+          <text class="text-xs text-muted-foreground">...</text>
+        </view>
       }
+    }
 
-      <view
-        [class]="navButtonClass(page() >= totalPages())"
-        [accessibility-element]="true"
-        accessibility-traits="button"
-        [accessibility-label]="nextLabel()"
-        (bindtap)="next()"
-      >
-        <svg
-          [attr.content]="chevronRightSvg()"
-          style="width: 16px; height: 16px;"
-        />
-      </view>
+    <view
+      [class]="navButtonClass(page() >= totalPages())"
+      [accessibility-element]="true"
+      accessibility-traits="button"
+      [accessibility-label]="nextLabel()"
+      (bindtap)="next()"
+    >
+      <svg
+        [attr.content]="chevronRightSvg()"
+        style="width: 16px; height: 16px;"
+      />
     </view>
   `,
 })

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

@@ -282,5 +282,8 @@ describe('UiPopoverContent', () => {
     expect(content.classList).toContain('w-60');
     expect(content.classList).toContain('p-3');
     expect(content.classList).not.toContain('p-4');
+    // Angular gives a component's host every static attribute written on it
+    // (issue #181): the content is its host, so the class is on one element.
+    expect([...rendered.container.querySelectorAll('.p-3')]).toEqual([content]);
   });
 });

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

@@ -53,6 +53,13 @@ describe('UiProgress', () => {
   });
   afterEach(() => animate.mockRestore());
 
+  // A class on a component lands on its host too (issue #181): the host is
+  // the track, so its height is set once.
+  it('puts its class on one element, the track', async () => {
+    const { container, track } = await renderProgress();
+    expect([...container.querySelectorAll('.h-3')]).toEqual([track()]);
+  });
+
   it('fills the track by the value out of max', async () => {
     const { fill, track } = await renderProgress();
     expect(fill().getAttribute('style')).toContain('width: 40%');

package/dist/ui/components/progress/progress.ts

@@ -13,16 +13,18 @@ import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 import { type AnimationHandle, DURATION, EASING } from '../../utils/animate';
 import { cn } from '../../utils/cn';
 
+/**
+ * The track is the host, styled through `host`, with the fill inside.
+ * Angular gives a component's host every static attribute the app writes on
+ * it, so a class on <ui-progress> lands on the host whatever the component
+ * does: with a styled track inside as well, a margin applied twice.
+ */
 @Component({
   selector: 'ui-progress',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view [class]="trackClass()">
-      <view #fill [class]="fillClass()" [style]="fillStyle()" />
-    </view>
-  `,
+  host: { '[class]': 'trackClass()' },
+  template: `<view #fill [class]="fillClass()" [style]="fillStyle()" />`,
 })
 export class UiProgress {
   readonly value = input(0);

package/dist/ui/components/radio-group/radio-group.test.ts

@@ -78,6 +78,14 @@ describe('UiRadioGroup', () => {
     expect(item('Banana').classList).toContain('h-11');
   });
 
+  // A class on a component lands on its host too (issue #181): the group and
+  // each item are their hosts, so each class applies once.
+  it('puts each class on one element', async () => {
+    const { container, item } = await renderGroup();
+    expect(container.querySelectorAll('.mt-2')).toHaveLength(1);
+    expect([...container.querySelectorAll('.pl-1')]).toEqual([item('Apple')]);
+  });
+
   it('shows the dot of the selected item only', async () => {
     const { dot } = await renderGroup();
     expect(dot('Apple').getAttribute('style')).toContain('opacity: 1');