@blotch/dolan 22.2.6 → 22.2.7

package/dist/ui/components/chart/chart-presets.test.ts

@@ -295,8 +295,10 @@ describe('UiCartesianPreset', () => {
     const { container, componentRef, getByText } = await render(PresetHost);
     const root = chartRoot(container);
     expect(root.getAttribute('accessibility-label')).toBe('Sales');
-    expect(root.getAttribute('class')).toContain('mt-2');
-    expect(root.getAttribute('style')).toContain('height: 160px');
+    // The chart's box, which the root view fills.
+    expect(root.parentElement!.getAttribute('style')).toContain(
+      'height: 160px',
+    );
     expect(getByText('Units')).toBeTruthy();
     expect(getByText('Day')).toBeTruthy();
 
@@ -305,6 +307,18 @@ describe('UiCartesianPreset', () => {
     expect(getByText('Week')).toBeTruthy();
   });
 
+  // Angular gives a component's host every static attribute written on it,
+  // so a preset that passed its class on to its chart as well applied it
+  // twice (issue #181).
+  it("puts its class on one element, the preset's own box", async () => {
+    const { container } = await render(PresetHost);
+    const box = chartRoot(container).parentElement!;
+    expect([...container.querySelectorAll('.mt-2')]).toEqual([
+      box.parentElement,
+    ]);
+    expect(box.parentElement!.classList).toContain('w-full');
+  });
+
   it('hands a tap over as the datum, or null off the points', async () => {
     const { container, componentRef } = await render(PresetHost);
     const host = componentRef.instance as PresetHost;

package/dist/ui/components/chart/chart-presets.ts

@@ -1,10 +1,17 @@
-import { Directive, booleanAttribute, input, viewChild } from '@angular/core';
+import {
+  Directive,
+  booleanAttribute,
+  computed,
+  input,
+  viewChild,
+} from '@angular/core';
 import { scaleLinear } from '@tanstack/charts/scales/linear';
 import type {
   ChartPoint,
   ChartPositionScaleOptions,
 } from '@tanstack/charts/types';
 
+import { cn } from '../../utils/cn';
 import { UiChart } from './chart';
 import type { ChartColorSchemeOption } from './chart-theme';
 import type { ChartZoomAxes } from './chart-zoom';
@@ -184,8 +191,16 @@ const chartType = () => UiChart;
  * The inputs and zoom API every cartesian preset shares. A preset extends this
  * and adds its own data and mark inputs, and renders `<ui-chart #chart>`
  * with the shared bindings.
+ *
+ * A preset's host is the chart's box in the page, and takes the app's
+ * classes; the chart inside fills its width, at the preset's `height`.
+ * Angular gives a component's host every static attribute the app writes on
+ * it, so a class on `<ui-line-chart>` lands on the preset's host whatever the
+ * preset does with its `class` input: passed on to the chart as well, a
+ * margin applied twice, and a width class sized the chart a second time
+ * inside the first.
  */
-@Directive()
+@Directive({ host: { '[class]': 'hostClass()' } })
 export abstract class UiCartesianPreset<TDatum> {
   /** Fixed width in px. Omit to fill the container. */
   readonly width = input<number>();
@@ -221,6 +236,11 @@ export abstract class UiCartesianPreset<TDatum> {
 
   protected readonly chart = viewChild.required(chartType());
 
+  // Like the chart's box: as wide as its parent, and not squeezed by a column.
+  protected readonly hostClass = computed(() =>
+    cn('w-full flex-shrink-0', this.userClass()),
+  );
+
   /**
    * The shared inputs, as the options every preset's definition takes.
    */
@@ -268,7 +288,6 @@ export const PRESET_CHART_BINDINGS = `
   [height]="height()"
   [label]="label()"
   [colorScheme]="colorScheme()"
-  [class]="userClass()"
   [zoomable]="zoomable()"
   [zoomAxes]="zoomAxes()"
   [showZoomControls]="showZoomControls()"

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

@@ -103,6 +103,14 @@ class ChartHost {
   readonly chart = viewChild.required(UiChart);
 }
 
+@Component({
+  imports: [UiChart],
+  template: `<ui-chart [definition]="definition" class="mt-2" />`,
+})
+class StaticClassHost {
+  readonly definition = barChart();
+}
+
 /**
  * Renders the host 300px wide, after `configure` sets its inputs. Without a
  * width the chart waits for its layout (see "measures its layout").
@@ -125,6 +133,12 @@ const renderChart = async (
 const chartRoot = (container: Element) =>
   container.querySelector('[accessibility-label]')!;
 
+/**
+ * The chart's box, its host, which its classes and size style and the root
+ * view fills.
+ */
+const chartBox = (container: Element) => chartRoot(container).parentElement!;
+
 /**
  * The SVG each layer draws: under the marks, the marks, over the marks.
  */
@@ -206,6 +220,17 @@ const tap = async (root: Element, at: { x: number; y: number }) => {
 };
 
 describe('UiChart', () => {
+  // Angular gives a component's host every static attribute written on it,
+  // so the root view taking the class as well applied it twice (issue
+  // #181).
+  it('puts its class on one element, its box', async () => {
+    const { container } = await render(StaticClassHost);
+    expect([...container.querySelectorAll('.mt-2')]).toEqual([
+      chartBox(container),
+    ]);
+    expect(chartBox(container).classList).toContain('h-[200px]');
+  });
+
   describe('rendering', () => {
     it('draws nothing until it has a size, and ignores input until then', async () => {
       const { container, componentRef } = await render(ChartHost);
@@ -234,9 +259,7 @@ describe('UiChart', () => {
     });
 
     it('draws marks, empty focus layers and native labels', async () => {
-      const { container, root } = await renderChart((host) =>
-        host.height.set(200),
-      );
+      const { container } = await renderChart((host) => host.height.set(200));
       const [under, marks, over] = layers(container);
       expect(layers(container)).toHaveLength(3);
       expect(marks).toContain('<rect');
@@ -246,8 +269,12 @@ describe('UiChart', () => {
       expect(labelTexts(container)).toEqual(
         expect.arrayContaining(['Jan', 'Feb', 'Mar', 'Revenue']),
       );
-      expect(root.getAttribute('style')).toContain('width: 300px');
-      expect(root.getAttribute('style')).toContain('height: 200px');
+      expect(chartBox(container).getAttribute('style')).toContain(
+        'width: 300px',
+      );
+      expect(chartBox(container).getAttribute('style')).toContain(
+        'height: 200px',
+      );
       const layerStyle = container.querySelector('svg')!.getAttribute('style');
       expect(layerStyle).toContain('width: 300px');
       expect(layerStyle).toContain('height: 200px');
@@ -375,7 +402,9 @@ describe('UiChart', () => {
       const root = chartRoot(container);
       const layerStyle = () =>
         container.querySelector('svg')?.getAttribute('style');
-      expect(root.getAttribute('style') ?? '').not.toContain('width');
+      expect(chartBox(container).getAttribute('style') ?? '').not.toContain(
+        'width',
+      );
 
       fireEvent.layoutchange(root, { detail: { width: 250, height: 120 } });
       await waitForUpdate();

package/dist/ui/components/chart/chart.ts

@@ -211,10 +211,21 @@ type TouchPoint = {
   selector: 'ui-chart',
   imports: [LYNX_ELEMENTS, LynxGestureDetector, NgTemplateOutlet],
   encapsulation: ViewEncapsulation.None,
+  // The host is the chart's box, sized by its classes and `width`/`height`,
+  // and the root view fills it. Angular gives a component's host every
+  // static attribute the app writes on it, so a class on <ui-chart> lands on
+  // the host whatever the component does with its `class` input: on the root
+  // view as well, a margin or padding applied twice. The root stays a view of
+  // its own for the pan gesture and the accessibility element, which bind to
+  // it. `flex-1`, not `h-full`: a percentage height doesn't reliably resolve
+  // on a flex item in Lynx.
+  host: {
+    '[class]': 'rootClass()',
+    '[style]': 'rootStyle()',
+  },
   template: `
     <view
-      [class]="rootClass()"
-      [style]="rootStyle()"
+      class="flex-1 relative"
       [lynxGesture]="zoomable() ? panGesture : noGesture"
       [accessibility-element]="true"
       [accessibility-label]="label()"
@@ -385,7 +396,7 @@ export class UiChart {
   #touchStart: TouchPoint | null = null;
 
   protected readonly rootClass = computed(() =>
-    cn('h-[200px] w-full flex-shrink-0 relative', this.userClass()),
+    cn('h-[200px] w-full flex-shrink-0 flex-col flex', this.userClass()),
   );
 
   protected readonly rootStyle = computed(() => {

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

@@ -41,8 +41,8 @@ const renderCheckbox = async () => {
   return {
     ...result,
     host: result.componentRef.instance as CheckboxHost,
-    /** The 44pt tap target around the box. */
-    target: () => result.container.querySelector('.h-11')!,
+    /** The 44pt tap target around the box: the checkbox's host. */
+    target: () => result.container.firstElementChild!,
     box: () => result.container.querySelector('.rounded-sm')!,
     checkmark: () => result.getByText('✓'),
   };
@@ -61,13 +61,20 @@ describe('UiCheckbox', () => {
   });
   afterEach(() => animate.mockRestore());
 
-  it('renders an empty box with the given class', async () => {
+  it('renders an empty box', async () => {
     const { box, checkmark } = await renderCheckbox();
     expect(box().classList).toContain('bg-transparent');
-    expect(box().classList).toContain('mr-2');
     expect(checkmark().getAttribute('style')).toContain('opacity: 0');
   });
 
+  // A class on a component lands on its host too (issue #181): the class is
+  // the box's, so the host, the tap target, drops its copy.
+  it('puts its class on one element, the box', async () => {
+    const { container, box, target } = await renderCheckbox();
+    expect([...container.querySelectorAll('.mr-2')]).toEqual([box()]);
+    expect((target() as HTMLElement).style.width).toBe('2.75rem');
+  });
+
   it('checks and unchecks on tap, emitting `changed`', async () => {
     const { host, target, box, checkmark } = await renderCheckbox();
 

package/dist/ui/components/checkbox/checkbox.ts

@@ -15,25 +15,32 @@ import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 import { type AnimationHandle, popIn, popOut } from '../../utils/animate';
 import { cn } from '../../utils/cn';
 
+/**
+ * The host is the checkbox's 44pt tap target, with the box inside, and the
+ * app's class is the box's. Angular also gives the host every static
+ * attribute the app writes on <ui-checkbox>, so the class styled the target
+ * too: a margin applied twice. The host drops it, and takes its own size
+ * from an inline style, which dropping the class leaves alone.
+ */
 @Component({
   selector: 'ui-checkbox',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
+  host: {
+    '[attr.class]': 'null',
+    style:
+      'width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center;',
+    '(bindtap)': 'toggle()',
+  },
   template: `
-    <view
-      class="h-11 w-11 items-center flex justify-center"
-      (bindtap)="toggle()"
-    >
-      <view [class]="boxClass()">
-        <text
-          #checkmark
-          [class]="checkClass()"
-          [style]="checked() ? 'opacity: 1;' : 'opacity: 0;'"
-        >
-          ✓
-        </text>
-      </view>
+    <view [class]="boxClass()">
+      <text
+        #checkmark
+        [class]="checkClass()"
+        [style]="checked() ? 'opacity: 1;' : 'opacity: 0;'"
+      >
+        ✓
+      </text>
     </view>
   `,
 })

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

@@ -68,8 +68,6 @@ const CANCEL = 3;
 describe('UiCollapsible', () => {
   it("merges each part's class with its own", async () => {
     const { container, host, trigger, content } = await renderCollapsible();
-    // The host element carries the class too, so look for the view that has
-    // both its own and the given class.
     expect(container.querySelector('.flex-col.gap-2')).not.toBeNull();
     expect(trigger().classList).toContain('flex-row');
     expect(trigger().classList).toContain('px-2');
@@ -80,6 +78,22 @@ describe('UiCollapsible', () => {
     expect(content()!.classList).toContain('pt-1');
   });
 
+  // A class on a component lands on its host too (issue #181): each part is
+  // its host, so each class applies once, and closed content, which is
+  // hidden, takes no room for its padding.
+  it('puts each class on one element', async () => {
+    const { container, host, trigger, content } = await renderCollapsible();
+    expect(container.querySelectorAll('.gap-2')).toHaveLength(1);
+    expect([...container.querySelectorAll('.px-2')]).toEqual([trigger()]);
+    const [closed] = container.querySelectorAll('.pt-1');
+    expect(closed!.classList).toContain('hidden');
+
+    host.open.set(true);
+    await waitForUpdate();
+    expect([...container.querySelectorAll('.pt-1')]).toEqual([content()]);
+    expect(content()!.classList).not.toContain('hidden');
+  });
+
   it('opens and closes when the trigger is tapped', async () => {
     const { host, trigger, content } = await renderCollapsible();
     // Closed, the content isn't mounted at all.
@@ -150,7 +164,7 @@ describe('UiCollapsible', () => {
           { transform: 'translateY(-8px)', opacity: 0 },
           { transform: 'translateY(0)', opacity: 1 },
         ],
-        // No fill: once it ends, the content's inline resting style applies.
+        // No fill: once it ends, the content's own style applies.
         expect.objectContaining({ fill: 'none' }),
       ]);
       const [firstKey] = startedOn(content());
@@ -160,13 +174,9 @@ describe('UiCollapsible', () => {
       fireEvent.tap(trigger());
       await waitForUpdate();
       await waitForUpdate();
-      // Reopening stops the previous reveal before it plays a new one on the
-      // content's new view.
-      expect(animate).toHaveBeenCalledWith(expect.anything(), [
-        CANCEL,
-        firstKey,
-      ]);
-      expect(startedOn(content())).toHaveLength(1);
+      // Reopening stops the previous reveal before it plays a new one.
+      expect(animate).toHaveBeenCalledWith(content(), [CANCEL, firstKey]);
+      expect(startedOn(content())).toHaveLength(2);
     });
 
     it("doesn't animate content that closed before its reveal began", async () => {

package/dist/ui/components/collapsible/collapsible.ts

@@ -1,6 +1,6 @@
 import {
-  type ElementRef,
   Component,
+  ElementRef,
   ViewEncapsulation,
   booleanAttribute,
   computed,
@@ -8,23 +8,23 @@ import {
   inject,
   input,
   model,
-  viewChild,
 } from '@angular/core';
-import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 
 import { type AnimationHandle, revealIn } from '../../utils/animate';
 import { cn } from '../../utils/cn';
 
+/**
+ * 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-collapsible class="rounded-lg border">` puts those
+ * classes on the host whatever the component does: with a styled view inside
+ * as well, the border was drawn twice.
+ */
 @Component({
   selector: 'ui-collapsible',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view [class]="containerClass()">
-      <ng-content />
-    </view>
-  `,
+  host: { '[class]': 'containerClass()' },
+  template: '<ng-content />',
 })
 export class UiCollapsible {
   readonly open = model(false);
@@ -44,14 +44,12 @@ export class UiCollapsible {
 
 @Component({
   selector: 'ui-collapsible-trigger',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view [class]="triggerClass()" (bindtap)="onTap()">
-      <ng-content />
-    </view>
-  `,
+  host: {
+    '[class]': 'triggerClass()',
+    '(bindtap)': 'onTap()',
+  },
+  template: '<ng-content />',
 })
 export class UiCollapsibleTrigger {
   readonly #collapsible = inject(UiCollapsible);
@@ -72,26 +70,19 @@ export class UiCollapsibleTrigger {
 
 @Component({
   selector: 'ui-collapsible-content',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   // Mount the content only while open, via `@if`. On Lynx this works because the
   // renderer recreates a destroyed element's native painting node when it is
   // re-inserted (see LynxElement.#recreateSubtree in @blotch/angular-lynx): when
-  // the panel reopens, the projected `<ng-content>` — recycled with the re-created
-  // wrapper — is rebuilt from cache and renders again on every open. The inline
-  // opacity/transform is the resting state; revealIn animates from opacity:0 /
-  // translateY(-8px) with fill:'none' so the inline style takes over once the
-  // animation ends.
+  // the panel reopens, the projected `<ng-content>` is rebuilt from cache and
+  // renders again on every open. While closed the host is hidden, so the
+  // classes the app wrote on it (which Angular puts on the host either way)
+  // take no room. revealIn animates from opacity:0 / translateY(-8px) with
+  // fill:'none', so the host's own style takes over once the animation ends.
+  host: { '[class]': 'contentClass()' },
   template: `
     @if (collapsible.open()) {
-      <view
-        #content
-        [class]="contentClass()"
-        style="opacity: 1; transform: translateY(0);"
-      >
-        <ng-content />
-      </view>
+      <ng-content />
     }
   `,
 })
@@ -99,7 +90,7 @@ export class UiCollapsibleContent {
   protected readonly collapsible = inject(UiCollapsible);
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly contentRef = viewChild<ElementRef>('content');
+  readonly #host = inject(ElementRef).nativeElement;
   #anim?: AnimationHandle;
 
   /**
@@ -107,22 +98,20 @@ export class UiCollapsibleContent {
    * constructor: Angular's test build keeps a function for a constructor that
    * nothing calls, which an app's coverage report would show as uncovered.
    *
-   * contentRef only resolves while the `@if` content is mounted; defer one
-   * macrotask so the freshly (re)created element is committed to the native
-   * tree before we animate it. By then the panel may have closed again, which
-   * leaves nothing to animate.
+   * Deferred one macrotask so the re-inserted content is committed to the
+   * native tree before we animate it. By then the panel may have closed
+   * again, which leaves nothing to animate.
    */
   protected readonly revealing = effect(() => {
     if (!this.collapsible.open()) return;
     setTimeout(() => {
-      const el = this.contentRef()?.nativeElement;
-      if (!el) return;
+      if (!this.collapsible.open()) return;
       this.#anim?.cancel();
-      this.#anim = revealIn(el, { fromY: -8, fill: 'none' });
+      this.#anim = revealIn(this.#host, { fromY: -8, fill: 'none' });
     }, 0);
   });
 
   protected readonly contentClass = computed(() =>
-    cn('flex-col flex', this.userClass()),
+    this.collapsible.open() ? cn('flex-col flex', this.userClass()) : 'hidden',
   );
 }

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

@@ -123,7 +123,6 @@ describe('UiDialog', () => {
     expect(getByText('Title').classList).toContain('text-xl');
     expect(getByText('Description').classList).toContain('text-sm');
     expect(getByText('Description').classList).toContain('italic');
-    // Each part's own view, not its host element, which keeps the bare class.
     const header = container.querySelector('.flex-col.gap-2');
     expect(header?.classList).not.toContain('gap-1.5');
     const footer = container.querySelector('.pt-4');
@@ -131,6 +130,23 @@ describe('UiDialog', () => {
     expect(footer?.classList).not.toContain('justify-end');
   });
 
+  // Angular gives a component's host every static attribute written on it
+  // (issue #181), so each class also styled a host: the dialog'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 panel, or the part', async () => {
+    const { container, getByText, panel } = await renderDialog();
+    expect([...container.querySelectorAll('.max-w-sm')]).toEqual([panel()]);
+    // The header's: the footer has a gap-2 of its own.
+    expect(container.querySelectorAll('.flex-col.gap-2')).toHaveLength(1);
+    expect(container.querySelectorAll('.justify-start')).toHaveLength(1);
+    expect([...container.querySelectorAll('.text-xl')]).toEqual([
+      getByText('Title'),
+    ]);
+    expect([...container.querySelectorAll('.italic')]).toEqual([
+      getByText('Description'),
+    ]);
+  });
+
   it('stays hidden until it is opened', async () => {
     const { host, overlay, panel } = await renderDialog();
     await after(CLOSED);

package/dist/ui/components/dialog/dialog.ts

@@ -11,7 +11,7 @@ import {
   signal,
   viewChild,
 } from '@angular/core';
-import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { LYNX_ELEMENTS, registerHostElement } from '@blotch/angular-lynx';
 
 import {
   type AnimationHandle,
@@ -29,6 +29,11 @@ import { cn } from '../../utils/cn';
   selector: 'ui-dialog',
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
+  // The dialog's class is its panel's, inside the overlay. Angular also gives
+  // the host every static attribute the app writes on <ui-dialog>, and the
+  // host sits in the page's layout where the dialog is written, so a
+  // `class="p-8"` padded the page there too. The host drops it.
+  host: { '[attr.class]': 'null' },
   template: `
     <overlay [attr.visible]="overlayVisible()" [style]="overlayStyle()">
       <view #backdrop [class]="backdropClass()" (bindtap)="onBackdropTap()">
@@ -220,15 +225,17 @@ export class UiDialog implements OnDestroy {
   }
 }
 
+/**
+ * The parts are their host elements, styled through `host`: a class the app
+ * writes on a part lands on its host anyway (see UiDialog), 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.
+ */
 @Component({
   selector: 'ui-dialog-header',
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view [class]="containerClass()">
-      <ng-content />
-    </view>
-  `,
+  host: { '[class]': 'containerClass()' },
+  template: '<ng-content />',
 })
 export class UiDialogHeader {
   readonly userClass = input<string>('', { alias: 'class' });
@@ -240,9 +247,9 @@ export class UiDialogHeader {
 
 @Component({
   selector: 'ui-dialog-title',
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `<text [class]="textClass()"><ng-content /></text>`,
+  host: { '[class]': 'textClass()' },
+  template: '<ng-content />',
 })
 export class UiDialogTitle {
   readonly userClass = input<string>('', { alias: 'class' });
@@ -252,11 +259,13 @@ export class UiDialogTitle {
   );
 }
 
+registerHostElement(UiDialogTitle, 'text');
+
 @Component({
   selector: 'ui-dialog-description',
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `<text [class]="textClass()"><ng-content /></text>`,
+  host: { '[class]': 'textClass()' },
+  template: '<ng-content />',
 })
 export class UiDialogDescription {
   readonly userClass = input<string>('', { alias: 'class' });
@@ -266,15 +275,13 @@ export class UiDialogDescription {
   );
 }
 
+registerHostElement(UiDialogDescription, 'text');
+
 @Component({
   selector: 'ui-dialog-footer',
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <view [class]="containerClass()">
-      <ng-content />
-    </view>
-  `,
+  host: { '[class]': 'containerClass()' },
+  template: '<ng-content />',
 })
 export class UiDialogFooter {
   readonly userClass = input<string>('', { alias: 'class' });

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

@@ -101,6 +101,16 @@ class DockHost {
   readonly items = viewChildren(UiDockItem);
 }
 
+@Component({
+  imports: [UiDock, UiDockItem],
+  template: `
+    <ui-dock>
+      <ui-dock-item route="/" icon="home" label="Home" class="pt-4" />
+    </ui-dock>
+  `,
+})
+class StaticClassHost {}
+
 /**
  * A dock with only an action of the app's own, and no items.
  */
@@ -685,15 +695,30 @@ describe('UiDockItem', () => {
     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, item } = await renderDock(IOS_26);
-    const content = () => item('Inbox').querySelector('view')!;
-    expect(content().classList).toContain('gap-0.5');
+    expect(item('Inbox').classList).toContain('gap-0.5');
 
     host.inboxClass.set('gap-2');
     await waitForUpdate();
-    expect(content().classList).toContain('gap-2');
-    expect(content().classList).not.toContain('gap-0.5');
+    expect(item('Inbox').classList).toContain('gap-2');
+    expect(item('Inbox').classList).not.toContain('gap-0.5');
+  });
+
+  // Angular gives a component's host every static attribute written on it,
+  // so an item that also styled a view inside its host applied the class
+  // twice (issue #181).
+  it('puts a class written on an item on that one element', async () => {
+    const { container } = await render(StaticClassHost, {
+      providers: [
+        provideRouter(routes),
+        onPlatform(IOS_26),
+        { provide: LynxAccessibilitySettings, useValue: settings },
+      ],
+    });
+    expect([...container.querySelectorAll('.pt-4')]).toEqual([
+      container.querySelector('[accessibility-label="Home"]'),
+    ]);
   });
 });