@blotch/dolan 22.2.6 → 22.2.8

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

@@ -141,7 +141,13 @@ const iconSvg = (icon: IconName, color: string): string =>
   selector: 'ui-search-field',
   imports: [LYNX_ELEMENTS, NgTemplateOutlet, UiGlass, UiGlassGroup],
   encapsulation: ViewEncapsulation.None,
-  host: { '[class]': 'hostClass()' },
+  // Angular gives a component's host every static attribute the app writes on
+  // it. The placeholder belongs to the <input>, so the host drops its copy: a
+  // second element with it is a second match for getByPlaceholderText.
+  host: {
+    '[class]': 'hostClass()',
+    '[attr.placeholder]': 'null',
+  },
   template: `
     <ng-template #field>
       @if (showsBack()) {

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

@@ -41,7 +41,9 @@ const renderSelect = async () => {
     ...result,
     host: result.componentRef.instance as SelectHost,
     overlay,
-    trigger: container.querySelector('.border-input')!,
+    // The field is the host; the row inside it takes the taps.
+    field: container.querySelector('.border-input')!,
+    trigger: container.querySelector('.border-input')!.firstElementChild!,
     triggerText: () => container.querySelector('.border-input text')!,
     // An item's tappable row, found by its label in the sheet.
     item: (label: string) => within(overlay).getByText(label).parentElement!,
@@ -66,10 +68,35 @@ const waitForClose = (overlay: Element) =>
 
 describe('UiSelect', () => {
   it('shows the placeholder, muted, until a value is chosen', async () => {
-    const { triggerText, trigger } = await renderSelect();
+    const { triggerText, field } = await renderSelect();
     expect(triggerText().textContent).toBe('Pick a fruit');
     expect(triggerText().classList).toContain('text-muted-foreground');
-    expect(trigger.classList).toContain('w-48');
+    expect(field.classList).toContain('w-48');
+  });
+
+  // Static attributes land on a component's host too (issue #181): the
+  // width applies once, to the field, and the placeholder is only shown.
+  it('puts its class on one element, and its placeholder only in its text', async () => {
+    @Component({
+      imports: [UiSelect, UiSelectItem],
+      template: `
+        <ui-select placeholder="Pick a fruit" class="w-48">
+          <ui-select-item value="apple" label="Apple" class="font-bold" />
+        </ui-select>
+      `,
+    })
+    class StaticAttributesHost {}
+
+    const { container, getByText, queryAllByPlaceholderText } =
+      await render(StaticAttributesHost);
+    expect([...container.querySelectorAll('.w-48')]).toEqual([
+      container.querySelector('.border-input'),
+    ]);
+    expect(queryAllByPlaceholderText('Pick a fruit')).toEqual([]);
+    expect(getByText('Pick a fruit')).toBeTruthy();
+    expect([...container.querySelectorAll('.font-bold')]).toEqual([
+      getByText('Apple').parentElement,
+    ]);
   });
 
   it("shows the chosen item's label", async () => {
@@ -122,10 +149,10 @@ describe('UiSelect', () => {
   });
 
   it("dims and doesn't open while disabled", async () => {
-    const { host, overlay, trigger, getByText } = await renderSelect();
+    const { host, overlay, field, trigger, getByText } = await renderSelect();
     host.disabled.set(true);
     await waitForUpdate();
-    expect(trigger.classList).toContain('opacity-50');
+    expect(field.classList).toContain('opacity-50');
 
     fireEvent.tap(trigger);
     fireEvent.tap(getByText('Choose'));

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

@@ -25,17 +25,34 @@ const CHECK_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" f
  */
 const selectItem = () => UiSelectItem;
 
+/**
+ * The host is the field: its border, fill and height, and the app's class.
+ * Angular gives a component's host every static attribute the app writes on
+ * it, so a class on <ui-select> lands on the host whatever the component
+ * does: passed on to a field inside it as well, a margin applied twice. The
+ * trigger that takes the tap fills the field, beside the sheet rather than
+ * around it, so a tap in the sheet doesn't bubble to the trigger. The
+ * placeholder is shown in a text, so the host drops its copy: an element with
+ * the attribute is a match for getByPlaceholderText.
+ */
 @Component({
   selector: 'ui-select',
-  standalone: true,
   imports: [LYNX_ELEMENTS, UiBottomSheet],
   encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class]': 'hostClass()',
+    '[attr.placeholder]': 'null',
+  },
   // `sheetOpen` is bound both ways by hand rather than with `[(open)]`: for a
   // two-way binding Angular also compiles a fallback that assigns the field,
   // which never runs for a signal and so shows as an uncovered branch in an
   // app's coverage report.
   template: `
-    <view [class]="triggerClass()" (bindtap)="toggle()">
+    <!-- The trigger fills the field: the row stretches it to its height. -->
+    <view
+      class="flex-1 flex-row items-center px-3 py-2 flex justify-between"
+      (bindtap)="toggle()"
+    >
       <text [class]="valueTextClass()">{{ displayText() }}</text>
       <svg [attr.content]="chevronSvg" style="width: 16px; height: 16px;" />
     </view>
@@ -73,9 +90,9 @@ export class UiSelect {
     return item?.label() ?? val;
   });
 
-  protected readonly triggerClass = computed(() =>
+  protected readonly hostClass = computed(() =>
     cn(
-      'h-10 flex-row items-center rounded-md border border-input bg-background px-3 py-2 flex justify-between',
+      'h-10 flex-row rounded-md border border-input bg-background flex',
       this.disabled() && 'opacity-50',
       this.userClass(),
     ),
@@ -110,18 +127,22 @@ export class UiSelect {
   }
 }
 
+/**
+ * Each item is its host, styled through `host` (see UiSelect).
+ */
 @Component({
   selector: 'ui-select-item',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class]': 'containerClass()',
+    '(bindtap)': 'onTap()',
+  },
   template: `
-    <view [class]="containerClass()" (bindtap)="onTap()">
-      <text [class]="labelClass()">{{ label() }}</text>
-      @if (isSelected()) {
-        <svg [attr.content]="checkSvg" style="width: 16px; height: 16px;" />
-      }
-    </view>
+    <text [class]="labelClass()">{{ label() }}</text>
+    @if (isSelected()) {
+      <svg [attr.content]="checkSvg" style="width: 16px; height: 16px;" />
+    }
   `,
 })
 export class UiSelectItem {

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

@@ -18,6 +18,9 @@ describe('UiSeparator', () => {
     const line = container.querySelector('.bg-border')!;
     expect(line.classList).toContain('h-px');
     expect(line.classList).toContain('my-2');
+    // One element: a static class lands on the host, so a view inside it
+    // would take it twice (issue #181).
+    expect(container.querySelectorAll('.my-2')).toHaveLength(1);
 
     (componentRef.instance as SeparatorHost).orientation.set('vertical');
     await waitForUpdate();

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

@@ -100,6 +100,24 @@ describe('UiSheet', () => {
     expect(container.querySelector('.pt-4')?.classList).toContain('flex-row');
   });
 
+  // Angular gives a component's host every static attribute written on it
+  // (issue #181), so each class also styled a host: the sheet's in the page,
+  // where it is written, and each part's around its own view or text.
+  it('puts each class on one element: the content, or the part', async () => {
+    const { container, getByText } = await renderSheet();
+    const content = container.querySelector('.px-6')!;
+    expect([...container.querySelectorAll('.gap-4')]).toEqual([content]);
+    // In the content: the bottom sheet draws views of its own with these.
+    expect(content.querySelectorAll('.items-center')).toHaveLength(1);
+    expect(content.querySelectorAll('.flex-row')).toHaveLength(1);
+    expect([...container.querySelectorAll('.text-xl')]).toEqual([
+      getByText('Title'),
+    ]);
+    expect([...container.querySelectorAll('.italic')]).toEqual([
+      getByText('Body'),
+    ]);
+  });
+
   it('opens with `open`, and reports a dismissal through it and `closed`', async () => {
     const { host, overlay, backdrop } = await renderSheet();
     expect(overlay.getAttribute('visible')).toBe('false');

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

@@ -7,7 +7,7 @@ import {
   output,
   viewChild,
 } from '@angular/core';
-import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { LYNX_ELEMENTS, registerHostElement } from '@blotch/angular-lynx';
 
 import {
   type BottomSheetVariant,
@@ -32,17 +32,25 @@ const bottomSheetType = () => UiBottomSheet;
  * variant and the detents, which pass straight through.
  *
  * The consumer's `class` and the built-in padding are applied to an inner
- * content wrapper (not the panel) — the panel chrome (rounded corners, border,
- * background) comes from the primitive.
+ * content wrapper (not the panel, nor the sheet's host) — the panel chrome
+ * (rounded corners, border, background) comes from the primitive.
  *
  * Mark the control that presents it with `[uiSheetSource]="sheet"`, and the
  * glass sheet grows out of it (see UiSheetSource).
  */
 @Component({
   selector: 'ui-sheet',
-  standalone: true,
   imports: [LYNX_ELEMENTS, UiBottomSheet],
   encapsulation: ViewEncapsulation.None,
+  // The sheet's class is its content's, inside the overlay. Angular also
+  // gives the host every static attribute the app writes on <ui-sheet>, and
+  // the host sits in the page's layout where the sheet is written, so a
+  // `class="px-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 or text inside it styled with the
+  // same class applied it twice. The title and description are text, so
+  // their hosts are `<text>` elements.
+  host: { '[attr.class]': 'null' },
   // `open` is bound both ways by hand rather than with `[(open)]`: for a
   // two-way binding Angular also compiles a fallback that assigns the field,
   // which never runs for a signal and so shows as an uncovered branch in an
@@ -110,14 +118,9 @@ export class UiSheet implements SheetSourceTarget {
 
 @Component({
   selector: 'ui-sheet-header',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view [class]="containerClass()">
-      <ng-content />
-    </view>
-  `,
+  host: { '[class]': 'containerClass()' },
+  template: '<ng-content />',
 })
 export class UiSheetHeader {
   readonly userClass = input<string>('', { alias: 'class' });
@@ -129,10 +132,9 @@ export class UiSheetHeader {
 
 @Component({
   selector: 'ui-sheet-title',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `<text [class]="textClass()"><ng-content /></text>`,
+  host: { '[class]': 'textClass()' },
+  template: '<ng-content />',
 })
 export class UiSheetTitle {
   readonly userClass = input<string>('', { alias: 'class' });
@@ -142,12 +144,13 @@ export class UiSheetTitle {
   );
 }
 
+registerHostElement(UiSheetTitle, 'text');
+
 @Component({
   selector: 'ui-sheet-description',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `<text [class]="textClass()"><ng-content /></text>`,
+  host: { '[class]': 'textClass()' },
+  template: '<ng-content />',
 })
 export class UiSheetDescription {
   readonly userClass = input<string>('', { alias: 'class' });
@@ -157,16 +160,13 @@ export class UiSheetDescription {
   );
 }
 
+registerHostElement(UiSheetDescription, 'text');
+
 @Component({
   selector: 'ui-sheet-footer',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view [class]="containerClass()">
-      <ng-content />
-    </view>
-  `,
+  host: { '[class]': 'containerClass()' },
+  template: '<ng-content />',
 })
 export class UiSheetFooter {
   readonly userClass = input<string>('', { alias: 'class' });

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

@@ -18,6 +18,14 @@ describe('UiSkeleton', () => {
     expect(skeleton?.classList).toContain('w-32');
   });
 
+  // A class on a component lands on its host too (issue #181): the host is
+  // the placeholder, so its size is set once.
+  it('is one element, with the class written on it', async () => {
+    const { container } = await render(SkeletonHost);
+    expect(container.querySelectorAll('.h-4')).toHaveLength(1);
+    expect(container.querySelector('.h-4')?.classList).toContain('bg-muted');
+  });
+
   it('pulses', async () => {
     const animate = vi.spyOn(lynxMainThread(), '__ElementAnimate');
     const { container } = await render(SkeletonHost);

package/dist/ui/components/skeleton/skeleton.ts

@@ -1,28 +1,33 @@
 import {
-  type ElementRef,
   Component,
+  ElementRef,
   ViewEncapsulation,
   computed,
   effect,
+  inject,
   input,
-  viewChild,
 } from '@angular/core';
-import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 
 import { pulse } from '../../utils/animate';
 import { cn } from '../../utils/cn';
 
+/**
+ * The skeleton is its host, styled through `host`. Angular gives a
+ * component's host every static attribute the app writes on it, so a class on
+ * <ui-skeleton> lands on the host whatever the component does: with a styled
+ * view inside as well, a margin applied twice, and the placeholder's size had
+ * to be set on both.
+ */
 @Component({
   selector: 'ui-skeleton',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `<view #skeleton [class]="skeletonClass()" />`,
+  host: { '[class]': 'skeletonClass()' },
+  template: '',
 })
 export class UiSkeleton {
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly skeletonRef = viewChild.required<ElementRef>('skeleton');
+  readonly #host = inject(ElementRef).nativeElement;
 
   /**
    * Pulses the skeleton. A field rather than a constructor: Angular's test
@@ -30,7 +35,7 @@ export class UiSkeleton {
    * app's coverage report would show as uncovered.
    */
   protected readonly pulsing = effect(() => {
-    pulse(this.skeletonRef().nativeElement);
+    pulse(this.#host);
   });
 
   protected readonly skeletonClass = computed(() =>

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

@@ -141,10 +141,22 @@ describe('UiSlider', () => {
     settings.reduceTransparency.set(false);
   });
 
+  // Static attributes land on a component's host too (issue #181): the
+  // margin applies once, and only the slider itself is named Volume.
+  it('puts its class and accessibility label on one element each', async () => {
+    const { container, slider, getAllByAccessibilityLabel } =
+      await renderSlider();
+    expect([...container.querySelectorAll('.mt-2')]).toEqual([
+      slider.parentElement,
+    ]);
+    expect(getAllByAccessibilityLabel('Volume')).toEqual([slider]);
+  });
+
   it('shows its value on a track in the theme colors', async () => {
     const { slider, track, fill, thumb } = await renderSlider();
 
-    expect(slider.classList).toContain('mt-2');
+    expect(slider.parentElement!.classList).toContain('mt-2');
+    expect(slider.classList).toContain('w-full');
     expect(style(slider, 'height')).toBe('20px');
     expect(track.classList).toContain('bg-secondary');
     expect(fill.classList).toContain('bg-primary');

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

@@ -304,6 +304,19 @@ type Press = {
   selector: 'ui-slider',
   imports: [LYNX_ELEMENTS, UiGlass],
   encapsulation: ViewEncapsulation.None,
+  // The host holds the slider, with the app's class. Angular gives a
+  // component's host every static attribute the app writes on it, so a class
+  // on <ui-slider> lands on the host whatever the component does: passed on
+  // to the root as well, a margin or padding applied twice. The root fills
+  // the host, and stays a view of its own: Lynx reads `consume-slide-event` as
+  // an array and `accessibility-element` as a boolean, which only a property
+  // binding on a Lynx element passes (a host binding would make them
+  // strings). Its accessibility-label is the root's, so the host drops its
+  // copy: two elements named the same would each be read.
+  host: {
+    '[class]': 'hostClass()',
+    '[attr.accessibility-label]': 'null',
+  },
   // Only the root takes touches: everything inside it ignores them, so a
   // touch's `x` on iOS and Android is relative to the slider, wherever the
   // finger lands (Lynx gives `x` relative to the element touched).
@@ -497,9 +510,9 @@ export class UiSlider implements FormValueControl<number> {
       : `${Math.round(this.#fraction() * 100)}%`;
   });
 
-  protected readonly rootClass = computed(() =>
-    cn('w-full relative', this.userClass()),
-  );
+  protected readonly hostClass = computed(() => cn(this.userClass()));
+
+  protected readonly rootClass = computed(() => cn('w-full relative'));
 
   protected readonly rootStyle = computed(() => ({
     height: px(this.#geometry().height),

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

@@ -17,12 +17,18 @@ class SpinnerHost {
   readonly className = signal('');
 }
 
+@Component({
+  imports: [UiSpinner],
+  template: `<ui-spinner class="mx-2" />`,
+})
+class StaticClassHost {}
+
 const renderSpinner = async () => {
   const result = await render(SpinnerHost);
   return {
     ...result,
     host: result.componentRef.instance as SpinnerHost,
-    // The spinner's own view: the one that holds the svg.
+    // The spinner: its host, which holds the svg.
     spinner: () => result.container.querySelector('svg')!.parentElement!,
     svgContent: () =>
       result.container.querySelector('svg')!.getAttribute('content'),
@@ -75,6 +81,15 @@ describe('UiSpinner', () => {
     expect(spinner().getAttribute('class')).toBe('ml-2');
   });
 
+  // A class on a component lands on its host too (issue #181): the host is
+  // the spinner, so the margin applies once.
+  it('puts a static class on one element, the spinner', async () => {
+    const { container } = await render(StaticClassHost);
+    expect([...container.querySelectorAll('.mx-2')]).toEqual([
+      container.querySelector('svg')!.parentElement,
+    ]);
+  });
+
   it('turns continuously', async () => {
     const animate = vi.spyOn(lynxMainThread(), '__ElementAnimate');
     const { spinner } = await renderSpinner();

package/dist/ui/components/spinner/spinner.ts

@@ -1,11 +1,11 @@
 import {
-  type ElementRef,
   Component,
+  ElementRef,
   ViewEncapsulation,
   computed,
   effect,
+  inject,
   input,
-  viewChild,
 } from '@angular/core';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 
@@ -20,15 +20,23 @@ const SIZE_MAP = { xs: 16, sm: 20, md: 24, lg: 32 } as const;
   selector: 'ui-spinner',
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
+  // The host is the box that turns, sized and styled through `host`, with the
+  // drawing inside. Angular gives a component's host every static attribute
+  // the app writes on it, so a class on <ui-spinner> lands on the host
+  // whatever the component does: with a styled box inside as well, a margin
+  // applied twice.
+  //
   // SVG markup is passed via [attr.content] rather than as child elements.
   // Lynx's native <svg> element can't contain child nodes in the flat element
   // model — the renderer doesn't support nested SVG elements. Passing the full
   // SVG markup string as the `content` attribute is the Lynx-native way to
   // embed vector graphics.
+  host: {
+    '[class]': 'containerClass()',
+    '[style]': 'sizeStyle()',
+  },
   template: `
-    <view #spinner [class]="containerClass()" [style]="sizeStyle()">
-      <svg [attr.content]="svgContent()" style="width: 100%; height: 100%;" />
-    </view>
+    <svg [attr.content]="svgContent()" style="width: 100%; height: 100%;" />
   `,
 })
 export class UiSpinner {
@@ -43,7 +51,7 @@ export class UiSpinner {
 
   readonly #resolveColor = injectIconColor();
 
-  readonly spinnerRef = viewChild.required<ElementRef>('spinner');
+  readonly #host = inject(ElementRef).nativeElement;
 
   /**
    * Turns the spinner for as long as it's shown. A field rather than a
@@ -51,7 +59,7 @@ export class UiSpinner {
    * nothing calls, which an app's coverage report would show as uncovered.
    */
   protected readonly rotation = effect(() => {
-    this.spinnerRef().nativeElement.animate(
+    this.#host.animate(
       [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
       {
         duration: 1600,

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

@@ -119,10 +119,21 @@ describe('UiSwitch', () => {
     settings.reduceTransparency.set(false);
   });
 
-  it('renders off, with the thumb at the left and the given class', async () => {
+  // Static attributes land on a component's host too (issue #181): the
+  // margin applies once, and only the switch itself is named Wi-Fi.
+  it('puts its class and accessibility label on one element each', async () => {
+    const { container, track, getAllByAccessibilityLabel } =
+      await renderSwitch();
+    expect([...container.querySelectorAll('.ml-2')]).toEqual([
+      track().parentElement,
+    ]);
+    expect(getAllByAccessibilityLabel('Wi-Fi')).toEqual([track()]);
+  });
+
+  it('renders off, with the thumb at the left, in a host with the given class', async () => {
     const { track, fill, thumb } = await renderSwitch();
     expect(fill().classList).toContain('bg-input');
-    expect(track().classList).toContain('ml-2');
+    expect(track().parentElement!.classList).toContain('ml-2');
     expect(style(track(), 'width')).toBe('44px');
     expect(thumb().classList).toContain('bg-background');
     // Centered 12px in: 2px from the edge for a 20px thumb.

package/dist/ui/components/switch/switch.ts

@@ -264,6 +264,19 @@ type Press = {
   selector: 'ui-switch',
   imports: [LYNX_ELEMENTS, UiGlass],
   encapsulation: ViewEncapsulation.None,
+  // The host holds the switch, with the app's class. Angular gives a
+  // component's host every static attribute the app writes on it, so a class
+  // on <ui-switch> lands on the host whatever the component does: passed on
+  // to the root as well, a margin applied twice. The root stays a view of its
+  // own: Lynx reads `consume-slide-event` as an array and
+  // `accessibility-element` as a boolean, which only a property binding on a
+  // Lynx element passes (a host binding would make them strings). Its
+  // accessibility-label is the root's, so the host drops its copy: two
+  // elements named the same would each be read.
+  host: {
+    '[class]': 'hostClass()',
+    '[attr.accessibility-label]': 'null',
+  },
   // Only the root takes touches: what's inside ignores them, so every touch
   // and its `x` belong to the switch.
   //
@@ -406,12 +419,13 @@ export class UiSwitch implements FormCheckboxControl {
     () => this.#systemDrawsGlass || !this.#settings.reduceTransparency(),
   );
 
+  protected readonly hostClass = computed(() => cn(this.userClass()));
+
   protected readonly rootClass = computed(() =>
     cn(
       'relative',
       this.disabled() &&
         (this.look() === 'material' ? 'opacity-[0.38]' : 'opacity-50'),
-      this.userClass(),
     ),
   );
 

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

@@ -71,6 +71,16 @@ class TabBarHost {
   readonly items = viewChildren(UiTabBarItem);
 }
 
+@Component({
+  imports: [UiTabBar, UiTabBarItem],
+  template: `
+    <ui-tab-bar class="mt-1">
+      <ui-tab-bar-item route="/" icon="home" label="Home" class="pt-4" />
+    </ui-tab-bar>
+  `,
+})
+class StaticClassHost {}
+
 /** The theme's light colors, as icon-theme.ts resolves them for an SVG. */
 const PRIMARY = 'rgba(24, 24, 27, 1)';
 const MUTED_FOREGROUND = 'rgba(113, 113, 122, 1)';
@@ -132,7 +142,9 @@ describe('UiTabBar', () => {
 
   it('lays the bar out as a row above the bottom safe area', async () => {
     const { container, componentRef } = await render(UiTabBar);
-    const bar = container.querySelector('[accessibility-traits="tabbar"]')!;
+    // Rendered on its own, the bar's host is the root the test renders into.
+    const bar = container;
+    expect(bar.getAttribute('accessibility-traits')).toBe('tabbar');
     expect(bar.classList).toContain('flex-row');
     expect(bar.classList).toContain('pb-safe');
     expect(bar.classList).toContain('border-t');
@@ -267,14 +279,28 @@ describe('UiTabBar', () => {
     expect(scale()).toBe('scale(1)');
   });
 
-  it("merges an item's class into its content, the given class winning", async () => {
+  it("merges an item's class with its own, the given class winning", async () => {
     const { host, tab } = await renderTabBar();
-    const content = () => tab('Inbox').querySelector('view')!;
-    expect(content().classList).toContain('pt-2');
+    expect(tab('Inbox').classList).toContain('pt-2');
 
     host.inboxClass.set('pt-3');
     await waitForUpdate();
-    expect(content().classList).toContain('pt-3');
-    expect(content().classList).not.toContain('pt-2');
+    expect(tab('Inbox').classList).toContain('pt-3');
+    expect(tab('Inbox').classList).not.toContain('pt-2');
+  });
+
+  // Angular gives a component's host every static attribute written on it,
+  // so a bar or item that also styled a view inside its host applied the
+  // class twice (issue #181).
+  it('puts a class written on the bar or an item on that one element', async () => {
+    const { container } = await render(StaticClassHost, {
+      providers: [provideRouter(routes)],
+    });
+    expect([...container.querySelectorAll('.mt-1')]).toEqual([
+      container.querySelector('[accessibility-traits="tabbar"]'),
+    ]);
+    expect([...container.querySelectorAll('.pt-4')]).toEqual([
+      container.querySelector('[accessibility-label="Home"]'),
+    ]);
   });
 });