@blotch/dolan 22.2.6 → 22.2.7

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

@@ -1115,8 +1115,12 @@ export class UiDock implements SearchFieldContainer {
   ],
   host: {
     // The host is the tap target and takes an equal share of the bar's row,
-    // which the selection capsule's width counts on.
-    class: 'flex-1 flex-col flex',
+    // which the selection capsule's width counts on. It's also the item's
+    // column, styled here rather than on a view inside it: Angular gives a
+    // component's host every static attribute the app writes on it, so a
+    // class on <ui-dock-item> lands on the host whatever the component does
+    // with its `class` input, and a styled view inside applied it twice.
+    '[class]': 'contentClass()',
     // One accessibility element per item, named by its label, so a screen
     // reader reads "Inbox, 3, button" instead of an unlabeled SVG and a word.
     // LynxRouterLinkActive adds `selected` to `button` while the route is
@@ -1140,35 +1144,33 @@ export class UiDock implements SearchFieldContainer {
     '(bindtap)': 'pressed.emit()',
   },
   template: `
-    <view [class]="contentClass()">
-      <view [class]="iconFrameClass()">
-        @if (design() === 'material') {
-          <!-- Material's active indicator: a pill behind the icon that
-               widens from its center as the item is selected. -->
+    <view [class]="iconFrameClass()">
+      @if (design() === 'material') {
+        <!-- Material's active indicator: a pill behind the icon that
+             widens from its center as the item is selected. -->
+        <view
+          class="h-8 w-14 rounded-full bg-primary absolute left-0 top-0"
+          [style]="indicatorStyle()"
+        ></view>
+      }
+      <view class="relative">
+        <svg [attr.content]="iconSvg()" style="width: 24px; height: 24px;" />
+        @if (badgeText()) {
+          <!-- Hangs off the icon's top-right corner, as on a native tab
+               bar. min-w-4 keeps a one-digit badge round; longer ones
+               grow into a pill. -->
           <view
-            class="h-8 w-14 rounded-full bg-primary absolute left-0 top-0"
-            [style]="indicatorStyle()"
-          ></view>
-        }
-        <view class="relative">
-          <svg [attr.content]="iconSvg()" style="width: 24px; height: 24px;" />
-          @if (badgeText()) {
-            <!-- Hangs off the icon's top-right corner, as on a native tab
-                 bar. min-w-4 keeps a one-digit badge round; longer ones
-                 grow into a pill. -->
-            <view
-              class="h-4 min-w-4 items-center rounded-full bg-destructive px-1 flex absolute -right-2.5 -top-1 justify-center"
+            class="h-4 min-w-4 items-center rounded-full bg-destructive px-1 flex absolute -right-2.5 -top-1 justify-center"
+          >
+            <text
+              class="text-[10px] font-semibold leading-4 text-destructive-foreground"
+              >{{ badgeText() }}</text
             >
-              <text
-                class="text-[10px] font-semibold leading-4 text-destructive-foreground"
-                >{{ badgeText() }}</text
-              >
-            </view>
-          }
-        </view>
+          </view>
+        }
       </view>
-      <text [class]="labelClass()">{{ label() }}</text>
     </view>
+    <text [class]="labelClass()">{{ label() }}</text>
   `,
 })
 export class UiDockItem {

package/dist/ui/components/empty-state/empty-state.test.ts

@@ -33,6 +33,15 @@ describe('UiEmptyState', () => {
     expect(container.querySelector('.py-6')).toBeTruthy();
   });
 
+  // Static attributes land on a component's host too (issue #181): the
+  // padding once, on the empty state itself, and the title only as its text.
+  it('puts its class on one element, and its title only in its text', async () => {
+    const { container, queryAllByTitle } = await render(EmptyStateHost);
+    expect(container.querySelectorAll('.py-6')).toHaveLength(1);
+    expect(container.querySelector('.py-6')?.classList).toContain('flex-col');
+    expect(queryAllByTitle('No results')).toEqual([]);
+  });
+
   it('adds the icon and description when they are set', async () => {
     const { componentRef, container, getByText } = await render(EmptyStateHost);
     const host = componentRef.instance as EmptyStateHost;

package/dist/ui/components/empty-state/empty-state.ts

@@ -5,22 +5,31 @@ import { cn } from '../../utils/cn';
 import { type IconName } from '../icon/icons';
 import { UiIcon } from '../icon/icon';
 
+/**
+ * The empty state 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-empty-state> lands on the host whatever the component does: with a
+ * styled view inside as well, the padding applied twice. Its title lands
+ * there too, and goes: it's shown in a <text>, and on the web preview a
+ * `title` attribute is a tooltip (and a second match for getByTitle).
+ */
 @Component({
   selector: 'ui-empty-state',
-  standalone: true,
   imports: [LYNX_ELEMENTS, UiIcon],
   encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class]': 'containerClass()',
+    '[attr.title]': 'null',
+  },
   template: `
-    <view [class]="containerClass()">
-      @if (icon()) {
-        <ui-icon [name]="icon()!" size="lg" class="mb-3" />
-      }
-      <text [class]="titleClass()">{{ title() }}</text>
-      @if (description()) {
-        <text [class]="descriptionClass()">{{ description() }}</text>
-      }
-      <ng-content />
-    </view>
+    @if (icon()) {
+      <ui-icon [name]="icon()!" size="lg" class="mb-3" />
+    }
+    <text [class]="titleClass()">{{ title() }}</text>
+    @if (description()) {
+      <text [class]="descriptionClass()">{{ description() }}</text>
+    }
+    <ng-content />
   `,
 })
 export class UiEmptyState {

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

@@ -105,6 +105,23 @@ describe('UiIcon', () => {
   });
 });
 
+@Component({
+  imports: [UiIcon],
+  template: `<ui-icon name="search" class="mb-3" />`,
+})
+class StaticClassHost {}
+
+describe('UiIcon on its own', () => {
+  // A class on a component lands on its host too (issue #181): the host is
+  // the <svg>, so the margin applies once.
+  it('is one svg, with the class written on it', async () => {
+    const { container } = await render(StaticClassHost);
+    const svgs = [...container.querySelectorAll('svg')];
+    expect(svgs).toHaveLength(1);
+    expect([...container.querySelectorAll('.mb-3')]).toEqual(svgs);
+  });
+});
+
 describe('ICONS registry', () => {
   it('exports at least one icon', () => {
     expect(Object.keys(ICONS).length).toBeGreaterThan(0);

package/dist/ui/components/icon/icon.ts

@@ -1,5 +1,5 @@
-import { Component, ViewEncapsulation, input } from '@angular/core';
-import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { Component, ViewEncapsulation, computed, input } from '@angular/core';
+import { registerHostElement } from '@blotch/angular-lynx';
 
 import { cn } from '../../utils/cn';
 import { injectIconColor } from './icon-theme';
@@ -8,6 +8,12 @@ import { type IconName, ICONS } from './icons';
 const SIZE_MAP = { xs: 16, sm: 20, md: 24, lg: 32 } as const;
 
 /**
+ * The icon is its host, an `<svg>` (registerHostElement, below). Angular gives
+ * a component's host every static attribute the app writes on it, so
+ * `<ui-icon class="mb-3">` puts `mb-3` on the host whatever the component
+ * does: with a styled `<svg>` inside a view host as well, the 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. Passing the full SVG string as the `content` attribute is how Lynx
@@ -15,15 +21,14 @@ const SIZE_MAP = { xs: 16, sm: 20, md: 24, lg: 32 } as const;
  */
 @Component({
   selector: 'ui-icon',
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `
-    <svg
-      [attr.content]="svgContent()"
-      [attr.style]="sizeStyle()"
-      [class]="svgClass()"
-    />
-  `,
+  host: {
+    '[attr.content]': 'svgContent()',
+    '[style.width.px]': 'sizePx()',
+    '[style.height.px]': 'sizePx()',
+    '[class]': 'svgClass()',
+  },
+  template: '',
 })
 export class UiIcon {
   readonly name = input.required<IconName>();
@@ -60,12 +65,9 @@ export class UiIcon {
       .join(this.#resolveColor(this.color()));
   }
 
-  protected sizeStyle(): string {
-    const px = SIZE_MAP[this.size()];
-    return `width: ${px}px; height: ${px}px;`;
-  }
+  protected readonly sizePx = computed(() => SIZE_MAP[this.size()]);
 
-  protected svgClass(): string {
-    return cn(this.userClass());
-  }
+  protected readonly svgClass = computed(() => cn(this.userClass()));
 }
+
+registerHostElement(UiIcon, 'svg');

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

@@ -1,4 +1,5 @@
 import { Component, signal } from '@angular/core';
+import { FormField, form } from '@angular/forms/signals';
 import {
   fireEvent,
   render,
@@ -34,6 +35,7 @@ import { UiInput } from './input';
       (changed)="changes.push($event)"
       (focused)="events.push('focused')"
       (blurred)="events.push('blurred')"
+      (touch)="events.push('touch')"
     />
   `,
 })
@@ -53,7 +55,7 @@ const renderInput = async () => {
     ...result,
     host: result.componentRef.instance as InputHost,
     field: () => result.container.querySelector('input')!,
-    // The field's own column; the host element renders as a view too.
+    // The field's column: its host.
     column: () => result.container.querySelector('.flex-col')!,
     wrapper: () => result.container.querySelector('.bg-muted')!,
     // The layer that draws the focus ring around the field.
@@ -82,6 +84,15 @@ describe('UiInput', () => {
     expect(queryByText('you@example.com')).toBeNull();
   });
 
+  // Angular gives a component's host every static attribute written on it
+  // (issue #181): the class styled the column twice, and the placeholder made
+  // a second match for getByPlaceholderText.
+  it('puts its class and placeholder on one element each', async () => {
+    const { container, field, getAllByPlaceholderText } = await renderInput();
+    expect(container.querySelectorAll('.w-full')).toHaveLength(1);
+    expect(getAllByPlaceholderText('you@example.com')).toEqual([field()]);
+  });
+
   it('shows its label', async () => {
     const { host, getByText } = await renderInput();
     host.label.set('Email');
@@ -89,6 +100,23 @@ describe('UiInput', () => {
     expect(getByText('Email').classList).toContain('font-medium');
   });
 
+  // Issue #180: the label sat beside the field, so screen readers read the
+  // placeholder, or nothing once the field held text.
+  it('names the native field after its label, for screen readers', async () => {
+    const { host, field, getByRole, getByText } = await renderInput();
+    // A screen reader reaches the field with or without a label.
+    expect(field().getAttribute('accessibility-element')).toBe('true');
+    expect(field().hasAttribute('accessibility-label')).toBe(false);
+
+    host.label.set('Email');
+    await waitForUpdate();
+    expect(getByRole('textbox', { name: 'Email' })).toBe(field());
+    // The label the field reads isn't a second stop of its own.
+    expect(
+      getByText('Email').getAttribute('accessibility-elements-hidden'),
+    ).toBe('true');
+  });
+
   it('updates `value` and emits `changed` as the user types', async () => {
     const { host, field } = await renderInput();
     // Lynx puts the typed text in the event's detail, not on its target.
@@ -126,7 +154,7 @@ describe('UiInput', () => {
     setAttribute.mockRestore();
   });
 
-  it('shows a focus ring while focused, and emits `focused` and `blurred`', async () => {
+  it('shows a focus ring while focused, and emits `focused`, `blurred` and `touch`', async () => {
     const { host, field, ring } = await renderInput();
     expect(ring().style.getPropertyValue('opacity')).toBe('0');
 
@@ -140,7 +168,7 @@ describe('UiInput', () => {
     fireEvent.blur(field());
     await waitForUpdate();
     expect(ring().style.getPropertyValue('opacity')).toBe('0');
-    expect(host.events).toEqual(['focused', 'blurred']);
+    expect(host.events).toEqual(['focused', 'blurred', 'touch']);
   });
 
   it('shows its helper text', async () => {
@@ -200,6 +228,30 @@ describe('UiInput', () => {
     ]);
   });
 
+  // Issue #180: without `touch`, a field's error could only show once
+  // submit() marked every field touched.
+  it('marks a Signal Forms field touched when it loses focus', async () => {
+    @Component({
+      imports: [FormField, UiInput],
+      template: `<ui-input label="Email" [formField]="signIn.email" />`,
+    })
+    class SignalHost {
+      readonly model = signal({ email: '' });
+      readonly signIn = form(this.model);
+    }
+    const { componentRef, getByRole } = await render(SignalHost);
+    const host = componentRef.instance as SignalHost;
+    const email = getByRole('textbox', { name: 'Email' });
+
+    fireEvent.focus(email);
+    fireEvent.input(email, { detail: { value: 'jane@example.com' } });
+    expect(host.model().email).toBe('jane@example.com');
+    expect(host.signIn.email().touched()).toBe(false);
+
+    fireEvent.blur(email);
+    expect(host.signIn.email().touched()).toBe(true);
+  });
+
   it('makes the wrapper a stacking context so the field scrolls with it', async () => {
     // On Lynx a z-indexed element inside a scroll-view only follows the scroll
     // when an ancestor inside the scroll content is a stacking context. Without

package/dist/ui/components/input/input.ts

@@ -1,15 +1,15 @@
 import {
-  type ElementRef,
   Component,
+  ElementRef,
   ViewEncapsulation,
   booleanAttribute,
   computed,
   effect,
+  inject,
   input,
   model,
   output,
   signal,
-  viewChild,
 } from '@angular/core';
 import { type FormValueControl } from '@angular/forms/signals';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
@@ -19,69 +19,88 @@ import { cn } from '../../utils/cn';
 
 @Component({
   selector: 'ui-input',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
+  // The host is the field's column. Angular gives a component's host every
+  // static attribute the app writes on it, so a class on <ui-input> lands
+  // there whatever the component does: a column inside the host applied it
+  // twice. A placeholder lands there too, and goes: it belongs to the
+  // <input>, and a second element with it is a second match for
+  // getByPlaceholderText.
+  host: {
+    '[class]': 'containerClass()',
+    '[attr.placeholder]': 'null',
+  },
   template: `
-    <view #container [class]="containerClass()">
-      @if (label()) {
-        <text [class]="labelClass()">{{ label() }}</text>
-      }
-      <!-- Focus ring is an inline box-shadow on a dedicated overlay layer, not a
-           Tailwind ring-* class (the Lynx preset doesn't wire up --tw-ring-*, so
-           ring-* renders nothing on device). It rides its OWN layer so it can
-           fade: box-shadow is animatable:no on Lynx (the core rejects a
-           transition: box-shadow), but opacity is animatable, so we transition
-           the layer's opacity instead. The overlay is the FIRST child so Lynx,
-           which paints in strict source order, keeps the <input> on top and
-           tappable. Source order alone is NOT enough on web: CSS paints a
-           positioned (absolute) sibling above a static one regardless of source
-           order, so this transparent overlay would swallow every tap — no focus,
-           no typing. The <input> below therefore carries position:relative +
-           z-index:1 so it sits above the overlay on BOTH platforms (required on
-           web). On Lynx, though, a z-indexed element is stacked against its
-           nearest stacking context, and a scroll-view isn't one unless it sets
-           z-index itself — so the native input would stay fixed on screen while
-           the page scrolled (only its placeholder visibly floats). The wrapper's
-           z-0 makes it that stacking context, keeping the input's z-index local
-           so it scrolls with the field. pointer-events is avoided — it errors
-           the Lynx build. The shadow is OUTSET only: Lynx doesn't render inset box-shadows,
-           so the crisp 1px "border" is an outset ring hugging the edge, not a
-           real inset border. -->
-      <view [class]="inputWrapperClass()">
-        <view
-          class="rounded-xl opacity-0 absolute bottom-0 left-0 right-0 top-0"
-          [style.transition]="'opacity 150ms ease'"
-          [style.box-shadow]="ringShadow()"
-          [style.opacity]="ringVisible() ? 1 : 0"
-        ></view>
-        <!-- [attr.disabled]="disabled() || undefined": passing 'undefined'
-             removes the attribute entirely; passing 'false' would set
-             disabled="false" which Lynx still treats as disabled. -->
-        <!-- [value] not [attr.value]: [attr.value] calls renderer.setAttribute()
-             which routes to __SetAttribute — a no-op for live text on Lynx native
-             inputs. [value] is an Angular input binding that triggers
-             LynxInput.ngOnChanges, where the setValue UIMethod override lives.
-             Without this, form model resets would update the signal but the
-             native input would keep showing the user's old typed text. -->
-        <input
-          [attr.placeholder]="placeholder()"
-          [attr.type]="type()"
-          [value]="value()"
-          [attr.disabled]="disabled() || undefined"
-          class="text-sm text-foreground"
-          style="border: none; background: transparent; height: 100%; width: 100%; position: relative; z-index: 1;"
-          (bindinput)="onInput($any($event))"
-          (bindfocus)="onFocus()"
-          (bindblur)="onBlur()"
-        />
-      </view>
-      @if (error()) {
-        <text [class]="errorClass()">{{ error() }}</text>
-      } @else if (helperText()) {
-        <text [class]="helperClass()">{{ helperText() }}</text>
-      }
+    <!-- The <input> below carries the label as its accessibility-label, so
+         screen readers read it with the field. Hidden here, or VoiceOver and
+         TalkBack would stop on it a second time. -->
+    @if (label()) {
+      <text [class]="labelClass()" accessibility-elements-hidden="true">{{
+        label()
+      }}</text>
+    }
+    <!-- Focus ring is an inline box-shadow on a dedicated overlay layer, not a
+         Tailwind ring-* class (the Lynx preset doesn't wire up --tw-ring-*, so
+         ring-* renders nothing on device). It rides its OWN layer so it can
+         fade: box-shadow is animatable:no on Lynx (the core rejects a
+         transition: box-shadow), but opacity is animatable, so we transition
+         the layer's opacity instead. The overlay is the FIRST child so Lynx,
+         which paints in strict source order, keeps the <input> on top and
+         tappable. Source order alone is NOT enough on web: CSS paints a
+         positioned (absolute) sibling above a static one regardless of source
+         order, so this transparent overlay would swallow every tap — no focus,
+         no typing. The <input> below therefore carries position:relative +
+         z-index:1 so it sits above the overlay on BOTH platforms (required on
+         web). On Lynx, though, a z-indexed element is stacked against its
+         nearest stacking context, and a scroll-view isn't one unless it sets
+         z-index itself — so the native input would stay fixed on screen while
+         the page scrolled (only its placeholder visibly floats). The wrapper's
+         z-0 makes it that stacking context, keeping the input's z-index local
+         so it scrolls with the field. pointer-events is avoided — it errors
+         the Lynx build. The shadow is OUTSET only: Lynx doesn't render inset box-shadows,
+         so the crisp 1px "border" is an outset ring hugging the edge, not a
+         real inset border. -->
+    <view [class]="inputWrapperClass()">
+      <view
+        class="rounded-xl opacity-0 absolute bottom-0 left-0 right-0 top-0"
+        [style.transition]="'opacity 150ms ease'"
+        [style.box-shadow]="ringShadow()"
+        [style.opacity]="ringVisible() ? 1 : 0"
+      ></view>
+      <!-- [attr.disabled]="disabled() || undefined": passing 'undefined'
+           removes the attribute entirely; passing 'false' would set
+           disabled="false" which Lynx still treats as disabled. -->
+      <!-- [value] not [attr.value]: [attr.value] calls renderer.setAttribute()
+           which routes to __SetAttribute — a no-op for live text on Lynx native
+           inputs. [value] is an Angular input binding that triggers
+           LynxInput.ngOnChanges, where the setValue UIMethod override lives.
+           Without this, form model resets would update the signal but the
+           native input would keep showing the user's old typed text. -->
+      <!-- accessibility-element: on iOS, Lynx makes only <text> and <image>
+           accessibility elements by default, so the UITextField under an
+           <input> isn't one. VoiceOver then read the placeholder inside it,
+           or nothing once it held text. As one, it reads its
+           accessibility-label, the label, then its text. -->
+      <input
+        accessibility-element="true"
+        [attr.accessibility-label]="label() || null"
+        [attr.placeholder]="placeholder()"
+        [attr.type]="type()"
+        [value]="value()"
+        [attr.disabled]="disabled() || undefined"
+        class="text-sm text-foreground"
+        style="border: none; background: transparent; height: 100%; width: 100%; position: relative; z-index: 1;"
+        (bindinput)="onInput($any($event))"
+        (bindfocus)="onFocus()"
+        (bindblur)="onBlur()"
+      />
     </view>
+    @if (error()) {
+      <text [class]="errorClass()">{{ error() }}</text>
+    } @else if (helperText()) {
+      <text [class]="helperClass()">{{ helperText() }}</text>
+    }
   `,
 })
 export class UiInput implements FormValueControl<string> {
@@ -97,8 +116,15 @@ export class UiInput implements FormValueControl<string> {
   readonly changed = output<string>();
   readonly focused = output<void>();
   readonly blurred = output<void>();
+  /**
+   * The field lost focus, for forms, which mark it as touched as they do a
+   * native input (FormUiControl's `touch`). Signal Forms, reactive forms and
+   * template-driven forms all listen for it; a `touched` model's change
+   * isn't read by any of them.
+   */
+  readonly touch = output<void>();
 
-  readonly containerRef = viewChild<ElementRef>('container');
+  readonly #host = inject(ElementRef).nativeElement;
   readonly #isFocused = signal(false);
   #shakeAnim?: AnimationHandle;
   #previousError = '';
@@ -111,10 +137,9 @@ export class UiInput implements FormValueControl<string> {
    */
   protected readonly shakeOnError = effect(() => {
     const err = this.error();
-    const el = this.containerRef()?.nativeElement;
-    if (err && !this.#previousError && el) {
+    if (err && !this.#previousError) {
       this.#shakeAnim?.cancel();
-      this.#shakeAnim = shake(el);
+      this.#shakeAnim = shake(this.#host);
     }
     this.#previousError = err;
   });
@@ -179,6 +204,7 @@ export class UiInput implements FormValueControl<string> {
   protected onBlur(): void {
     this.#isFocused.set(false);
     this.blurred.emit();
+    this.touch.emit();
   }
 
   /**

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

@@ -11,6 +11,12 @@ class LabelHost {
   readonly disabled = signal(false);
 }
 
+@Component({
+  imports: [UiLabel],
+  template: `<ui-label class="mb-2">Email</ui-label>`,
+})
+class StaticClassHost {}
+
 describe('UiLabel', () => {
   it('renders its text, dimmed while disabled', async () => {
     const { componentRef, getByText } = await render(LabelHost);
@@ -22,4 +28,13 @@ describe('UiLabel', () => {
     await waitForUpdate();
     expect(label.classList).toContain('opacity-50');
   });
+
+  // A class on a component lands on its host too (issue #181): the label is
+  // one <text>, so the class styles one element.
+  it('is one text, with the class written on it', async () => {
+    const { container, getByText } = await render(StaticClassHost);
+    const label = getByText('Email');
+    expect(label.tagName.toLowerCase()).toBe('text');
+    expect([...container.querySelectorAll('.mb-2')]).toEqual([label]);
+  });
 });

package/dist/ui/components/label/label.ts

@@ -5,16 +5,22 @@ import {
   computed,
   input,
 } from '@angular/core';
-import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { registerHostElement } from '@blotch/angular-lynx';
 
 import { cn } from '../../utils/cn';
 
+/**
+ * The label is its host, a `<text>` (registerHostElement, below), styled
+ * through `host`. Angular gives a component's host every static attribute the
+ * app writes on it, so `<ui-label class="mb-2">` puts `mb-2` on the host
+ * whatever the component does: with a styled `<text>` inside a view host as
+ * well, the margin applied twice.
+ */
 @Component({
   selector: 'ui-label',
-  standalone: true,
-  imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
-  template: `<text [class]="labelClass()"><ng-content /></text>`,
+  host: { '[class]': 'labelClass()' },
+  template: '<ng-content />',
 })
 export class UiLabel {
   readonly disabled = input(false, { transform: booleanAttribute });
@@ -28,3 +34,5 @@ export class UiLabel {
     ),
   );
 }
+
+registerHostElement(UiLabel, 'text');

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

@@ -45,6 +45,8 @@ const renderList = async () => {
     ...result,
     host: result.componentRef.instance as ListHost,
     list: () => result.container.querySelector('list')!,
+    /** The list's box, its host, which the <list> fills. */
+    box: () => result.container.querySelector('list')!.parentElement!,
   };
 };
 
@@ -65,12 +67,20 @@ describe('UiList', () => {
     // Lynx `<list>` is virtualized: items join the native tree only through
     // its componentAtIndex callback, which a unit test doesn't drive. So this
     // checks the list itself rather than the projected item.
-    const { list } = await renderList();
+    const { list, box } = await renderList();
     expect(list().getAttribute('list-type')).toBe('single');
     expect(list().getAttribute('span-count')).toBe('1');
     expect(list().getAttribute('scroll-orientation')).toBe('vertical');
-    expect(list().classList).toContain('w-full');
-    expect(list().classList).toContain('bg-card');
+    expect(list().classList).toContain('grow');
+    expect(box().classList).toContain('w-full');
+    expect(box().classList).toContain('bg-card');
+  });
+
+  // Angular gives a component's host every static attribute written on it,
+  // so the <list> taking the class as well applied it twice (issue #181).
+  it('puts its class on one element, its box', async () => {
+    const { container, box } = await renderList();
+    expect([...container.querySelectorAll('.bg-card')]).toEqual([box()]);
   });
 
   it('gives the list an explicit height, which it needs to scroll', async () => {