@blotch/dolan 22.2.6 → 22.2.8

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

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

@@ -16,16 +16,18 @@ import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 import { type AnimationHandle, popIn, popOut } from '../../utils/animate';
 import { cn } from '../../utils/cn';
 
+/**
+ * The group and each item are their host elements, styled through `host`.
+ * Angular gives a component's host every static attribute the app writes on
+ * it, so a class on <ui-radio-group> or <ui-radio-group-item> lands on the
+ * host whatever the component does: with a styled view inside as well, a gap
+ * or padding applied twice.
+ */
 @Component({
   selector: 'ui-radio-group',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view [class]="containerClass()">
-      <ng-content />
-    </view>
-  `,
+  host: { '[class]': 'containerClass()' },
+  template: '<ng-content />',
 })
 export class UiRadioGroup {
   readonly value = model<string>('');
@@ -47,22 +49,23 @@ export class UiRadioGroup {
 
 @Component({
   selector: 'ui-radio-group-item',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class]': 'itemClass()',
+    '(bindtap)': 'select()',
+  },
   template: `
-    <view [class]="itemClass()" (bindtap)="select()">
-      <view [class]="circleClass()">
-        <view
-          #dot
-          [class]="dotClass()"
-          [style]="
-            isSelected() ? 'opacity: 1;' : 'opacity: 0; transform: scale(0.6);'
-          "
-        />
-      </view>
-      <text [class]="labelClass()"><ng-content /></text>
+    <view [class]="circleClass()">
+      <view
+        #dot
+        [class]="dotClass()"
+        [style]="
+          isSelected() ? 'opacity: 1;' : 'opacity: 0; transform: scale(0.6);'
+        "
+      />
     </view>
+    <text [class]="labelClass()"><ng-content /></text>
   `,
 })
 export class UiRadioGroupItem {

package/dist/ui/components/scroll-area/scroll-area.test.ts

@@ -42,6 +42,8 @@ const renderScrollArea = async () => {
     ...result,
     host: result.componentRef.instance as ScrollAreaHost,
     scrollView: () => result.container.querySelector('scroll-view')!,
+    /** The scroll area's box, its host, which the scroll view fills. */
+    box: () => result.container.querySelector('scroll-view')!.parentElement!,
     /** The view inside the scroll view that lays out the content. */
     content: () => result.getByText('Body').parentElement!,
   };
@@ -61,13 +63,23 @@ const watchAttributes = () => {
 
 describe('UiScrollArea', () => {
   it('renders projected content in a vertical scroll view', async () => {
-    const { scrollView, content } = await renderScrollArea();
+    const { scrollView, box, content } = await renderScrollArea();
     expect(scrollView().getAttribute('scroll-orientation')).toBe('vertical');
-    expect(scrollView().classList).toContain('bg-card');
+    expect(scrollView().classList).toContain('grow');
+    expect(box().classList).toContain('w-full');
+    expect(box().classList).toContain('bg-card');
     expect(content().classList).toContain('flex-col');
     expect(content().classList).toContain('gap-2');
   });
 
+  // Angular gives a component's host every static attribute written on it,
+  // so the scroll view taking the class as well applied it twice (issue
+  // #181).
+  it('puts its class on one element, its box', async () => {
+    const { container, box } = await renderScrollArea();
+    expect([...container.querySelectorAll('.bg-card')]).toEqual([box()]);
+  });
+
   it('gives the scroll view an explicit height, which it needs to scroll', async () => {
     const { host, scrollView } = await renderScrollArea();
     expect(scrollView().getAttribute('style') ?? '').not.toContain('height');

package/dist/ui/components/scroll-area/scroll-area.ts

@@ -19,6 +19,18 @@ import { cn } from '../../utils/cn';
   // removed 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 scroll area's box, and the <scroll-view> fills it.
+  // Angular gives a component's host every static attribute the app writes
+  // on it, so a class on <ui-scroll-area> lands on the host whatever the
+  // component does with its `class` input: on the <scroll-view> as well, a
+  // margin or padding applied twice. Padding the box insets the scroll view;
+  // `contentClass` pads what scrolls. `grow` fills a box with a height of its
+  // own (`h-64`, `flex-1`), and a box without one takes the scroll view's,
+  // which `height` sets: the scroll view 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: `
     <scroll-view
       [attr.scroll-orientation]="orientation()"
@@ -27,7 +39,7 @@ import { cn } from '../../utils/cn';
       [enable-nested-scroll]="nestedScroll()"
       [attr.upper-threshold]="upperThreshold()"
       [attr.lower-threshold]="lowerThreshold()"
-      [class]="scrollClass()"
+      class="grow"
       [style]="scrollStyle()"
       (bindscrolltoupper)="scrolledToStart.emit()"
       (bindscrolltolower)="scrolledToEnd.emit()"
@@ -55,8 +67,8 @@ export class UiScrollArea {
   readonly scrolledToStart = output<void>();
   readonly scrolledToEnd = output<void>();
 
-  protected readonly scrollClass = computed(() =>
-    cn('w-full', this.userClass()),
+  protected readonly hostClass = computed(() =>
+    cn('w-full flex-col flex', this.userClass()),
   );
 
   // Explicit height is required for scroll-view to scroll in Lynx

package/dist/ui/components/search-field/search-field.test.ts

@@ -41,6 +41,12 @@ class FieldHost {
   readonly field = viewChild.required(UiSearchField);
 }
 
+@Component({
+  imports: [UiSearchField],
+  template: `<ui-search-field placeholder="Songs and artists" class="mx-4" />`,
+})
+class StaticAttributesHost {}
+
 /** A bar that holds the field in a shape of its own, as the dock does. */
 const container = {
   searching: signal(false),
@@ -203,6 +209,25 @@ afterEach(() => {
   Object.assign(screen, { fieldBottom: 820, pageBottom: 874, fails: false });
 });
 
+describe('UiSearchField’s static attributes', () => {
+  // Angular gives a component's host every static attribute written on it
+  // (issue #181): the placeholder made a second match for
+  // getByPlaceholderText.
+  it('puts its class on one element, and its placeholder only on its input', async () => {
+    vi.stubGlobal('SystemInfo', IOS_26);
+    const { container, getAllByPlaceholderText } = await render(
+      StaticAttributesHost,
+      {
+        providers: [{ provide: LynxAccessibilitySettings, useValue: settings }],
+      },
+    );
+    expect(container.querySelectorAll('.mx-4')).toHaveLength(1);
+    expect(getAllByPlaceholderText('Songs and artists')).toEqual([
+      container.querySelector('input'),
+    ]);
+  });
+});
+
 describe('UiSearchField on iOS 26 and later', () => {
   it('is a glass capsule with a magnifier and a search box that searches on return', async () => {
     const { getByRole, field, fieldHost, glass, icons } =