@blotch/dolan 22.2.6 → 22.2.7

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 } =

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